前言：

常规利用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. Linux下查看某个进程占用的CPU、内存

    1.用top命令指定固定的PID top -p 10997 查询指定进程的PID ps -ef | grep zookeeper jim 10997 1959 0 12月14 pts/2 00:00: ...

  2. 廖雪峰Java1-1Java入门-2eclipse安装配置

    安装eclipse IDE继承开发环境:Integrated Development Environment 编写代码/组织项目/编译/运行/调试 提升开发效率 1.eclipse下载 eclipse ...

  3. [UE4]目标是Pawn、Get Player Character

    “目标是Pawn”表示这一个定义继承与Pawn类的方法. 这样可以很清楚的看到这个是方法是在什么地方定义的 “Get Player Character”可以获得当前控制的角色实例,可以转换成真正具体的 ...

  4. seaborn可视化特征的相关性

    import seaborn as sn sn.heatmap(trainX.corr(),vmax=1,square=True)

  5. 一篇文章让你入门Shell ！

    Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合. Shell可以直接使用在win/Unix/Linux上面 ...

  6. javascript callee和caller

    arguments的主要用途是保存参数,但是他还有callee属性. 一:callee指向arguments对象的函数. 示例一: function calture(num) {//阶乘计算 if ( ...

  7. javascript的防篡改对象之preventExtensions()方法

    js在默认情况下,所有的对象都是可扩展的.这也是让很多开发人员头特疼的问题.因为在同一环境中,一不小心就会发生修改了不必要的对象,而自己却不知道. 在ECMAScript5可以解决这种问题了. pre ...

  8. (c#) 销毁资源和释放内存

    0. 什么是资源? .NET 框架中如何访问资源? 所谓的资源就是程序中可利用的数据,譬如:字符串.图片和任何二进制数据,包括任何类型的文件. 在面向对象的环境中,每一个类型都标识为某些程序所用的资源 ...

  9. Ubuntu16安装QQ

    安装教程: 一:安装依赖库 在终端输入sudo apt-get install libgtk2.0-0:i386 另外,如果是64位系统还要安装ia32-libs 这里我们选择安装lib32ncurs ...

  10. mybatis Dynamic SQL动态 SQL

    动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其它类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句的痛苦.例如拼接时要确保不能忘记添加必要的空格 ...