前言：

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

 <script type="text/javascript">

     function copyToClipBoard(t) {

         if (isIE()) {

             var clipBoardContent = "";

             if (t == 1) {

                 clipBoardContent = document.getElementById("wz_contents").value;

             } else {

                 clipBoardContent = document.getElementById("tp_contents").value;

             }

             clipboardData.setData("Text", clipBoardContent);

             alert("您已成功复制了此地址");

         }

         else {

             if (t == 1) {

                 document.getElementById("wz_contents").select();

             } else {

                 document.getElementById("tp_contents").select();

             }

             alert("当前浏览器不支持此功能，请按Ctrl+C进行复制！");

         }

         return true;

     }

     function isIE(number) {

         if (typeof (number) != number) {

             return !!document.all;

         }

     }

 </script>

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

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

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

实例代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title></title>

     <script src="jquery.js"></script>//1. 引入jquery文件

 </head>

 <body>

 <div class="demo-area">

   <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>

   <h4><label for="fe_text">Change Copy Text Here</label></h4>

   <textarea id="fe_text"  cols="50" rows="3">Copy me!</textarea>

 </div>

 <h4>Debug Console:</h4>

 <div id="d_debug"></div>

 <!--2. 导入ZeroClipboard.min.js文件-->

 <script type="text/javascript" src="ZeroClipboard.min.js"></script>

 <script language="JavaScript">

 $(document).ready(function() {

 var clip = new ZeroClipboard($("#d_clip_button"), {

   moviePath: "ZeroClipboard.swf"

 });

 clip.on('load', function (client) {

   debugstr("Flash movie loaded and ready.");

 });

 clip.on('noFlash', function (client) {

   $(".demo-area").hide();

   debugstr("Your browser has no Flash.");

 });

 clip.on('wrongFlash', function (client, args) {

   $(".demo-area").hide();

   debugstr("Flash 10.0.0+ is required but you are running Flash " + args.flashVersion.replace(/,/g, "."));

 });

 clip.on('complete', function (client, args) {

   debugstr("Copied text to clipboard: " + args.text);

 });

 // jquery stuff (optional)

 function debugstr(text) {

   $("#d_debug").append($("<p>").text(text));

 }

 });

 </script>

 </body>

 </html>

代码说明：

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

2. html中需要导入文件：

　　

3. 实例文件下载：Demo

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

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

兼容多浏览器的网页复制插件（ZeroClipboard）的更多相关文章

  1. 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  2. 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...

  3. chrome浏览器安装网页测试插件postman的图文介绍

    用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具.今天给大家介绍的这款网页调试工具不仅可以 ...

  4. ZeroClipboard插件：兼容各浏览器网页复制功能

    常规利用JS编写的网页复制功能只对IE有效,无法做到兼容其它浏览器,代码如下: function copyToClipBoard(){ var clipBoardContent="" ...

  5. 兼容各个浏览器的jquyer zclip复制文本插件 无效的解决办法

    项目中使用点击文本复制功能,用了这个兼容各个浏览器的插件,但是发现放在最前面正常,放到嵌套的html中就失效. 解决办法: <span style="position: relativ ...

  6. js 复制网页内容，兼容各浏览器

    因需要做一个js单击,复制当前网页url的功能.使用的是如下的方法,但是只能在ie浏览器下正常使用. 方法如下: function copyURL(){ var clipBoardContent=&q ...

  7. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  8. Zclip复制页面内容到剪贴板兼容各浏览器

    Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...

  9. Zclip:复制页面内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

随机推荐

  1. IP地址与子网掩码

    IP地址 众所周知,为了确保通信时能相互识别,在internet上的每台主机都必须有一个唯一的标识,即主机的IP地址.IP协议就是根据IP地址来实现信息传递的. IP地址由32位(4字节)二进制数组成 ...

  2. 样本稳定指数PSI

    信用评定等级划分之后需要对评级的划分做出评价,分析这样的评级划分结果是否具有实用价值,即分析样本分布的稳定程度.样本分布稳定,则信用评定等级划分结果的实用价值就高.采用样本稳定指数( PSI )检验样 ...

  3. .CBB 文件 如何打开

    CCB Visual Basic动态按钮配置文件 用SQL server,导入时选择 access,打开后即可.

  4. Python 之 cas-clinet

    因为要搞一个用户登录安全的验证,要用到cas服务,所以在网上搜了很多关于cas信息才搞成功. 我写的属于客户端的cas就是从CAS服务,获取返回的ticket验证通过,用户登录成功. 使用的是web. ...

  5. JavaScript语句和异常

    知识内容: 1.条件语句(分支语句) 2.循环语句 3.with语句 4.异常处理 5.本节练习 参考资料:<JavaScript高级程序设计> 1.条件语句 JavaScript中的条件 ...

  6. 8. 启动Tomcat闪退无法启动原因解决

    原因可能是由于下面问题导致的: 1.Tomcat环境在不同电脑上引用的jdk路径不同 比如:在A电脑上Tomcat引用的jdk路径为:C:\Java\jdk1.6.0_10 而在B电脑上jdk的安装路 ...

  7. jquery在元素中存储数据:data()

    转自:http://www.php.cn/js-tutorial-405445.html 在元素中存储数据:data() 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html& ...

  8. 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据

    <div class="bus-nav-bar ft12"> <div class="navt bor-r-c pos-rel {if $int == ...

  9. windows installer 应用变换时的错误.请验证指定的变换路径是否有

    安装Windows Installer Clean Up 清理一下残留的项目之后再装或者手动去注册表找 HKEY_CLASSES_ROOT\Installer\Products\ 下面的"子 ...

  10. 机器学习入门-交叉验证选择参数(数据切分)train_test_split(under_x, under_y, test_size, random_state), (交叉验证的数据切分)KFold， recall_score(召回率)

    1. train_test_split(under_x, under_y, test_size=0.3, random_state=0)  # under_x, under_y 表示输入数据, tes ...