開發(fā)中經(jīng)常會用到復(fù)制的功能，在 IE 下實(shí)現(xiàn)比較簡單。但要想做到跨瀏覽器比較困難了。本文將介紹一個跨瀏覽器的庫類 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 解決方案，其利用的是一個隱藏的 Flash。但最新的 Flash Player 10 只允許在 Flash 上進(jìn)行操作才能啟動剪貼板。所以 Zero Clipboard 對此進(jìn)行了改進(jìn)，用了一個透明的 Flash ，讓其漂浮在按鈕之上，這樣其實(shí)點(diǎn)擊的不是按鈕而是 Flash ，也就可以使用 Flash 的復(fù)制功能了。

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

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

演示地址：
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 兩個文件的路徑都需要替換為你項(xiàng)目中對應(yīng)文件的路徑。或者也可以是一個絕對路徑。

然后就使用了：

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

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

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

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

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

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

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

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

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

var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 進(jìn)行輸出。
以下是我測試下輸出的 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 通信接口上有一個 bug 。你必須插入一個 object 標(biāo)簽到一個已存在的 DOM 元素中。并且在寫入 innerHTML 之前請確保該元素已經(jīng) appendChild 方法插入到 DOM 中。

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

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

其他事件還包括：

mouseOver 鼠標(biāo)移上事件
mouseOut 鼠標(biāo)移出事件
mouseDown 鼠標(biāo)按下事件
mouseUp 鼠標(biāo)松開事件
complete 復(fù)制成功事件
其中 mouseOver 事件和 complete 事件比較常用。
前面說過，如果需要動態(tài)改變待復(fù)制的內(nèi)容，那 mouseOver 事件就可以派上用場了。例如需要動態(tài)復(fù)制一個 id 為 test 的輸入框中的值，我們可以在鼠標(biāo) over 的時候重新設(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)下吧。

最新評論