JavaScript實(shí)現(xiàn)復(fù)制功能各瀏覽器支持情況實(shí)測(cè)

2019-11-20 22:30:40

字體：大中小

供稿：網(wǎng)友

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

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

 
function copy(txtid){ 
var txtObj = document.getElementById(txtid); 
if(window.clipboardData){ // 僅IE支持此對(duì)象，firefox、chrome不支持 
//1、通過clipboardData對(duì)象實(shí)現(xiàn)復(fù)制 
//window.clipboardData.clearData(); 
//window.clipboardData.setData("Text",txtObj.value); 

//2、通過document對(duì)象實(shí)現(xiàn)復(fù)制:先選擇中文本，再執(zhí)行復(fù)制命令 
//txtObj.select(); 
//document.execCommand("Copy"); // 僅IE支持，F(xiàn)irefox報(bào)語法錯(cuò)誤，chrome執(zhí)行結(jié)果返回false(不支持) 

//3、通過TextRange對(duì)象實(shí)現(xiàn)現(xiàn)復(fù)制：可以不用先選中內(nèi)容 
txtObj.createTextRange().execCommand("Copy"); 
} 
} 

2、Firefox，通過接口的方法實(shí)現(xiàn)，火狐是出于安全原因，在17之后版本關(guān)閉此接口，17及之前版本可用。代碼如下:

復(fù)制代碼代碼如下:

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

3、Chrome出于安全，未向用戶提供對(duì)剪貼板的操作。由此可見，各瀏覽器對(duì)復(fù)制功能的支持并不統(tǒng)一。
Zero Clipboard庫
jhuckaby寫的Zero Clipboard的js類庫，利用Flash完成復(fù)制內(nèi)容到剪貼板。只要瀏覽器裝有Flash插件就可以復(fù)制內(nèi)容，通過ActionScript屏蔽了JavaScript的不足，解決瀏覽器間復(fù)制兼容性問題。
Zero Clipboard的實(shí)現(xiàn)原理：Zero Clipboard首先生成Flash對(duì)象標(biāo)簽，讓透明的Flash漂浮在復(fù)制按鈕之上，其實(shí)點(diǎn)擊的不是按鈕而是Flash，這樣將需要的內(nèi)容傳入Flash，再通過Flash的復(fù)制到系統(tǒng)剪貼板。
Zero Clipboard的使用方法
注意：由于是基于Flash實(shí)現(xiàn)，F(xiàn)lash出于安全，需要在Web容器（例如Apache、Tomcat）中才能運(yùn)行，直接打開Flash將不會(huì)被加載，按鈕類似假死現(xiàn)象，網(wǎng)上說右鍵Flash設(shè)置將ZeroClipboard.swf添加到受信任位置，感覺應(yīng)該是行的，我試了，仍然不行，也可能是我本地瀏覽器的問題。
1>下載Zero Clipboard的壓縮包，解壓后把文件夾中兩個(gè)文件：ZeroClipboard.js和ZeroClipboard.swf放入到你的項(xiàng)目中;
2>引入Zero Clipboard.js文件，如下代碼：<script type="text/javascript" src="ZeroClipboard.js"></script>;
注意：ZeroClipboard.js與ZeroClipboard.swf需要放在同一路徑下，如果不在同一路徑，可使用ZeroClipboard.setMoviePath()來設(shè)置。
3>簡(jiǎn)單復(fù)制代碼如下：

復(fù)制代碼代碼如下:

 
var clip = new ZeroClipboard.Client(); // 新建一個(gè)clip對(duì)象 
clip.setHandCursor( true ); // 設(shè)置鼠標(biāo)為手型 
clip.setText("hello,world"); // 設(shè)置要復(fù)制的文本，可以為文本框的值 
clip.glue("copy-botton"); // 為clip注冊(cè)一個(gè)按鈕，參數(shù)為按鈕元素的id，點(diǎn)擊按鈕就可以實(shí)現(xiàn)復(fù)制 

4>Zero Clipboard常用方法，建議直接查看源碼：
reposition()：防止當(dāng)頁面大小發(fā)生變化時(shí)，F(xiàn)lash按鈕可能會(huì)錯(cuò)位問題
hide() ：隱藏Flash按鈕
show() ：顯示Flash按鈕
setCSSEffects()：解決Flash遮擋按鈕樣式失效問題(將:hover修改為.hover)。
5>Zero Clipboard 常用事件，事件處理函數(shù)為addEventListener()：
load ：Flash按鈕加載完事件
mouseOver：鼠標(biāo)移上事件
mouseOut：鼠標(biāo)移出事件
mouseDown：鼠標(biāo)按下事件
mouseUp：鼠標(biāo)松開事件
complete：復(fù)制成功事件

jquery.zclip庫
由于ZeroClipboard是基于原生JavaScript實(shí)現(xiàn)，jquery.zclip使用jQuery對(duì)Zero Clipboard進(jìn)行封裝，如果項(xiàng)目中已經(jīng)使用jQuery，建議使用它，jquery.zclip體積較小。
jquery.zclip下載地址：http://www.steamdev.com/zclip/
Zero Clipboard下載地址：https://github.com/zeroclipboard/ZeroClipboard/releases
示例下載：
為了方便測(cè)試，我將jquery.zclip和Zero Clipboard寫好的例子上傳到csdn，示例必須在web容器里運(yùn)行。
demo下載地址

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

下一篇：GRID拖拽行的實(shí)例代碼