JavaScript實作複製功能各瀏覽器支援狀況實測_javascript技巧

這兩天在做Web前端時，遇到需求透過js實現文字複製的功能。
先不考慮瀏覽器的相容性，看看各瀏覽器對複製功能的支援：

1、IE瀏覽器，解決方法有三種，程式碼如下：

複製程式碼 程式碼如下:

function copy(txtid){
var ;
if(window.clipboardData){ // 僅IE支援此對象，firefox、chrome不支援
//1、透過clipboardData物件實現複製
//window.clipboardData.clearData();
//window.clipboardData.setData("Text",txtObj.value);

//2、透過document物件實現複製:先選擇中文本，再執行複製指令
//txtObj .select();
//document.execCommand("Copy"); // 僅IE支持，Firefox報語法錯誤，chrome執行結果回傳false(不支援)

//3、透過TextRange物件實作現複製：可以不用先選取內容
txtObj.createTextRange().execCommand("Copy");
}
}

2、Firefox，透過介面的方法實現，火狐是出於安全原因，在17之後版本關閉此接口，17及之前版本可用。程式碼如下:

複製程式碼 程式碼如下:

var clip = Components. mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);

3、Chrome出於安全，未提供使用者對剪貼簿的操作。由此可見，各瀏覽器對複製功能的支援並不統一。
Zero Clipboard庫
jhuckaby寫的Zero Clipboard的js類別庫，利用Flash完成複製內容到剪貼簿。只要瀏覽器裝有Flash插件就可以複製內容，透過ActionScript封鎖了JavaScript的不足，解決瀏覽器間複製相容性問題。
Zero Clipboard的實作原理：Zero Clipboard先產生Flash物件標籤，讓透明的Flash漂浮在複製按鈕之上，其實點擊的不是按鈕而是Flash，這樣將所需的內容傳入Flash，再透過Flash的複製到系統剪貼簿。
Zero Clipboard的使用方法
注意：由於是基於Flash實現，Flash出於安全，需要在Web容器（例如Apache、Tomcat）中才能運行，直接打開Flash將不會被加載，按鈕類似假死現象，網路上說右鍵Flash設定將ZeroClipboard.swf加入到受信任位置，感覺應該是行的，我試了，還是不行，也可能是我本機瀏覽器的問題。
1>下載Zero Clipboard的壓縮包，解壓縮後把資料夾中兩個文件：ZeroClipboard.js和ZeroClipboard.swf放入到你的專案中;
2>引入Zero Clipboard.js文件，如下程式碼：;
注意：ZeroClipboard.js與ZeroClipboard.swf需要放在同一路徑下，如果不在同一條路徑，可使用ZeroClipboard.setMoviePath()來設定。
3>簡單複制代碼如下：

複製代碼 代碼如下:

var clip = new ZeroClipboard.Client(); // 新建一個clip物件
clip.setHandCursor( true ); // 設定滑鼠為手型
clip.setText("hello,world"); // 設定要複製的文本，可以為文本框的值
clip.glue("copy-botton"); // 為clip註冊一個按鈕，參數為按鈕元素的id，點擊按鈕就可以實現複製

4>Zero Clipboard常用方法，建議直接查看原始碼：
reposition()：防止當頁面大小改變時，Flash按鈕可能會錯位問題
hide() ：隱藏Flash按鈕
show () ：顯示Flash按鈕
setCSSEffects()：解決Flash遮擋按鈕樣式失效問題(將:hover修改為.hover)。
5>Zero Clipboard 常用事件，事件處理函數為addEventListener()：
load ：Flash按鈕載入完事件
mouseOver：滑鼠移上事件
mouseOut：滑鼠移出事件
mouseDown：滑鼠按下事件
mouseUp：滑鼠鬆開事件
complete：複製成功事件

jquery.zclip庫
由於ZeroClipboard是基於原生JavaScript實現，jquery.zclip使用jQuery對Zero Clipboard進行封裝，如果專案中已經使用jQuery，建議使用它，jquery.zclip體積較小。
jquery.zclip下載網址：http://www.steamdev.com/zclip/
Zero Clipboard下載網址：https://github.com/zeroclipboard/ZeroClipboard/releases
範例下載：
範例下載：
範例下載>為了方便測試，我將jquery.zclip和Zero Clipboard寫好的範例上傳到csdn，範例必須在web容器裡執行。 demo下載位址