ZeroClipboard.js复制内容到剪贴板(跨浏览器)

此文章摘抄与百度文库

背景:

在开发中经常会用到复制的功能，在 IE 下通过JavaScript 内置的window.clipboardData.setData 可以简单实现复制到剪贴板功能,但是无法兼容其他浏览器,所以今天介绍一种终极解决方法：使用jhuckaby写的Zero Clipboard的js类库。此方法利用 Flash完成进行复制内容到剪贴板，所以只要浏览器装有Flash 就可以复制内容。

Zero Clipboard的实现原理

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

Zero Clipboard的安装方法

其实也不算安装啦，就是使用前的准备工作。
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。

Zero Clipboard : [项目主页] [zip下载] [在线演示]

然后把在你要使用复制功能的页面中引入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 ); 这样 ZeroClipboard 会自动为我们处理：将类 .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) {
    vartest = document.getElementById("test");
    client.setText( test.value ); // 重新设置要复制的值
});
//复制成功：
clip.addEventListener( "complete", function(){
    alert("复制成功！");
});

 

 

 

 

在说到ZeroClipboard之前，先说说为何会用到ZeroClipboard。有时候需要在触发某JavaScript事 件的同时，将某段文本复制到剪贴板。比如直接通过点击某复制按钮，将textarea中的内容复制到剪贴板，就不用先全选内容，再Ctrl+C了。另外如果在复制的同时，要记录这段文本被复制使用的次数，一般的方法是可以使用js脚本代码，在执行复制之后，执行form submit，提交一次则该文本被使用的次数计数器加1。

若不考虑浏览器的兼容性，只要支持IE浏览器，则可以使用IE 浏览器支持的window.clipboardData对象(js dom对象)的setData方法，如window.clipboardData.setData (“Text”,txt); 不过该window对象实现复制到剪贴板并不支持Firefox浏览器，当然更不支持Google Chrome浏览器。针对兼容火狐Firefox浏览器的js代码，可以用类似下面的这段JavaScript脚本实现复制。

<script type="text/javascript">

function copyCode(id){

var testCode=document.getElementById(id).value;

if(copy2Clipboard(testCode)!=false){

document.form1.submit();           //复制成功后提交表单，记录复制到剪贴板的使用次数

}

}

copy2Clipboard=function(txt){

if(window.clipboardData){         //判断是否是IE浏览器

window.clipboardData.clearData();

window.clipboardData.setData("Text",txt);

}

//else if(navigator.userAgent.indexOf("Opera")!=-1){

//    window.location=txt;

// }

else if(window.netscape){   //Firefox浏览器

try{

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

}

catch(e){

alert("您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试，相对路径为firefox根目录/greprefs/all.js");

return false;

}

var clip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);

if(!clip)return;

var trans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);

if(!trans)return;

trans.addDataFlavor('text/unicode');

var str=new Object();

var len=new Object();

var str=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

var copytext=txt;str.data=copytext;

trans.setTransferData("text/unicode",str,copytext.length*2);

var clipid=Components.interfaces.nsIClipboard;

if(!clip)return false;

clip.setData(trans,null,clipid.kGlobalClipboard);

}

}

</script>

HTML代码:

<form action="copy.php" method="post" id="form1" name="form1" target="updateself">

<input type="button" name="title" οnclick="copyCode('copyid');" value="【点击复制】" width="100px" height="23">

<textarea id="copyid"><?php echo $content; ?></textarea>

上面的JavaScript针对使用最多的两大主流浏览器：IE(IE6，IE7，IE8)和Firefox都可以实现复制到剪贴板功能。但是这段js脚本代码对使用用户群体越来越高的Google Chrome浏览器仍无法兼容。

这时候ZeroClipboard就派上用场了。ZeroClipboard使用一段隐藏的Adobe Flash 视频和JavaScript接口，简单实现复制文本到剪贴板的功能。只要用户的浏览器安装了adobeflash，就可以使用，adobe flash的安装率很高，同时兼容最新的adobe flash player 10。剪贴板复制操作由falsh里的一个用户点击事件触发。最新发布的版本是Zero Clipboard 1.0.7，下载Zero Clipboard。

