ZeroClipboard实现复制功能(兼容各浏览器终极解决办法)

最新推荐文章于 2017-10-27 17:12:43 发布

转载最新推荐文章于 2017-10-27 17:12:43 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/winal/archive/2012/01/31/2333849.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用ZeroClipboard库解决浏览器间复制功能兼容性问题的方法。通过Flash技术，无论浏览器是否安装了Flash，都能实现内容复制到剪贴板。详细介绍了ZeroClipboard的安装步骤和应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景
在开发中经常会用到复制的功能，在 IE 下通过JavaScript 内置的window.clipboardData.setData 可以简单实现复制到剪贴板功能,但是无法兼容其他浏览器,所以今天介绍一种终极解决方法：使用jhuckaby写的Zero Clipboard的js类库。此方法利用 Flash完成进行复制内容到剪贴板，所以只要浏览器装有Flash 就可以复制内容。

实现原理
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。

安装方法
下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。
然后把在你要使用复制功能的页面中引入Zero Clipboard的js文件：ZeroClipboard.js
如下代码：
<script type="text/javascript" src="ZeroClipboard.js"></script>
注意：需要在ZeroClipboard.js中修改ZeroClipboard.swf的引用路径moviePath。当然也可使用ZeroClipboard.setMoviePath( “Flash路径” );来动态设置ZeroClipboard.swf 地址。

应用示例
//复制订单信息
var info = '商品名称：<%=Order.BizOfferName%>';

var clip = new ZeroClipboard.Client();
clip.setText(info); // 设置要复制的文本。
clip.setHandCursor(true); // 设置鼠标为手型
// 注册一个 button，参数为 id。点击这个 button 就会复制。
//这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。
clip.glue("aCopyOrderInfo"); // 和上一句位置不可调换
clip.addEventListener('onComplete', function(){
alert("复制订单信息成功！");
});

更多信息可以参考：
http://blog.163.com/lgh_2002/blog/static/44017526201022953310868/

下载：

/Files/winal/ZeroClipboard.rar

转载于:https://www.cnblogs.com/winal/archive/2012/01/31/2333849.html