javascript copy 复制

本文介绍了如何在不同浏览器中实现复制功能,包括IE和Firefox等。利用原生JavaScript和ZeroClipboard库结合Flash技术,实现了一套兼容多种浏览器的复制解决方案。

在IE下,可以使用clipboardData

 

Ie下copy代码   收藏代码
  1. <input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制地址">   
  2. <script language="javascript">   
  3.    function copyToClipBoard(){   
  4.     var clipBoardContent="";   
  5.     clipBoardContent+=document.title;   
  6.     clipBoardContent+="";   
  7.     clipBoardContent+=this.location.href;   
  8.     window.clipboardData.setData("Text",clipBoardContent);   
  9.     alert("复制成功!");   
  10. }   

 但是在FireFox却不行,http://davidwalsh.name/clipboard 提供了一种万能方案,傅用的是flash技术,我的代码如下

 

万能 copy代码   收藏代码
  1. $(document).ready(function(){  
  2.         ZeroClipboard.setMoviePath('js/ZeroClipboard.swf');  
  3.         //create client  
  4.         var clip = new ZeroClipboard.Client();  
  5.         //event  
  6.         clip.addEventListener('mousedown',function() {  
  7.             clip.setText($('#inviteLink').val());  
  8.         });  
  9.         clip.addEventListener('complete',function(client,text) {  
  10.             alert("生成的代码已经复制到粘贴板,你可以使用Ctrl+V 贴到需要的地方去了哦!");  
  11.         });  
  12.         clip.glue('copy');  
  13. });  

 copy为页面元素的id

这样就可以了,在IE6,IE9, FireFox8.0, Chrome15.0.874.106, 可以正常运行

注:Iteye就是用的这种方法^_^

 

【增加】:

    flash技术使用的是事件机制,就是点击事件,它把点击区域与页面元素的区域重复,点击复制元素时,就触发flash的复制事件,

 

Flash热点绑定到元素上代码   收藏代码
  1. var style = this.div.style;  
  2. style.position = 'absolute';  
  3. style.left = '' + box.left + 'px';  
  4. style.top = '' + box.top + 'px';  
  5. style.width = '' + box.width + 'px';  
  6. style.height = '' + box.height + 'px';  

 昨天使用了js进行动态加载内容,发现复制失效了,找了半天,终于发现是这个问题,我的解决方案是,动态加载内容后,重新绑定,这样就可以了

    增加:页面变化后,一般是通过Ajax改变了页面的内容,这时可以通过clip.reposition()重新绑定,也可能通过 clip.show(),这个方法也会调用clip.reposition();

    相关的文章:https://code.google.com/p/zeroclipboard/wiki/Instructions

 

 

 

 

转载于:https://www.cnblogs.com/lv_yantao/archive/2012/07/12/2587306.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值