坑人的js+flash兼容所有浏览器的剪贴板操作方案


话说现在浏览器种类也越来越多，例如 IE浏览器、Firefox火狐浏览器、Chrome谷歌浏览器、Safari等等，因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了，只有使用比较坑人的js+flash方法了：
原理介绍：JavaScript库：Zero Clipboard，利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash（对用户来说是不可见的）上覆盖一个dom元素比如button或div，当点击这个dom时，实际点击的是flash，从而访问flash的剪贴板
ZeroClipboard使用一段隐藏的Adobe Flash 视频和JavaScript接口，简单实现复制文本到剪贴板的功能。只要用户的浏览器安装了adobe flash，就可以使用，adobe flash的安装率很高，同时兼容最新的adobe flash player 10。剪贴板复制操作由falsh里的一个用户点击事件触发。最新发布的版本是Zero Clipboard 1.0.7，下载Zero Clipboard。http://code.google.com/p/zeroclipboard/
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 使用实例的说明在上面已经注明，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://www.zhaoxi.net…
 
分享一个老版本的js操作剪切板的代码：
<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.inte易做图ces.nsIClipboard);
if(!clip)return;
var trans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.inte易做图ces.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.inte易做图ces.nsISupportsString);
var copytext=txt;str.data=copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid=Components.inte易做图ces.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" onclick="copyCode('copyid');" value="【点击复制】" width="100px" height="23">
<textarea id="copyid">朝夕网提供免费banner制作</textarea>