夏日博客

A-A+

js 内容复制到剪贴板方法总结

2016年10月15日 前端设计 暂无评论 阅读 6 views 次

我们经常会看到很多的网站复制他们的内容就在内容中加上了他们的版本或连接地址了，下面我来给大家总结各种内容复制到剪贴板方法.

在js中有一个clipboardData.setData(sDataFormat, sData)函数可以实现,代码如下:

  1. clipboardData.setData("text",www.xiariboke.net)  
  2. <a href="#" onclick=javascript:clipboardData.setData("text","www.xiariboke.net")>   
  3. 单击当前链接文本表示复制了内容到本地剪贴板，只需在【Ctrl】+【V】就能显示出定义的内容   
  4. </a>  

如何获得“拷贝的选择内容”，这就需要使用到 document.selection.createRange() 方法,代码如下:

  1. <script type="text/javascript">  
  2. document.body.oncopy=function(){  
  3.  event.returnValue=false;  
  4.  var t=document.selection.createRange().text;  
  5.  var s="有关单击按钮将内容复制到剪贴板的原文内容地址： "+location.href;  
  6.  clipboardData.setData('Text',t+'rnrn'+s+'rn');  
  7. }  
  8. </script>  

上面的方法可以使用在ie,ff中但是有时在一些浏览器会不兼容哦，下面我来介绍一个比较好的解决办法Zero Clipboard，利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash（对用户来说是不可见的）上覆盖一个dom元素比如button或div，当点击这个dom时，实际点击的是flash，从而访问flash的剪贴板,代码如下:

  1. <html>  
  2. <head>  
  3. <title>Zero Clipboard Test</title>  
  4. <script type="text/javascript" src="ZeroClipboard.js"></script>  
  5. <script language="JavaScript">  
  6.   var clip = null;    
  7.   function $(id) { return document.getElementById(id); }    
  8.   function init() {  
  9.           clip = new ZeroClipboard.Client();  
  10.           clip.setHandCursor(true);            
  11.           clip.addEventListener('mouseOver', function (client) {  
  12.     // update the text on mouse over  
  13.     clip.setText( $('fe_text').value );  
  14.           });  
  15.             
  16.           clip.addEventListener('complete', function (client, text) {  
  17.     //debugstr("Copied text to clipboard: " + text );  
  18.     alert("该地址已经复制，你可以使用Ctrl+V 粘贴。");  
  19.           });  
  20.           clip.glue('clip_button', 'clip_container' );  
  21.   }  
  22. </script>  
  23. </head>  
  24. <body onLoad="init()">  
  25. <input id="fe_text" cols=50 rows=5 value=复制内容文本1 >//xiariboke.net  
  26. <span id="clip_container"><span id="clip_button"><b>复制</b></span></span>  
  27. </body>  
  28. </html>  
标签：

给我留言