javaScript複製功能呼叫實作方案_基礎知識

複製代碼 代碼如下:

驗證碼:

最近都沒有什心情去寫博文，主要因為心煩的事情漸漸多起來了。
哎！離題了，回到這篇文章了。說到使用js實現點擊複製的功能，我下面想說的方法也是和網路上的大同小異的。 js實作是很簡單，最難的是相容問題，畢竟用IE以外的人還是有很多的。這裡，我也是根據網路上的相關資源來總結一下方法。

方法一，逐一判別處理法
方法很簡單也很容易懂，就是透過判斷客戶端瀏覽器類別，來執行不同的js程式碼來實現複製功能。雖然從理論上來說，這樣是行得通得。但是，事實並沒有我們想得那麼容易。因為我們並不太清楚一些瀏覽器下js複製程式碼的寫法，至少我所知道的也就是IE和FF。

如果只是相容IE和FF的話，那麼簡單得多了。這裡我使用一個網路上比較有名的判斷IE核的方法，13位元組法，這個也是我常用的。

複製程式碼 程式碼如下:

if("v"=="v") { //13個位元組
//這裡是IE核，執行的程式碼，親測相容IE8
}else{
//非IE核執行碼
}

這裡我寫個大概的實現複製的架構架，具體程式碼我不黏上來的，網路上可以很簡單就找到，給大家參考

複製程式碼 程式碼如下:

function clipBoard(object){
//取得object的值，即複製內容
var copyTxxx=docm. ).value;
//呼叫copy2Clipboar來實現瀏覽器，判斷及執行程式碼
if(copy2Clipboard(copyTxt)!= false){
alert('複製成功');
}
}
copy2Clipboard = function(txt){
if("v"=="v"){
//IE瀏覽器執行程式碼
window.clipboardData.clearData(); window.clipboardData.setData("Text",txt);
return true;
}else if(navigator.userAgent.indexOf("Firefox")>0){
//Firefox瀏覽器
return true;
}else if(window.google && window.chrome){
//chrome瀏覽器
return true;
}else{
alert("瀏覽器不支援");
return false;
}
}

根據需要可以自行新增不同的判斷瀏覽器程式碼，實作該瀏覽器下的複製功能。一般情況下，依照IE > FF > opera/chrome>其他，這樣的順序來判斷。

方法二，flash間接處理法
原理很簡單，透過建立一個flash，將複製的內容以變數的方式傳遞給flash，flash再將內容複製到記憶體中，這樣就實現了複製的功能。只要支援flash，按理上是可以兼容絕大部分的瀏覽器的,這個方法是我今天看到的，也測試驗證了。

安裝及使用方法，可以在上面兩個網址上找到，E文版，中文版只有透過搜尋去找咯！
這裡我提供一下實作框架的簡單版，這裡有用到上面的實作方式。這裡有修改的，根據官方版說明方法，在單頁很容易就能實現該功能，但是在實際應用到某些CMS中，可能會遇到一些問題。什麼問題呢？ IE核頁面會彈出 「該頁面已終止」。原因很簡單，就是js載入未完成就呼叫。竟然是IE的問題，那我們就可以使用判斷IE的方法，將IE獨立出來，其他核就使用flash方法實作。

複製程式碼 程式碼如下:

function checkClient(object){//判斷瀏覽器
var copyTxt=document.getElementById(object).value; //取得複製的內容
if("v"!="v "){
//這裡根據官方文件設定
//這裡設定flash位置，絕對相對都可以
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
//建立複製對象
var clip = new ZeroClipboard.Client();
//設定手形
clip.setHandCursor(true);
//設定複製的內容
clip.setText(copyTxt);
//設定觸發物件
>clip.glue('d_clip_button');
}
}

這裡用來判斷是否為IE核，IE核將不使用flash處理法，直接使用複製機制

複製程式碼 程式碼如下:

//複製處理
function clipBoard(object){
var copyTxt=document.getElementById(object).value;
if(copy2Clipboard(copyTxt)!= false){ }
}
copy2Clipboard = function(txt){
if("v"=="v") { //判斷是否為IE瀏覽器
window.clipboardData.clearData( );
window.clipboardData.setData("Text",txt);
return true;
}
else{ //非IE核直接回傳
return true;
}
}

以上為第二種方法的最簡單設定方法，將程式碼放到之間即可不管是第一種，還是第二種方法都要在需要復制的頁面上添加下面兩行代碼
設置複製內容的文本域

複製代碼 程式碼如下:

onmouseout="checkClient('textinfo')" value="複製的內容" size="65" />

設定觸發物件按鈕

複製程式碼 程式碼如下:

複製位址

這是第二種方法才要新增的，設定偵測瀏覽器

複製程式碼 程式碼如下:

<script>checkClient('text🎜><BR> <<><script>checkClient('text🎜><BR> <<><script>checkClient('text🎜); /script> </script>

寫到這裡，大概的步驟就是這樣了，其中還有些id的名稱可以依需求修改。至少完整程式碼，可以參考官方的demo。 累了。