使用ZeroClipboard解決跨瀏覽器複製到剪貼板的問題

原文連接：http://js8.in/407.html

導言

以前在開發普加09年國慶中秋祝福頁面複製連接功能時，碰見在Firefox，Chrome，Opera，Safari能複製連接的兼容性問題，而在近期上線的普加地圖產品中使用的是Flash的flashvars來傳入參數來解決了這個問題。其實開發中常常會用到複製的功能，在 IE 下經過JavaScript的window.clipboardData.setData能夠簡單實現複製到剪貼板功能。最後終於找到了終極解決方式：使用jhuckaby寫的Zero Clipboard的js類庫。此方法利用 Flash完成進行復制內容到剪貼板，因此只要瀏覽器裝有Flash 就能夠複製內容。

Zero Clipboard的實現原理

Zero Clipboard 利用透明的Flash讓其漂浮在複製按鈕之上，這樣其實點擊的不是按鈕而是 Flash ，這樣將須要的內容傳入Flash，再經過Flash的複製功能把傳入的內容複製到剪貼板。

Zero Clipboard的安裝方法

其實也不算安裝啦，就是使用前的準備工做。
首先須要下載 Zero Clipboard的壓縮包，解壓後把文件夾中兩個文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的項目中。

Zero Clipboard : [項目主頁] [zip下載] [在線演示]

而後把在你要使用複製功能的頁面中引入Zero Clipboard的js文件：ZeroClipboard.js
以下代碼：

<script type="text/javascript" src="ZeroClipboard.js"></script>

注意：以上 ZeroClipboard.js, ZeroClipboard.swf須要放在同一路徑下。若是不在同一路徑，可以使用ZeroClipboard.setMoviePath( 「Flash路徑」 );來設置ZeroClipboard.swf 地址

Zero Clipboard實現簡單跨瀏覽器複製

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 事件上。以下面代碼是在jQuery下實現的resize事件從新設置按鈕位置：

$(window).resize(function(){     clip.reposition(); });

二、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("複製成功！"); });