兼容多種瀏覽器“複製到剪貼板”的解決方案

 昨天在也一個php程序的時候,要實現“複製到剪貼板”的功能,由於安全問題,瀏覽器的限制越來越嚴,實現的方法也越來越有限,這個簡單的功能要想實現兼容不同的瀏覽器還真不容易,根據網上的一些資料結合我測試的經驗,相關解決方案如下:

方案一:利用“window.clipboardData”

代碼示例:

 

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

};

評論:這個方案只適合IE瀏覽器,同時在IE7下有個如下安全提示的對話框。

image

由於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

image

這個方法雖然可以在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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章