ZeroClipboard.js複制内容到剪貼闆(跨浏覽器)

此文章摘抄與百度文庫

背景:

在開發中經常會用到複制的功能，在 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

如下代碼：

注意：以上 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的進階功能

1、reposition() 方法

因為按鈕上漂浮有一個 Flash 按鈕，是以當頁面大小發生變化時，Flash 按鈕可能會錯位，這樣就點不着了。不要緊，Zero Clipboard 提供了一個 reposition() 方法，可以重新計算 Flash 按鈕的位置。我們可以将它綁定到 resize 事件上。如下面代碼是在jQuery下實作的resize事件重新設定按鈕位置：

$(window).resize(function(){

clip.reposition();

});

2、hide() 和show() 方法

這兩個方法可以隐藏和顯示 Flash 按鈕。其中 show() 方法會調用 reposition() 方法。

3、setCSSEffects() 方法

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

#copy-botton:hover{

border-color:#FF6633;

}

// 可以改成下面的 ":hover" 改成 ".hover"

#copy-botton.hover{

border-color:#FF6633;

}

我們可以調用 clip.setCSSEffects( true ); 這樣 ZeroClipboard 會自動為我們處理：将類 .hover 當成僞類 :hover 。

4、getHTML() 方法

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

var html = clip.getHTML( 150, 20 );

你可以用 innerHTML 或直接 document.write(); 進行輸出。

以下是測試輸出的組裝完畢的HTML 代碼：

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) {

vartest = document.getElementById("test");

client.setText( test.value ); // 重新設定要複制的值

});

//複制成功：

clip.addEventListener( "complete", function(){

alert("複制成功！");

});

在說到ZeroClipboard之前，先說說為何會用到ZeroClipboard。有時候需要在觸發某JavaScript事件的同時，将某段文本複制到剪貼闆。比如直接通過點選某複制按鈕，将textarea中的内容複制到剪貼闆，就不用先全選内容，再Ctrl+C了。另外如果在複制的同時，要記錄這段文本被複制使用的次數，一般的方法是可以使用js腳本代碼，在執行複制之後，執行form submit，送出一次則該文本被使用的次數計數器加1。

若不考慮浏覽器的相容性，隻要支援IE浏覽器，則可以使用IE 浏覽器支援的window.clipboardData對象(js dom對象)的setData方法，如window.clipboardData.setData (“Text”,txt); 不過該window對象實作複制到剪貼闆并不支援Firefox浏覽器，當然更不支援Google Chrome浏覽器。針對相容火狐Firefox浏覽器的js代碼，可以用類似下面的這段JavaScript腳本實作複制。

<script type="text/javascript">

