前言
现在有很多地方需要复制，由于安全问题，浏览器的限制越来越严，实现方法也越来越有限window.clipboardData仅在IE上支持，Components.interfaces.nsIClipboard在FF上需要进行设置才能支持。
分析
现在网上比较流行的解决方案是利用flush作为桥梁，主要有：
1、Clipboard Copy，这个方法只支持flash 9，不支持flash 10。因为flash10中规定了只有在swf上进行了真实的操作（比如鼠标点击）才能访问剪切板，而上述方法只是使用了一个隐藏的swf文件，通过javascript操作flash的剪贴板，用户并没有对swf文件进行真实的操作，因此这个方法也就失效了。
2、Zero Clipboard，利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash（对用户来说是不可见的）上覆盖一个dom元素比如button或div，当点击这个dom时，实际点击的是flash，从而访问flash的剪贴板。
Zero Clipboard 例子
demo地址：http://xuanfengge.com/demo/201402/copy/
|
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 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兼容多种浏览器的“复制到剪切板的”解决方案-轩枫阁</title> </head> <body> <button id="copy-button" data-clipboard-text="这里是复制文字!" title="Click to copy me.">Copy to Clipboard 点击复制</button> <script src="ZeroClipboard.min.js"></script> <script> var clip = new ZeroClipboard( document.getElementById("copy-button"), { moviePath: "./ZeroClipboard.swf" } ); clip.on( "load", function(client) { client.on( "complete", function(client, args) { // `this` is the element that was clicked // this.style.display = "none"; alert("Copied text to clipboard: " + args.text ); } ); } ); </script> </body> </html> |
tip: 项目需要在服务器环境下运行
说明
1、如果 ZeroClipboard.swf 与页面不在同一个目录下，可以设置路径
|
1 2 3 4 5 6 7 8 |
// 全局设置 ZeroClipboard.setDefaults({ moviePath:"/path/ZeroClipboard.swf" }); // 参数中设置 var clip=new ZeroClipboard(document.getElementById("copy-button"),{ moviePath:"/path/ZeroClipboard.swf" }); ' |
2、调用 可以传递一个元素或者一个元素数组。
|
1 |
var clip=new ZeroClipboard(document.getElementById("copy-button")); |
注意：ZeroClipboard不同版本之间的调用有一些细微的不同，使用的时候要主要了。
最后，浏览器的复制到此为止还是不完美的，用户的flash版本问题，还是很关键的，最好的解决是能不用的就不用，使用其他替代方案了
进阶使用
详细的用法请到下面的站点
附ZeroClipboardzeroclipboard-1.2.1
http://www.steamdev.com/zclip/
https://github.com/zeroclipboard/zeroclipboard(ZeroClipboard.min.js、ZeroClipboard.swf请在此下载)
暂无评论