JavaScript flash複製庫類 Zero Clipboard

文章目錄

• Zero Clipboard 的實現原理
• 如何使用 Zero Clipboard

本文將介紹一個跨瀏覽器的庫類 Zero Clipboard 。它利用 Flash 進行複製，所以只要瀏覽器裝有 Flash 就可以運行，而且比 IE 的 document.execCommand(“Copy”) 更加靈活。

Zero Clipboard 的實現原理

Zero Clipboard 利用 Flash 進行複製，之前有 Clipboard Copy 解決方案，其利用的是一個隱藏的 Flash。但最新的 Flash Player 10 只允許在 Flash 上進行操作才能啟動剪貼簿。所以 Zero Clipboard 對此進行了改進，用了一個透明的 Flash ，讓其漂浮在按鈕之上，這樣其實點擊的不是按鈕而是 Flash ，也就可以使用 Flash 的複製功能了。

如何使用 Zero Clipboard

首先下載 Zero Clipboard ，並解壓縮。其中需要兩個檔案：ZeroClipboard.js 和 ZeroClipboard.swf ，將這兩個檔案放入到你的項目中。
Zero Clipboard : [首頁] [下載] [示範]
核心功能
第一步，匯入 ZeroClipboard.js 檔案：

<script type="text/javascript" src="ZeroClipboard.js"></script>
再設定 ZeroClipboard.swf 檔案的路徑：

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注意：以上 ZeroClipboard.js, ZeroClipboard.swf 兩個檔案的路徑都需要替換為你項目中對應檔案的路徑。或者也可以是一個絕對路徑。
然後就使用了：

複製代碼 代碼如下:var clip = new ZeroClipboard.Client(); // 建立一個對象
clip.setHandCursor( true ); // 設定滑鼠為手型
clip.setText("哈哈"); // 設定要複製的文本。
// 註冊一個 button，參數為 id。點擊這個 button 就會複製。
// 這個 button 不一定要求是一個 input 按鈕，也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可調換

這樣，這樣準系統實現了，點擊按鈕就可以複製設定好的文本了。你可能注意到了，待覆制的文本是固定的，如果想要動態改變的怎麼辦，比如複製一個輸入框中的內容。不用擔心，下面會講到的。

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

reposition() 方法
因為按鈕上漂浮有一個 Flash 按鈕，所以當頁面大小發生變化時，Flash 按鈕可能會錯位，這樣就點不著了。 不要緊，Zero Clipboard 提供了一個 reposition() 方法，可以重新計算 Flash 按鈕的位置。我們可以將它綁定到 resize 事件上。 複製代碼 代碼如下:bind(window, "resize", function(){
clip.reposition();
});

bind 是一個跨瀏覽器的事件綁定函數。詳情請見4個跨瀏覽器必備的函數 。
hide() 和 show() 方法
這兩個方法可以隱藏和顯示 Flash 按鈕 。其中 show() 方法會調用 reposition() 方法。

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

#copy-botton:hover{
border-color:#FF6633;
}
/* 可以改成下面的 ":hover" 改成 ".hover" */
#copy-botton.hover{
border-color:#FF6633;
}
我們可以調用 clip.setCSSEffects( true ); 這樣 Zero Clipboard 會自動為我們處理：將類 .hover 當成偽類 :hover 。

getHTML() 方法
如果你想自己執行個體一個 Flash ，不用 Zero Clipboard 的附著方法，那麼這個方法就可以幫上忙了。它接受兩個參數，分別為 Flash 的寬度和高度。返回的是 Flash 對應的 HTML 程式碼。例如：

var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 進行輸出。
以下是我測試下輸出的 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 標籤到一個已存在的 DOM 元素中。並且在寫入 innerHTML 之前請確保該元素已經 appendChild 方法插入到 DOM 中。
Zero Clipboard 事件處理
Zero Clipboard 提供了一些事件，你可以自訂函數處理這些事件。Zero Clipboard 事件處理函數為 addEventListener(); 例如當 Flash 完全載入後會觸發一個事件 “load” 。 複製代碼 代碼如下:clip.addEventListener( "load", function(client) {
alert("Flash 載入完畢！");
});

Zero Clipboard 會將 clip 對象作為參數傳入。即上例中的 “client” 。
還有 “load” 也可以寫成 “onLoad”，其他的事件也可以這樣。
其他事件還包括：

mouseOver 滑鼠移上事件
mouseOut 滑鼠移出事件
mouseDown 滑鼠按下事件
mouseUp 滑鼠鬆開事件
complete 複製成功事件
其中 mouseOver 事件和 complete 事件比較常用。
前面說過，如果需要動態改變待覆制的內容，那 mouseOver 事件就可以派上用場了。例如需要動態複製一個 id 為 test 的輸入框中的值，我們可以在滑鼠 over 的時候重新設定值。 複製代碼 代碼如下:clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 重新設定要複製的值
});

複製成功： 複製代碼 代碼如下:clip.addEventListener( "complete", function(){
alert("複製成功！");
});

好了，就介紹到這裡吧。趕快自己實驗下吧。