ZeroClipboard支持IE,firefox,Chrome复制到剪贴板(转)

在说到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脚本实现复制。

方法一（兼容ie和firefox）：

 1 <script type="text/javascript">
 2 function copyCode(id){
 3 var testCode=document.getElementById(id).value;
 4 if(copy2Clipboard(testCode)!=false){
 5 document.form1.submit();           //复制成功后提交表单，记录复制到剪贴板的使用次数
 6 }
 7 }
 8 copy2Clipboard=function(txt){
 9 if(window.clipboardData){         //判断是否是IE浏览器
10 window.clipboardData.clearData();
11 window.clipboardData.setData("Text",txt);
12 }
13 //else if(navigator.userAgent.indexOf("Opera")!=-1){
14 //    window.location=txt;
15 // }
16 else if(window.netscape){   //Firefox浏览器
17 try{
18 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
19 }
20 catch(e){
21 alert("您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试，相对路径为firefox根目录/greprefs/all.js");
22 return false;
23 }
24 var clip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
25 if(!clip)return;
26 var trans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
27 if(!trans)return;
28 trans.addDataFlavor('text/unicode');
29 var str=new Object();
30 var len=new Object();
31 var str=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
32 var copytext=txt;str.data=copytext;
33 trans.setTransferData("text/unicode",str,copytext.length*2);
34 var clipid=Components.interfaces.nsIClipboard;
35 if(!clip)return false;
36 clip.setData(trans,null,clipid.kGlobalClipboard);
37 }
38 }
39 </script>
40 
41 HTML代码:
42 
43 <input type="button" name="title" onclick="copyCode('copyid');return false;" value="【点击复制】" width="100px" height="23">
44 
45 <textarea id="copyid"><?php echo $content; ?></textarea>

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

这时候ZeroClipboard就派上用场了。ZeroClipboard使用一段隐藏的Adobe Flash 视频和JavaScript接口，简单实现复制文本到剪贴板的功能。只要用户的浏览器安装了adobe flash，就可以使用，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使用如下实例：

 1 CSS：
 2 
 3 <style type="text/css">
 4 #d_clip_button {
 5 width:150px;
 6 text-align:center;
 7 border:1px solid black;
 8 background-color:#ccc;
 9 margin:10px; padding:10px;
10 }
11 #d_clip_button.hover{ background-color:#eee; }
12 #d_clip_button.active{ background-color:#aaa; }
13 </style>
14 
15 html：
16 
17 <script type="text/javascript" src="/js/zero/ZeroClipboard.js"></script>
18 
19 <div id="d_clip_button">【点击复制】</div>
20 
21 <textarea rows=2 id="copyid"><?php echo $content; ?></textarea>
22 
23 <script language="JavaScript">
24 ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard.swf' );  //和copy.php不在同一目录需设置setMoviePath
25 ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard10.swf' );
26 var clip = new ZeroClipboard.Client();   //创建新的Zero Clipboard对象
27 clip.setText( '' ); // will be set later on mouseDown   //清空剪贴板
28 clip.setHandCursor( true );      //设置鼠标移到复制框时的形状
29 clip.setCSSEffects( true );          //启用css
30 clip.addEventListener( 'load', function(client) {
31 // alert( "movie is loaded" );
32 } );
33 clip.addEventListener( 'complete', function(client, text) {     //复制完成后的监听事件
34 
35 // alert("Copied text to clipboard: " + text );
36 
37 document.form1.submit();           // 复制到剪贴板成功后提交表单
38 clip.hide();                                          // 复制一次后，hide()使复制按钮失效，防止重复计算使用次数
39 } );
40 clip.addEventListener( 'mouseOver', function(client) {
41 // alert("mouse over");
42 } );
43 clip.addEventListener( 'mouseOut', function(client) {
44 // alert("mouse out");
45 } );
46 clip.addEventListener( 'mouseDown', function(client) {
47 // set text to copy here
48 clip.setText( document.getElementById('copyid').value );
49 // alert("mouse down");
50 } );
51 clip.addEventListener( 'mouseUp', function(client) {
52 // alert("mouse up");
53 } );
54 clip.glue( 'd_clip_button' );
55 </script>

Zero Clipboard 使用实例的说明在上面已经注明，Zero Clipboard使用起来还是比较简单的，使用过程中注意次序，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…

http://code.google.com/p/zeroclipboard/

http://zeroclipboard.googlecode.com/files/zeroclipboard-1.0.7.tar.gz

转自：http://farlee.info/archives/zeroclipboard-ie7-8-firefox-chrome-copy-text.html