function copyCode(id){

var testCode=document.getElementById(id).value;

if(copy2Clipboard(testCode)!=false){

document.form1.submit();           //複制成功後送出表單，記錄複制到剪貼闆的使用次數

copy2Clipboard=function(txt){

if(window.clipboardData){         //判斷是否是IE浏覽器

window.clipboardData.clearData();

window.clipboardData.setData("Text",txt);

//else if(navigator.userAgent.indexOf("Opera")!=-1){

//    window.location=txt;

// }

else if(window.netscape){   //Firefox浏覽器

try{

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

catch(e){

alert("您的firefox安全限制限制您進行剪貼闆操作，請打開’about:config’将signed.applets.codebase_principal_support’設定為true’之後重試，相對路徑為firefox根目錄/greprefs/all.js");

return false;

var clip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);

if(!clip)return;

var trans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);

if(!trans)return;

trans.addDataFlavor('text/unicode');

var str=new Object();

var len=new Object();

var str=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

var copytext=txt;str.data=copytext;

trans.setTransferData("text/unicode",str,copytext.length*2);

var clipid=Components.interfaces.nsIClipboard;

if(!clip)return false;

clip.setData(trans,null,clipid.kGlobalClipboard);

</script>

HTML代碼:

<form action="copy.php" method="post" id="form1" name="form1" target="updateself">

<input type="button" name="title" οnclick="copyCode('copyid');" value="【點選複制】" width="100px" height="23">

<textarea id="copyid"><?php echo $content; ?></textarea>

上面的JavaScript針對使用最多的兩大主流浏覽器：IE(IE6，IE7，IE8)和Firefox都可以實作複制到剪貼闆功能。但是這段js腳本代碼對使用使用者群體越來越高的Google Chrome浏覽器仍無法相容。

這時候ZeroClipboard就派上用場了。ZeroClipboard使用一段隐藏的Adobe Flash 視訊和JavaScript接口，簡單實作複制文本到剪貼闆的功能。隻要使用者的浏覽器安裝了adobeflash，就可以使用，adobe flash的安裝率很高，同時相容最新的adobe flash player 10。剪貼闆複制操作由falsh裡的一個使用者點選事件觸發。最新釋出的版本是Zero Clipboard 1.0.7，下載下傳Zero Clipboard。

Zero Clipboard下載下傳完畢之後，在解壓的檔案夾中複制ZeroClipboard.js 和 ZeroClipboard.swf 到網站目錄中，若要啟用支援adobe flash 10的Rich Html 屬性，則還要将ZeroClipboard10.swf也複制過來。最好将它們放在和使用該js的html代碼同一級的目錄中，否則需要設定指明 ZeroClipboard.swf 所在的目錄路徑。Zero Clipboard使用如下執行個體：

CSS：

<style type="text/css">

#d_clip_button {

width:150px;

text-align:center;

border:1px solid black;

background-color:#ccc;

margin:10px; padding:10px;

#d_clip_button.hover{ background-color:#eee; }

#d_clip_button.active{ background-color:#aaa; }

</style>

copy.php：

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

<div id="d_clip_button">【點選複制】</div>

<textarea rows=2 id="copyid"><?php echo $content; ?></textarea>

<script language="JavaScript">

ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard.swf' );  //和copy.php不在同一目錄需設定setMoviePath

ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard10.swf' );

var clip = new ZeroClipboard.Client();   //建立新的Zero Clipboard對象

clip.setText( '' ); // will be set later on mouseDown   //清空剪貼闆

clip.setHandCursor( true );      //設定滑鼠移到複制框時的形狀

clip.setCSSEffects( true );          //啟用css

clip.addEventListener( 'load', function(client) {

// alert( "movie is loaded" );

} );

clip.addEventListener( 'complete', function(client, text) {     //複制完成後的監聽事件

// alert("Copied text to clipboard: " + text );

document.form1.submit();           // 複制到剪貼闆成功後送出表單

clip.hide();                                          // 複制一次後，hide()使複制按鈕失效，防止重複計算使用次數

} );

clip.addEventListener( 'mouseOver', function(client) {

// alert("mouse over");

} );

clip.addEventListener( 'mouseOut', function(client) {

// alert("mouse out");

} );

clip.addEventListener( 'mouseDown', function(client) {

// set text to copy here

clip.setText( document.getElementById('copyid').value );

// alert("mouse down");

} );

clip.addEventListener( 'mouseUp', function(client) {

// alert("mouse up");

} );

clip.glue( 'd_clip_button' );

</script>

Zero Clipboard 使用執行個體的說明在上面已經注明，ZeroClipboard使用起來還是比較簡單的，使用過程中注意次序，ZeroClipboard.js->HTML代碼–>建立 ZeroClipboard對象的JavaScript代碼–>…–>clip.glue()，尤其是一個頁面上需要建立多個 ZeroClipboard複制到剪貼闆對象時。

在IE7.0中，最後的這段JavaScript代碼不宜放在表格table，td等标簽中。在Firefox浏覽器中，拉動滾動條至隐藏Zero Clipboard的複制框後，需輕按兩下才能複制成功。在Google Chrome浏覽器中，目前的測試完全相容。為了有利于保護安全性，Internet explorer會限制網頁運作可以通路計算機的腳本和ActiveX控件，是以Zero Clipboard在本地磁盤上測試無法使用，必須在網絡上測試，如http://localhost…

function copyToClipboard(txt) {

if (window.clipboardData) {

window.clipboardData.clearData();

window.clipboardData.setData("Text", txt);

} else if (navigator.userAgent.indexOf("Opera") != -1) {

window.location = txt;

} else if (window.netscape) {

try {

netscape.security.PrivilegeManager

.enablePrivilege("UniversalXPConnect");

} catch (e) {

alert("被浏覽器拒絕！\n請在浏覽器位址欄輸入'about:config'并回車\n然後将'signed.applets.codebase_principal_support'設定為'true'");

}

var clip = Components.classes['@mozilla.org/widget/clipboard;1']

.createInstance(Components.interfaces.nsIClipboard);

if (!clip)

return;

var trans = Components.classes['@mozilla.org/widget/transferable;1']

.createInstance(Components.interfaces.nsITransferable);

if (!trans)

return;

trans.addDataFlavor('text/unicode');

var str = new Object();

var len = new Object();

var str = Components.classes["@mozilla.org/supports-string;1"]

.createInstance(Components.interfaces.nsISupportsString);

var copytext = txt;

str.data = copytext;

trans.setTransferData("text/unicode", str,copytext.length * 2);

var clipid = Components.interfaces.nsIClipboard;

if (!clip)

return false;

clip.setData(trans, null, clipid.kGlobalClipboard);

}

alert("複制成功！");

}

ZeroClipboard.js複制内容到剪貼闆(跨浏覽器)

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條