www.hj8828.comZeroClipboard支持IE,firefox,Chrome复制到剪贴板(转)

ZeroClipboard.js是一个支持复制和粘贴的JavaScript插件,目前官方已经到2.x的版本了,但不支持IE9以下的浏览器,而如果要兼容,则可以使用1.x的版本,我使用的是最开始的一个版本:1.0.7的。该版本支持IE7和IE8,今天主要介绍如何使用一个flash支持多个复制文本。

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

 " /> 复制

var clip = null;//ZeroClipboard.Client对象 var current_id = null;//当前所在的文本元素id //指定ZeroClipboard.swf位置ZeroClipboard.setMoviePath(location.protocol+"//club.pcauto.com.cn/js/ZeroClipboard.swf"); clip = new ZeroClipboard.Client();//创建ZeroClipboard.Client对象 clip.setHandCursor;//鼠标移动到元素上之后显示手型 clip.glue('J_copy_btn1','J_pop_share');clip.setText.val;//添加复制成功之后的操作 clip.addEventListener('complete', function;

方法一(兼容ie和firefox):

如果有多个的话,是不是需要新建四个flash对象呢?可能没尝试过的人会这么做,这篇文章分享另外一种做法,就是在上面这个flash的基础上,当移动到另外一个按钮时,改变flash的位置和复制的文本。

 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>

多个文本的HTML代码:

上面的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。

javascript代码:在上面js的基础上,加上下面这个代码

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