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

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

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

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

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

jquery.zclip庫(kù)
由于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下載地址

最新評(píng)論