Zero Clipboard下载完毕之后，在解压的文件夹中复制ZeroClipboard.js 和 ZeroClipboard.swf 到网站目录中，若要启用支持adobe flash 10的Rich Html 属性，则还要将ZeroClipboard10.swf也复制过来。最好将它们放在和使用该js的html代码同一级的目录中，否则需要设置指明 ZeroClipboard.swf 所在的目录路径。Zero Clipboard使用如下实例：

CSS：

<style type="text/css">

#d_clip_button {

width:150px;

text-align:center;

border:1px solid black;

background-color:#ccc;

margin:10px; padding:10px;

}

#d_clip_button.hover{ background-color:#eee; }

#d_clip_button.active{ background-color:#aaa; }

</style>

copy.php：

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

<div id="d_clip_button">【点击复制】</div>

<textarea rows=2 id="copyid"><?php echo $content; ?></textarea>

<script language="JavaScript">

ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard.swf' );  //和copy.php不在同一目录需设置setMoviePath

ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard10.swf' );

var clip = new ZeroClipboard.Client();   //创建新的Zero Clipboard对象

clip.setText( '' ); // will be set later on mouseDown   //清空剪贴板

clip.setHandCursor( true );      //设置鼠标移到复制框时的形状

clip.setCSSEffects( true );          //启用css

clip.addEventListener( 'load', function(client) {

// alert( "movie is loaded" );

} );

clip.addEventListener( 'complete', function(client, text) {     //复制完成后的监听事件

// alert("Copied text to clipboard: " + text );

document.form1.submit();           // 复制到剪贴板成功后提交表单

clip.hide();                                          // 复制一次后，hide()使复制按钮失效，防止重复计算使用次数

} );

clip.addEventListener( 'mouseOver', function(client) {

// alert("mouse over");

} );

clip.addEventListener( 'mouseOut', function(client) {

// alert("mouse out");

} );

clip.addEventListener( 'mouseDown', function(client) {

// set text to copy here

clip.setText( document.getElementById('copyid').value );

// alert("mouse down");

} );

clip.addEventListener( 'mouseUp', function(client) {

// alert("mouse up");

} );

clip.glue( 'd_clip_button' );

</script>

Zero Clipboard 使用实例的说明在上面已经注明，ZeroClipboard使用起来还是比较简单的，使用过程中注意次序，ZeroClipboard.js->HTML代码–>创建 ZeroClipboard对象的JavaScript代码–>…–>clip.glue()，尤其是一个页面上需要创建多个 ZeroClipboard复制到剪贴板对象时。

在IE7.0中，最后的这段JavaScript代码不宜放在表格table，td等标签中。在Firefox浏览器中，拉动滚动条至隐藏Zero Clipboard的复制框后，需双击才能复制成功。在Google Chrome浏览器中，当前的测试完全兼容。为了有利于保护安全性，Internet explorer会限制网页运行可以访问计算机的脚本和ActiveX控件，因此Zero Clipboard在本地磁盘上测试无法使用，必须在网络上测试，如http://localhost…

 

 

 

function copyToClipboard(txt) {

    if (window.clipboardData) {

       window.clipboardData.clearData();

       window.clipboardData.setData("Text", txt);

    } else if (navigator.userAgent.indexOf("Opera") != -1) {

       window.location = txt;

    } else if (window.netscape) {

       try {

           netscape.security.PrivilegeManager

                  .enablePrivilege("UniversalXPConnect");

       } catch (e) {

           alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");

       }

       var clip = Components.classes['@mozilla.org/widget/clipboard;1']

              .createInstance(Components.interfaces.nsIClipboard);

       if (!clip)

           return;

       var trans = Components.classes['@mozilla.org/widget/transferable;1']

              .createInstance(Components.interfaces.nsITransferable);

       if (!trans)

           return;

       trans.addDataFlavor('text/unicode');

       var str = new Object();

       var len = new Object();

       var str = Components.classes["@mozilla.org/supports-string;1"]

              .createInstance(Components.interfaces.nsISupportsString);

       var copytext = txt;

       str.data = copytext;

       trans.setTransferData("text/unicode", str,copytext.length * 2);

       var clipid = Components.interfaces.nsIClipboard;

       if (!clip)

           return false;

       clip.setData(trans, null, clipid.kGlobalClipboard);

    }

    alert("复制成功！");

}