相容主流瀏覽器的JS複製內容到剪貼簿_javascript技巧

現在瀏覽器種類也越來越多，諸如 IE、Firefox、Chrome、Safari等等，因此現在要實現一個js複製內容到剪貼板的小功能就不是一件那麼容易的事了。

在FLASH 9 時代，有一個通殺所有瀏覽器的js複製內容到剪貼簿的方案：

這個方案是一個最受歡迎的方法: 著名的Clipboard Copy解決方案 利用一個clipboard.swf作為橋樑，複製內容到剪貼簿。

原理是：建立一個隱藏的flash文件，同時給給flash的變數FlashVars 賦值“clipboard=..”，透過這個賦值flash就會把複製的內容放到剪貼簿。這個方法相容於IE、Firefox、Opera、chrome、 Safari，真可謂「萬能」的解決方案。瀏覽器Flash的安裝率非常高，幾乎是一個完美的解決方案。

複製程式碼 程式碼如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">






文字內容.......

 

複製程式碼到剪切板

   
 

clipboard.swf 的下載網址：http://www.jeffothy.com/weblog/uploads/clipboard.php

但是 Flash 10 時代，上面的方法已經不行了。

因為flash10中規定了只有在swf上進行了真實的操作（例如滑鼠點擊）才能存取剪切板，而上述方法只是使用了一個隱藏的swf文件，透過javascript操作flash的剪貼板，使用者並沒有對swf檔案進行真實的操作，因此這個方法也就失效了。

那麼如何解決這個「真實操作」的問題呢？可以使用一個JavaScript函式庫：Zero Clipboard，利用這個js函式庫可以支援利用flash 10 實作複製到剪貼簿。這個方法原理是在一個透明的flash（對使用者來說是不可見的）上覆蓋一個dom元素例如button或div，當點擊這個dom時，實際點擊的是flash，從而訪問flash的剪貼簿。

 以下是除錯好的範例：

複製程式碼 程式碼如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">





  var 剪輯 = null; 
  函數 $(id) { return document.getElementById(id); } 
  函數 init() {
    Clip = new ZeroClipboard.Client();
    Clip.setHandCursor(true);  
    Clip.addEventListener('mouseOver', function (client) {
    // 更新滑鼠懸停時的文字
    Clip.setText( $('fe_text').value );
    });
    
    Clip.addEventListener('complete', function (client, text) {
    //debugstr("複製文字到剪貼簿：" text );
    alert("該位址已經複製，可以使用Ctrl V貼上。");
    });
 
    Clip.glue('clip_button', 'clip_container' );
  }
腳本>
頭>


複製
身體>

點選下載該類別庫： http://www.jb51.net/jiaoben/24961.html

調試時請上傳到網站，本地直接打開flash會出錯的，沒權限。 zeroClipboard.js檔案裡moviePath屬性是falsh的位址，就是目錄下的那個ZeroClipboard.swf存放的位址位置。

這種js複製到內容剪切板的方案可支援瀏覽器：Firefox / IE / opera / chorme / safari 所有瀏覽器！