跨浏览器实现一键复制到剪贴板的功能

06.22-2010 | 三石 | 8 Comments | 360 views

　　今天看本站的单日志页面，发现正文下面的“本文链接地址”没有复制按钮，这样用户如果想复制链接地址，和在地址栏上复制没啥区别，太鸡肋了！

　　实在看不下去，一定要实现一键复制本文链接的功能，放狗（Google）去搜，网上“点击按钮复制信息”的代码确实不少，但大部分都只支持IE，能实现跨浏览器实现复制功能的方法不多。

一种是通过一段JS代码+a标签模拟的按钮：

<script type="text/javascript">   
function setCopy(content){    
    if(navigator.userAgent.toLowerCase().indexOf('ie') > -1) {    
        clipboardData.setData('Text',content);    
        alert ("该地址已经复制到剪贴板");    
    } else {    
        prompt("请复制网站地址:",content);    }    
} </script>     
<a href="http://www.3anshi.com/" onclick="setCopy(this.href);return false;"  target="_self">复制此链接网址</a>

　　js判断非IE浏览器则弹出窗口，手动复制链接地址，这个不完美，弃之。

还有是通过Flash做中介，因为主流浏览器都支持Flash，利用flash调用页面信息，就能实现跨浏览器复制功能了。

　　方法一：《Zero Clipboard js+swf实现的复制功能使用》
这种方法能实现复制文本框文字，功能很强大完美，但需要加载一个10K的js文件，对偶来说太奢侈了，被否！

　　我找、找、找，终于找到现在的完美答案：只需要一个1k的flash按钮就能实现跨浏览器复制链接地址的功能，正是我需要的，测试很完美，Firefox和Chrom都通过！

　　使用方法：在你想要复制的地方写入下列代码：

<embed width="62" height="24" align="center"
flashvars="txt=http://www.3anshi.com"//要复制的信息
src="http://www.3anshi.com/wp-content/themes/AN3/Copy.swf"//flash按钮地址，下载后替换成你自己的地址
quality="high" wmode="transparent"
allowscriptaccess="sameDomain"
pluginspage="http://www.adobe.com/go/getflashplayer"
type="application/x-shockwave-flash">

　　具体效果演示见本页下方的“本文链接地址”，点击旁边的“复制”按钮试试看！
　　原理和详细解释看原文：《用Flash按钮解决跨浏览器使用剪贴板的复制功能》。

标签：使用技巧

8 条评论

奶牛说：

2010年06月23日于02:35

帅气又实用，赞

回复
- 三石说：
  
  2010年06月23日于09:06
  
  恩？奶牛那么晚不睡觉，来串门啊
  
  回复
万戈说：

2010年06月23日于08:45

这个功能好耶，gg reader里收藏起来

回复
- 三石说：
  
  2010年06月23日于09:08
  
  觉得不错就发上来了，万戈喜欢的就更好了
  
  回复
Ray 说：

2010年06月23日于16:01

这个功能不错，可惜俺用不着

回复
- 三石说：
  
  2010年06月23日于19:25
  
  偶尔能用上，嘿嘿
  
  回复
大智若鲁说：

2010年06月24日于22:12

不管你愿不愿意，这篇文章我都要转走了，爱咋咋地！！！！

回复
- 三石说：
  
  2010年06月24日于22:25
  
  哈哈，拿走拿走！这也是拷贝人家地
  
  回复

一	二	三	四	五	六	日
« 八
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

三石映像

home / web建站