開發(fā)中經(jīng)常會(huì)用到復(fù)制的功能，在 IE 下實(shí)現(xiàn)比較簡(jiǎn)單。但要想做到跨瀏覽器比較困難了。本文將介紹一個(gè)跨瀏覽器的庫(kù)類 Zero Clipboard 。它利用 Flash 進(jìn)行復(fù)制，所以只要瀏覽器裝有 Flash 就可以運(yùn)行，而且比 IE 的 document.execCommand("Copy") 更加靈活。

Zero Clipboard 的實(shí)現(xiàn)原理
Zero Clipboard 利用 Flash 進(jìn)行復(fù)制，之前有 Clipboard Copy 解決方案，其利用的是一個(gè)隱藏的 Flash。但最新的 Flash Player 10 只允許在 Flash 上進(jìn)行操作才能啟動(dòng)剪貼板。所以 Zero Clipboard 對(duì)此進(jìn)行了改進(jìn)，用了一個(gè)透明的 Flash ，讓其漂浮在按鈕之上，這樣其實(shí)點(diǎn)擊的不是按鈕而是 Flash ，也就可以使用 Flash 的復(fù)制功能了。

如何使用 Zero Clipboard
首先下載 Zero Clipboard ，并解壓縮。其中需要兩個(gè)文件：ZeroClipboard.js 和 ZeroClipboard.swf ，將這兩個(gè)文件放入到你的項(xiàng)目中。

下載地址
Zero Clipboard 開源的 JavaScript+flash 復(fù)制庫(kù)類

演示地址：
http://demo.jb51.net/js/ZeroClipboard/index.html

核心功能
第一步，導(dǎo)入 ZeroClipboard.js 文件：

<script type="text/javascript" src="ZeroClipboard.js"></script>
再設(shè)置 ZeroClipboard.swf 文件的路徑：

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注意：以上 ZeroClipboard.js, ZeroClipboard.swf 兩個(gè)文件的路徑都需要替換為你項(xiàng)目中對(duì)應(yīng)文件的路徑?；蛘咭部梢允且粋€(gè)絕對(duì)路徑。

然后就使用了：

這樣，這樣基本功能實(shí)現(xiàn)了，點(diǎn)擊按鈕就可以復(fù)制設(shè)置好的文本了。你可能注意到了，待復(fù)制的文本是固定的，如果想要?jiǎng)討B(tài)改變的怎么辦，比如復(fù)制一個(gè)輸入框中的內(nèi)容。不用擔(dān)心，下面會(huì)講到的。

其他函數(shù)
Zero Clipboard 還提供了一些其他的函數(shù)，其中有一些非常有用。

reposition() 方法
因?yàn)榘粹o上漂浮有一個(gè) Flash 按鈕，所以當(dāng)頁(yè)面大小發(fā)生變化時(shí)，F(xiàn)lash 按鈕可能會(huì)錯(cuò)位，這樣就點(diǎn)不著了。 不要緊，Zero Clipboard 提供了一個(gè) reposition() 方法，可以重新計(jì)算 Flash 按鈕的位置。我們可以將它綁定到 resize 事件上。

bind 是一個(gè)跨瀏覽器的事件綁定函數(shù)。
=========================================================
這個(gè)想必大家都已知道。IE 的事件綁定函數(shù)是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 則兩種都支持。下面進(jìn)行封裝。

例如添加一個(gè)頁(yè)面點(diǎn)擊事件：

=========================================================
hide() 和 show() 方法
這兩個(gè)方法可以隱藏和顯示 Flash 按鈕 。其中 show() 方法會(huì)調(diào)用 reposition() 方法。

setCSSEffects() 方法
當(dāng)鼠標(biāo)移到按鈕上或點(diǎn)擊時(shí)，由于有 Flash 按鈕的遮擋，所以像 css ":hover", ":active" 等偽類可能會(huì)失效。setCSSEffects() 方法就是解決這個(gè)問(wèn)題。首先我們需要將偽類改成類，比如：

我們可以調(diào)用 clip.setCSSEffects( true ); 這樣 Zero Clipboard 會(huì)自動(dòng)為我們處理：將類 .hover 當(dāng)成偽類 :hover 。

getHTML() 方法
如果你想自己實(shí)例一個(gè) Flash ，不用 Zero Clipboard 的附著方法，那么這個(gè)方法就可以幫上忙了。它接受兩個(gè)參數(shù)，分別為 Flash 的寬度和高度。返回的是 Flash 對(duì)應(yīng)的 HTML 代碼。例如：

var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 進(jìn)行輸出。
以下是我測(cè)試下輸出的 HTML 代碼：

<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" />
IE 的 Flash JavaScript 通信接口上有一個(gè) bug 。你必須插入一個(gè) object 標(biāo)簽到一個(gè)已存在的 DOM 元素中。并且在寫入 innerHTML 之前請(qǐng)確保該元素已經(jīng) appendChild 方法插入到 DOM 中。

Zero Clipboard 事件處理
Zero Clipboard 提供了一些事件，你可以自定義函數(shù)處理這些事件。Zero Clipboard 事件處理函數(shù)為 addEventListener(); 例如當(dāng) Flash 完全載入后會(huì)觸發(fā)一個(gè)事件 "load" 。

clip.addEventListener( "load", function(client) {
alert("Flash 加載完畢！");
});
Zero Clipboard 會(huì)將 clip 對(duì)象作為參數(shù)傳入。即上例中的 "client" 。
還有 "load" 也可以寫成 "onLoad"，其他的事件也可以這樣。

其他事件還包括：

mouseOver 鼠標(biāo)移上事件
mouseOut 鼠標(biāo)移出事件
mouseDown 鼠標(biāo)按下事件
mouseUp 鼠標(biāo)松開事件
complete 復(fù)制成功事件
其中 mouseOver 事件和 complete 事件比較常用。
前面說(shuō)過(guò)，如果需要?jiǎng)討B(tài)改變待復(fù)制的內(nèi)容，那 mouseOver 事件就可以派上用場(chǎng)了。例如需要?jiǎng)討B(tài)復(fù)制一個(gè) id 為 test 的輸入框中的值，我們可以在鼠標(biāo) over 的時(shí)候重新設(shè)置值。

clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 重新設(shè)置要復(fù)制的值
});
復(fù)制成功：

clip.addEventListener( "complete", function(){
alert("復(fù)制成功！");
});
好了，就介紹到這里吧。趕快自己試驗(yàn)下吧。

最新評(píng)論