前言：

常规利用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. [转][SVN]常用操作

    1.  Commit 提交当前代码到 SVN 服务器. 2. 引用第三方类库时,不要从安装位置引用,而是在解决方案下,添加一个 lib 的目录,把需要的程序集复制到这里,然后从 lib 目录引用. 3 ...

  2. [转]LAMP（Linux-Apache-MySQL-PHP）网站架构

    本文转自 http://www.williamlong.info/archives/1908.html LAMP(Linux-Apache-MySQL-PHP)网站架构是目前国际流行的Web框架,该框 ...

  3. numpy的flat、flatten、ravel

    import numpy as np dt = np.arange(10).reshape(5,2) # =============================================== ...

  4. gz文件最后四位检测

    [root@node-0 ~]# ll -rw-r--r--  1 root root 24048 Nov 29 11:29 install.log 文件大小为24048 [root@node-0 ~ ...

  5. bat批处理（二）：%0 %1——给批处理脚本传递参数

    初次接触批处理脚本觉得有点意思,所以决定写一个小功能试验一下,谁知刚一开始就发现遇到了麻烦,本想着使用参数来控制程序的运行结果,可是参数怎么传进去呢,于是研究了一番,最终发现这个参数的传递与main函 ...

  6. SignalR + Mvc 4 web 应用程序

    在上节中,我们已经初步对 SignalR 进行了了解,这一节我们将做一个SignalR Demon,具体的步骤如下: 1. 创建一个 mvc 4 web 应用程序,并选择 Basic 2. 创建一个 ...

  7. 高斯混合模型（理论+opencv实现）

    查资料的时候看了一个不文明的事情,转载别人的东西而不标注出处,结果原创无人知晓,转载很多人评论~~标注了转载而不说出处这样的人有点可耻! 写在前面: Gaussian Mixture Model (G ...

  8. 30. CentOS终端命令行显示中文乱码的解决方法

    安装CentOS的时候选择了中文,结果在终端不能显示中文,都是乱码,解决方法:修改/etc/sysconfig/i18n,内容为   代码如下: LANG="zh_CN.GB18030&qu ...

  9. leetcode100

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  10. PHP闭包

    # 提到闭包就不得不想起匿名函数,也叫闭包函数(closures),貌似PHP闭包实现主要就是靠它.声明一个匿名函数是这样: $func = function() {       }; //带结束符 ...