Zero Clipboard 跨浏览器复制库使用指南

本文介绍跨浏览器库类 Zero Clipboard，其借助 Flash 实现复制功能，要求浏览器安装 Flash，且相比 IE 的 document.execCommand(“Copy”) 更具灵活性。

Zero Clipboard 的实现原理

Zero Clipboard 基于 Flash 实现复制，此前方案利用隐藏 Flash，但最新 Flash Player 10 限制仅在 Flash 上操作方可启动剪贴板。Zero Clipboard 改用透明 Flash 漂浮于按钮之上，点击实为点击 Flash，从而调用 Flash 复制功能。

如何使用 Zero Clipboard

首先下载并解压 Zero Clipboard，项目中需包含 ZeroClipboard.js 和 ZeroClipboard.swf 两个文件。 Zero Clipboard : [主页] [下载] [演示] 核心功能 第一步，导入 ZeroClipboard.js 文件： <script type="text/javascript" src="ZeroClipboard.js"></script> 设置 ZeroClipboard.swf 文件路径： ZeroClipboard.setMoviePath( "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 为跨浏览器事件绑定函数，详情见4个跨浏览器必备的函数 。

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 宽度和高度两个参数，返回对应 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&amp;width=150&amp;height=20" wmode="transparent" />

IE 的 Flash JavaScript 通信接口存在 bug，必须将 object 标签插入已存在的 DOM 元素。写入 innerHTML 前需确保该元素已通过 appendChild 方法插入到 DOM 中。

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("复制成功！");
}); 

介绍至此结束，请自行试验。