兼容多种浏览器“复制到剪贴板”的解决方案

昨天在也一个php程序的时候，要实现“复制到剪贴板”的功能，由于安全问题，浏览器的限制越来越严，实现的方法也越来越有限，这个简单的功能要想实现兼容不同的浏览器还真不容易，根据网上的一些资料结合我测试的经验，相关解决方案如下：

方案一：利用“window.clipboardData”

代码示例：

if (window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData( "Text", txt)

};

评论：这个方案只适合IE浏览器，同时在IE7下有个如下安全提示的对话框。

由于IE的浏览器的占有率比较大，这个方案是使用最广的，也是最简单的方法。

支持浏览器：IE5.5 IE6.0 IE7.0

方案二：利用“Components.interfaces.nsIClipboard”

代码示例：

if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege( "UniversalXPConnect");
} catch (e) {
if (flag == 0) {
alert( "You are using the Firefox browser, copy the function browser refuse！
\nPlease in the browser address bar enter'about:config' and Enter \n and set'signed.applets.codebase_principal_support' to 'true'");

} else {
alert("你使用的是Firefox 浏览器,复制功能被浏览器拒绝！\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);

}

评论：这个方案只适合Firefox,同时也有安全的问题，如果想使用这个方法，必须手动开启Firefox的一个配置：signed.applets.codebase_principal_support。方法是：在地址栏输输入“about:config”,设置“signed.applets.codebase_principal_support”为true，默认该项是false。

这个方法虽然可以在Firefox使用，但让一个普通用户去开启这个配置似乎太专业了。

把这个方案和方案一结合，可以适用80%以上的用户。

支持浏览器：Firefox1.5  firefox2.0  firefox3.0

方案三：javascript + flash

代码示例：

var flashcopier = 'flashcopier';
if (!document.getElementById(flashcopier)) {
var divholder = document.createElement( 'div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<embed src="clipboard.swf" FlashVars="clipboard=' + text2copy + '"
width="0" height="0" type="application/x-shockwave-flash"></embed>';

document.getElementById(flashcopier).innerHTML = divinfo;}

评论：这个方案是一个最流行的方法，著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁，复制内容到剪贴板。原理是：创建一个隐藏的flash文件，同时给给flash的变量FlashVars 赋值“clipboard=..”，通过这个赋值flash就会把复制的内容放到剪贴板。这个方法兼容IE、Firefox、Opera、chrome、 Safari，真可谓“万能”的解决方案。浏览器Flash的安装率非常高，这几乎是一个完美的解决方案。

clipboard.swf 的下载地址：http://watch-life.googlecode.com/files/clipboard.swf。

但是，世界上有完美的事么？这个方法只支持flash 9 ，不支持最新的flash 10。因为flash10中规定了只有在swf上进行了真实的操作（比如鼠标点击）才能访问剪切板，而上述方法只是使用了一个隐藏的swf文件，通过javascript操作flash的剪贴板，用户并没有对swf文件进行真实的操作，因此这个方法也就失效了。

那么如何解决这个“真实操作”的问题呢？可以使用一个JavaScript库：Zero Clipboard，利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash（对用户来说是不可见的）上覆盖一个dom元素比如button或div，当点击这个dom时，实际点击的是flash，从而访问flash的剪贴板。真够曲折的。:-)

具体的实现详见如下链接：

DEMO页面 :  http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

Zero Clipboard项目主页： http://code.google.com/p/zeroclipboard/

支持浏览器：Firefox1.5  firefox2.0  firefox3.0 IE5.5 IE6.0 IE 7.0 opera 8 opera 9 chorme 1.0 chorme 2.0 safari 3

 

更多文章见：守望轩[http://www.watch-life.net/]