使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

 更新时间:2014年06月17日 17:06:27   转载 投稿:mdxy-dxy  
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板

Zero Clipboard的实现原理

Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板

Zero Clipboard的安装方法

首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。

然后把在你要使用复制功能的页面中引入Zero Clipboard的js文件:ZeroClipboard.js
如下代码:

复制代码 代码如下:

<script type="text/javascript" src="ZeroClipboard.js"></script>

注意:以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径,可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址

复制代码 代码如下:

Zero Clipboard实现简单跨浏览器复制
var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor( true ); // 设置鼠标为手型
clip.setText("哈哈"); // 设置要复制的文本。
// 注册一个 button,参数为 id。点击这个 button 就会复制。
//这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可调换

这样,这样基本功能实现了,点击按钮就可以复制设置好的文本了。你可能注意到了,待复制的文本是固定的,如果想要动态改变的怎么办,比如复制一个输入框中的内容。不用担心,下面会讲到的。

Zero Clipboard的高级功能

1、reposition() 方法

因为按钮上漂浮有一个 Flash 按钮,所以当页面大小发生变化时,Flash 按钮可能会错位,这样就点不着了。 不要紧,Zero Clipboard 提供了一个 reposition() 方法,可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。如下面代码是在jQuery下实现的resize事件重新设置按钮位置:

复制代码 代码如下:

$(window).resize(function(){
   clip.reposition();
});

2、hide() 和 show() 方法
这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。

3、setCSSEffects() 方法
当鼠标移到按钮上或点击时,由于有 Flash 按钮的遮挡,所以像 css “:hover”, “:active” 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类,比如:

#copy-botton:hover{border-color:#FF6633;}// 可以改成下面的 ":hover" 改成 ".hover"
#copy-botton.hover{border-color:#FF6633;}

我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理:将类 .hover 当成伪类 :hover 。

4、getHTML() 方法
如果你想自己实例一个 Flash ,不用 Zero Clipboard 的附着方法,那么这个方法就可以帮上忙了。它接受两个参数,分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如:

var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 进行输出。
以下是测试输出的组装完毕的HTML 代码:
<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" />

IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。

Zero Clipboard 事件处理

Zero Clipboard 提供了一些事件,你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 “load” 。
clip.addEventListener( "load", function(client) {
    alert("Flash 加载完毕!");
});
Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 “client” 。
还有 “load” 也可以写成 “onLoad”,其他的事件也可以这样。

其他事件还包括:

mouseOver 鼠标移上事件
mouseOut 鼠标移出事件
mouseDown 鼠标按下事件
mouseUp 鼠标松开事件
complete 复制成功事件
其中 mouseOver 事件和 complete 事件比较常用。

前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值,我们可以在鼠标 over 的时候重新设置值。

复制代码 代码如下:

clip.addEventListener( "mouseOver", function(client) {
    var test = document.getElementById("test");
    client.setText( test.value ); // 重新设置要复制的值
});
//复制成功:
clip.addEventListener( "complete", function(){
    alert("复制成功!");
});

相关文章

  • FCKEditor常用Js代码,获取FCK内容,统计FCK字数,向FCK写入指定代码

    FCKEditor常用Js代码,获取FCK内容,统计FCK字数,向FCK写入指定代码

    FCKEditor常用Js代码,获取FCK内容,统计FCK字数,向FCK写入指定代码,使用FCKEditor的朋友可以参考下。增加编辑器的人性化功能。
    2010-04-04
  • FCK编辑器(FCKEditor)添加新按钮和功能的修改方法

    FCK编辑器(FCKEditor)添加新按钮和功能的修改方法

    最近项目需要对已有的FCKeditor添加新的功能,以前的做法只是在外壳处再次封装,这次无法满足需求只能进行内部修改了。
    2010-11-11
  • IE8 Fckedit2.6.X不兼容

    IE8 Fckedit2.6.X不兼容

    经过测试IE8和FCKEditer出现不兼容的情况,表现在提交数据时Fckediter对象里面的数据为空
    2009-04-04
  • FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

    FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

    现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能
    2014-04-04
  • FCKeditor ASP.NET 上传附件研究

    FCKeditor ASP.NET 上传附件研究

    FCKeditor很好用,而且是开源软件。最近研究了一下自带的上传功能,对源代码作了一点修改,也算是依照开源软件的要求,介绍一下。
    2009-06-06
  • fckeditor 代码语法高亮

    fckeditor 代码语法高亮

    这两个星期有点空,就再研究了一下语法高亮的问题,找了一下FCKeditor官方网站,发现2.5.1稳定版已经出来了,首先替换掉旧的2.0。呵呵,我喜欢使用新版。
    2009-06-06
  • ckeditor自定义插件使用方法详解

    ckeditor自定义插件使用方法详解

    ckeditor是一款功能强大的富文本编辑工具,这篇文章主要为大家详细介绍了ckeditor自定义插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • HTML 编辑器 FCKeditor使用详解

    HTML 编辑器 FCKeditor使用详解

    最近使用fckeditor的人是越来越多了,随着大家环境的不一样也导致大家在使用过程中碰到了各种各样的问题,这篇文章对于细节的描述不错,更高级的技巧可以参考脚本之家之前发布的一些文章。
    2009-06-06
  • FCKEidtor 自动统计输入字符个数(IE)

    FCKEidtor 自动统计输入字符个数(IE)

    由于项目需要,需要做字数统计,于是写了一个JS计算字符个数,如果输入的字符数大于100个字符,就弹出提示,点击【确定】后,自动截取为100个字符。
    2009-05-05
  • FCKEditor超级链接默认新窗口打开的修改方法

    FCKEditor超级链接默认新窗口打开的修改方法

    经常在后台编辑超链接的朋友,希望将页面链接,默认是新窗口打开,因为这样用户体验好点,所以将FCKEditor简单的修改下。
    2010-06-06

最新评论