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

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

方案一：利用“window.clipboardData”

代码示例：

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

问题：这个方案只对IE浏览器适用。

方案二：利用“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。

把这个方案和方案一结合，可以解决IE和Firefox浏览器的相对兼容。

方案三：利用隐藏的flash

代码示例：

var clipboardswfdata;
 
var setcopy_gettext = function(){
    clipboardswfdata = document.getElementById('data').value;
    window.document.clipboardswf.SetVariable('str', clipboardswfdata);
}
 
var floatwin = function(){
    alert('copy success, ' + clipboardswfdata);
}
<input name="data" value="xxxxx11111" id="data" type="text">
<div id="clipboard_content">
<span class="clipinner" id="clipinner">点此复制到剪贴板
<embed name="clipboardswf" class="clipboardswf" id="clipboardswf" onmouseover="setcopy_gettext()" devicefont="false" src="./clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" type="application/x-shockwave-flash" height="20" width="100"></span>
</div>
<style type="text/css">
body {font-size:12px;}
.clipinner {position:relative;}
.clipboardswf {position:absolute; left:0; top:0;}
</style>

利用一个clipboard.swf作为桥梁，复制内容到剪贴板。原理是：创建一个隐藏的flash文件，通过onmouseover 事件往 flash 中传递数据。

演示地址: http://www.lsproc.com/demo/clipboard/demo.html

这个方法兼容IE、Firefox、Opera、Chrome、 Safari和Flash10，真可谓万能的解决方案。浏览器Flash的安装率非常高，这几乎是一个完美的解决方案。