王亮的空间

我们一直在努力....

js复制到剪切板

标签: javascript js跨浏览器复制 flash
开发中经常会用到复制的功能,在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。本文将介绍一个跨浏览器的库类 Zero Clipboard 。它利用Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比使用javascript 的 document.execCommand(“Copy”) 更加灵活。

Zero Clipboard 的实现原理

Zero Clipboard 利用Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

使用方法:

引入:
js 代码
  1. <script type="text/javascript" src="ZeroClipboard.js"></script>  

设置flash路径:(这里也可以是相对路径例如‘/path/ZeroClipboard.swf’  )
js 代码
  1. ZeroClipboard.setMoviePath( 'http://YOURSERVER/path/ZeroClipboard.swf' ); 

初始化:
var clip = new ZeroClipboard.Client();
设置复制内容:clip.setText( “Copy me!” );
绑定按键:clip.glue( ‘d_clip_button’ );

html页面显示:
js 代码
  1. <div id="d_clip_container" style="position:relative">  
  2. <div id="d_clip_button">Copy to Clipboard</div>  
  3. </div>  

需要移动或者调整窗口大小增加:
clip.reposition();

ZeroClipboard的DEMO因为FLASH沙箱的问题不支持本地文件地址,必须发布到服务器上才能查看

>>演示地址<<
>>项目地址<<
您也可以登录后直接下载附件

附件:


    分享: 收藏到CSDN 收藏到javaeye 收藏到博客园 收藏&分享
  • 浏览 (178)
  • 评论 (0)
  • 发表于 2010-10-13 21:55
  • javascript
    评分: 请先登录再投票,同一篇博客一月只能投票一次!
    无人投票

相关博客:


评论


发表评论

关注此文的人们还关注