JavaScript實現兼容所有瀏覽器實現複製到剪貼板

 如果只是兼容IE可用如下方法實現:

  1. function copyToClipboard() { 
  2.     var format = "text"
  3.     var value; 
  4.     var isIE = false
  5.     if(!+[1,]) { 
  6.         isIE = true
  7.     }  
  8.     if(isIE) { 
  9.         value = document.getElementById("exCode").outerText; 
  10.         if(window.clipboardData) { 
  11.             window.clipboardData.setData(format, value); 
  12.         } 
  13.         alert("已拷貝到剪切板!"); 
  14.     }  

但是非IE等瀏覽器及Firefox、Chrome、Opera等都不支持window.clipboardData對象,且不允許前端頁面直接複製元素信息至剪貼板,所以要實現兼容所有瀏覽器的實現複製到剪貼板的功能需用到ZeroClipboard.js、ZeroClipboard.swf、jquery-1.7.1.js等核心JS Framework:

具體實現如下:

 

  1. $(function() { 
  2.              ZeroClipboardInit(); 
  3. }); 
  4. function ZeroClipboardInit() { 
  5.    var clip = new ZeroClipboard.Client(); 
  6.    clip.addEventListener('complete', function(client, text) { 
  7.        alert("已拷貝到剪切板!"); 
  8. //多個拷貝按鈕需要綁定拷貝時需移除上一個clip 
  9.     clip.destroy(); 
  10.    }); 
  11.    clip.setText('what you want to copy to Clipboard'); 
  12. //綁定DOM中的元素ID,一般爲Input 
  13.    clip.glue('BtnExport'); 

注:ZeroClipboard包下載地址如下:http://code.google.com/p/zeroclipboard/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章