本文详细介绍如何利用 Zero Clipboard 库实现跨浏览器的文本复制功能。该方案通过透明 Flash 覆盖按钮解决 Flash Player 10 的安全限制，支持动态内容、事件监听及样式处理，适用于需要兼容多浏览器的 Web 开发场景。
Zero Clipboard 简介与原理
在 Web 开发中，文本复制是一项常见需求。虽然 Internet Explorer 提供了较为简单的实现方式，但要实现跨浏览器的兼容则相对复杂。Zero Clipboard 是一个开源的 JavaScript 库，它通过调用 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
核心功能
第一步，需要在 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() 方法用于解决此问题。首先需要将 CSS 伪类改为类选择器，例如：
代码如下:
#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("复制成功！");
});
好了，就介绍到这里吧。赶快自己试验下吧。