兼容多浏览器的网页复制插件（ZeroClipboard）

前言：

常规利用JS编写的网页复制功能是最简单的方法，但是只对IE有效，无法做到兼容其它浏览器，对其他浏览器也就只能弹窗提示用户手动复制了。

 1 <script type="text/javascript">
 2     function copyToClipBoard(t) {
 3         if (isIE()) {
 4             var clipBoardContent = "";
 5             if (t == 1) {
 6                 clipBoardContent = document.getElementById("wz_contents").value;
 7             } else {
 8                 clipBoardContent = document.getElementById("tp_contents").value;
 9             }
10             clipboardData.setData("Text", clipBoardContent);
11             alert("您已成功复制了此地址");
12         }
13         else {
14             if (t == 1) {
15                 document.getElementById("wz_contents").select();
16             } else {
17                 document.getElementById("tp_contents").select();
18             }
19             alert("当前浏览器不支持此功能，请按Ctrl+C进行复制！");
20         }
21         return true;
22     }
23     function isIE(number) {
24         if (typeof (number) != number) {
25             return !!document.all;
26         }
27     }
28 </script>

这种方法是很简单，但是用户体验很不好。使用一种能兼容多种主流浏览器的复制功能就很有必要了。

解决方法：使用ZeroClipboard插件和Jquery实现复制功能

ZeroClipboard是利用flash为媒介实现兼容各浏览器复制功能一款jquery插件可以兼容ie6.0及以上版本浏览器、chrome内核浏览器、firefox内核浏览器等。

实例代码：

 1 <!DOCTYPE HTML> 
 2 <html> 
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title></title> 
 6     <script src="jquery.js"></script>//1. 引入jquery文件
 7 </head>
 8 <body>
 9 <div class="demo-area">
10   <button id="d_clip_button" class="my_clip_button" title="Click me to copy to clipboard." data-clipboard-target="fe_text" data-clipboard-text="Default clipboard text from attribute"><b>Copy To Clipboard...</b></button>
11   <h4><label for="fe_text">Change Copy Text Here</label></h4>
12   <textarea id="fe_text"  cols="50" rows="3">Copy me!</textarea>
13 </div>
14 <h4>Debug Console:</h4>
15 <div id="d_debug"></div>
16 
17 <!--2. 导入ZeroClipboard.min.js文件-->
18 <script type="text/javascript" src="ZeroClipboard.min.js"></script>
19 <script language="JavaScript">
20 
21 $(document).ready(function() {
22 var clip = new ZeroClipboard($("#d_clip_button"), {
23   moviePath: "ZeroClipboard.swf"
24 });
25 
26 clip.on('load', function (client) {
27   debugstr("Flash movie loaded and ready.");
28 });
29 
30 clip.on('noFlash', function (client) {
31   $(".demo-area").hide();
32   debugstr("Your browser has no Flash.");
33 });
34 
35 clip.on('wrongFlash', function (client, args) {
36   $(".demo-area").hide();
37   debugstr("Flash 10.0.0+ is required but you are running Flash " + args.flashVersion.replace(/,/g, "."));
38 });
39 
40 clip.on('complete', function (client, args) {
41   debugstr("Copied text to clipboard: " + args.text);
42 });
43 
44 // jquery stuff (optional)
45 function debugstr(text) {
46   $("#d_debug").append($("<p>").text(text));
47 }
48 });
49 </script>
50 </body>
51 </html>

代码说明：

1. 要在服务器环境下测试才有效，静态网页时是没有反应的。

2. html中需要导入文件：

3. 实例文件下载：Demo

4. 使用中下载源码后根据需要修改即可。

欢迎转载，转载请注明出处：http://www.cnblogs.com/xyyt/p/3598946.html