相容所有瀏覽器的點選複製黏貼效果

antzone發表於2017-03-13
瀏覽器

點選複製指定內容在在js中有相應的程式碼，但是瀏覽器相容性很差，下面分享一個結合flash實現的這樣的效果，能夠完美相容所有主流瀏覽器，希望能夠給需要的朋友帶來一定的幫助

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>js實現的剪下板功能-螞蟻部落</title>
<script type="text/javascript"> 
function copy_code(copyText) 
{ 
  if(window.clipboardData) 
  { 
    window.clipboardData.setData("Text", copyText) 
  } 
  else 
  { 
    var flashcopier='flashcopier'; 
    if(!document.getElementById(flashcopier)) 
    { 
      var divholder= document.createElement('div'); 
      divholder.id = flashcopier; 
      document.body.appendChild(divholder); 
    } 
    document.getElementById(flashcopier).innerHTML = ''; 
    var divinfo='<embed src="mytest/JS/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(copyText)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>'; 
    document.getElementById(flashcopier).innerHTML = divinfo; 
  } 
  alert('複製成功！'); 
} 
window.onload=function()
{
  var thediv=document.getElementById("thediv");
  var bt=document.getElementById("bt");
  bt.onclick=function()
  {
     copy_code(thediv.innerHTML);
  }
}
</script> 
<body>
<div id="thediv">螞蟻部落歡迎您</div>
<input id="bt" type="button" value="點選拷貝div中的內容" /> 
</body>
</html>

以上程式碼實現了將內容拷貝到剪下板的功能，能夠相容所有的瀏覽器。但是上面的程式碼在測試的時候並不能將複製div中的內容，因為執行環境不是伺服器環境。

特別注意:

1._clipboard.swf檔案的引用路徑要正確。

2.必須在伺服器環境下執行才能夠有效。

相關文章