JavaScript實現復制功能各瀏覽器支持情況實測

2019-11-20 22:30:40

字體：大中小

來源：轉載

供稿：網友

這兩天在做Web前端時，遇到需求通過js實現文本復制的功能。
先不考慮瀏覽器的兼容性，看看各瀏覽器對復制功能的支持情況：

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

 
function copy(txtid){ 
var txtObj = document.getElementById(txtid); 
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.classes['@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文件，如下代碼：<script type="text/javascript" src="ZeroClipboard.js"></script>;
注意：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下載地址

上一篇：利用div+jquery自定義滾動條樣式的2種方法

下一篇：GRID拖拽行的實例代碼