Zero Clipboard js+swf实现的复制功能使用方法


开发中经常会用到复制的功能,在 IE 下实现比较简单 。但要想做到跨浏览器比较困难了 。本文将介绍一个跨浏览器的库类 Zero Clipboard  。它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活 。

Zero Clipboard 的实现原理
Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash 。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板 。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了 。

如何使用 Zero Clipboard
首先下载 Zero Clipboard ,并解压缩 。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中 。

下载地址
Zero Clipboard 开源的 JavaScript+flash 复制库类

演示地址:
http://demo.jb51.net/js/ZeroClipboard/index.html

核心功能
第一步,导入 ZeroClipboard.js 文件:

<script type="text/javascript" src="ZeroClipboard.js"></script>
再设置 ZeroClipboard.swf 文件的路径:

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注意:以上 ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径 。或者也可以是一个绝对路径 。

然后就使用了:
复制代码 代码如下:

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

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

其他函数
Zero Clipboard 还提供了一些其他的函数,其中有一些非常有用 。

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

bind(window, "resize", function(){
clip.reposition();
});

bind 是一个跨浏览器的事件绑定函数 。
=========================================================
这个想必大家都已知道 。IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持 。下面进行封装 。
复制代码 代码如下:

/************************************
* 添加事件绑定
* @param obj : 要绑定事件的元素
* @param type : 事件名称 。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件处理函数
************************************/
function bind( obj, type, fn ) {
if ( obj.attachEvent ) {
obj[e+type+fn] = fn;
obj[type+fn] = function(){obj[e+type+fn]( window.event );}
obj.attachEvent( on+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}

例如添加一个页面点击事件:
复制代码 代码如下:

bind(document, "click", function() {
alert("Hello, World!!");
});

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

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  。

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("复制成功!");
});
好了,就介绍到这里吧 。赶快自己试验下吧 。