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/

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