兼容Chrome、FF、IE浏览器的复制粘贴方案

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2013/4/7

也许你在网上冲浪时,经常会在使用复制按钮时,出现下图的情况:
(图)

出现这种情况的原因是:浏览器兼容性的问题,那么来看看前端开发人员是怎么处理的,一般代码如下:

/**
* @复制内容到剪贴板
*/
var clipboardData = function(){
if(window.clipboardData && window.clipboardData.setData){
window.clipboardData.setData('text', "www.camnpr.com 郑州网建");
}else{
alert("您的浏览器不支持此复制功能,请使用Ctrl+C或鼠标右键。");
$("#makecode").select(); // 选中要复制的内容,给用户提供方便
}
}

web开发中常常要实现“复制到剪切板”功能。这个功能很实用,但是由于安全问题,浏览器的限制越来越严,实现的方法也越来越有限了。Firefox默认下不能直接通过Javascript操作剪切板,必须开启相关的设置才行。想只通过Javascript技术实现跨浏览器的剪切板是行不通的。现在常用的方法是利用JavaScript+Flash实现,普遍流传的办法是_clipboard.swf,这是国外最早实现的(著名的Clipboard Copy解决方案: http://www.jeffothy.com/weblog/clipboard-copy/)。但是很可惜,_clipboard.swf在新出来的flash10中无效,因为flash10中规定了只有在swf上进行了实际的操作(比如鼠标点击)才能启动剪切板。而_clipboard.swf方法的swf是隐藏的,通过JavaScript来操作flash的剪切板,显然没有对swf进行实际的用户操作。

针对这个,最近国外出现了一种新的方法,而且专门做了一个JavaScript库 Zero Clipboard ,它包含一个flash影片和一个JavaScript接口,这个flash是透明的(不是隐藏),用户不会察觉到它的存在。这个flash覆盖在一个DOM元素上,比如button,div之类,当点击这个DOM时,你实际点击的是这个flash,这个作用在flash上的动作能够开启flash的剪切板。这实际上就是一种clickjacking。

zeroclipboard 在线测试效果  http://camnpr.com/downloadCamnpr/zeroclipboard/test.html 

zeroclipboard 下载: http://jonrohan.github.io/ZeroClipboard/#demo 

写法参考(中党兄弟杰作,特别是要记得根据实现情况要修改一下下载包中的 ZeroClipboard.js 文件的moviePath: 路径值,要改对,切记莫忘! 否则会折腾半天白辛苦 ):

也许您在本的测试,moviePath路径没问题,但是还是不能使用,原因是:由于安全设置问题,要放到网上(带域名的)。同时,js和swf要版本保持一致。切记。

小编测试过了:直接访问test.html页面是不行的。放到IIS下,使用http://192.168.0.1/zeroclipboard/test.html也是不行的。

方法1. 可直接参考 “下载包的 test.html 写法”

方法2. 也可最简单的以下几行实现:

 <script type="text/javascript" src="/yourpath/scripts/zeroclipboard/ZeroClipboard.js"></script>

...

<input type="submit" name="btn_copy" style="cursor:pointer" value="复制" id="btn_submit" />

...

<script type="text/javascript">

var clip = new ZeroCliboard.Client(); // 新建一个对象

clip.setHandCursor(true); // 设手型</