開發中經常會用到複製的功能，在 IE 下實現比較簡單。但要想做到跨瀏覽器比較困難了。本文將介紹一個跨瀏覽器的庫類 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 開源的 JavaScript+flash 複製庫類
演示地址：
http://demo.jb51.net/js/ZeroClipboard/index.html
核心功能
第一步，導入 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 是一個跨瀏覽器的事件綁定函數。
=========================================================
這個想必大家都已知道。IE 的事件綁定函數是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 則兩種都支持。下面進行封裝。
/************************************
* 添加事件綁定
* @param obj : 要綁定事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件處理函數
************************************/
function bind( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
例如添加一個頁面點擊事件：
bind(document, "click", function() {
alert("Hello, World!!");
});
=========================================================
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("複製成功！");
});
好了，就介紹到這裏吧。趕快自己試驗下吧。
