谷歌瀏覽器使用複製的功能
阿新 • • 發佈：2018-12-03
在文字複製的時候，Ie和谷歌是不能同時使用 window.clipboardData，物件的，該功能IE可以使用，但是谷歌是不能使用的，所以要使用下面的外掛來進行操作： ZeroClipboard.js和ZeroClipboard.swf這兩個包，來進行操作。
如果這連個檔案不在同一個目錄下，可是在 new ZeroClipboard 物件之後呼叫，ZeroClipboard.setMoviePath('ZeroClipboard10.swf' );進行設定swf檔案所在的目錄。
案例的git地址：https://gitee.com/sgqing/google_browser_text_copy.git
<html> <head> <title>Zero Clipboard Test</title> <script type="text/javascript" src="ZeroClipboard.js"></script> <script language="JavaScript"> var clip = null; // 獲取你要複製的內容 function $(id) { return document.getElementById(id); } function init() { //建立物件 clip = new ZeroClipboard.Client(); //是否支援複製 clip.setHandCursor(true); // 當滑鼠移到要點選的物件上面的時候，就會觸發 clip.addEventListener('mouseOver', function (client) { // // // update the text on mouse over clip.setText($('fe_text').value); }); // clip.setText($('fe_text').value); // 會監聽，當賦值完成之後，就會執行該方法 clip.addEventListener('complete', function (client, text) { //debugstr("Copied text to clipboard: " + text ); alert("該地址已經複製，你可以使用Ctrl+V 貼上。"); }); // 用於指定當前的flash執行在什麼地方，一般是點選的地方 clip.glue('clip_button'); } </script> </head> <!--// 一定要進行資料的初始化，要不然在使用的時候，需要點選兩次才可以完成資料的賦值--> <body onLoad="init()"> <textarea id="fe_text" cols=50 rows=5>複製內容文字1</textarea> <span id="clip_container"><span id="clip_button"><b> 複製</b></span></span> <br> </body> </html>
特別提醒，在使用的時候，首先需要對上面的方法，進行初始化，要不然需要點選兩次才可以完成資料的複製，注意在複製的時候，保證glue方法，不會操作同一個物件，要不然只會操作第一次的資料