前言：

常规利用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

兼容多浏览器的网页复制插件（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. 杂项：GIT （分布式版本控制系统）

    ylbtech-杂项:GIT (分布式版本控制系统) Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git的读音为/gɪt/.Git是一个开源的分布式版本控制系统 ...

  2. 【转载】Keepalived安装使用详解

    转自:http://www.cnblogs.com/MacoLee/p/5853356.html 简介 Keepalived是一个基于VRRP协议来实现的服务高可用方案,可以利用其来避免IP单点故障, ...

  3. extract 用法说明

    PHP extract() 函数从数组中把变量导入到当前的符号表中 定义和用法 PHP extract() 函数从数组中把变量导入到当前的符号表中. 对于数组中的每个元素,键名用于变量名,键值用于变量 ...

  4. Oracle数据库的一些视图

    1.之前一直是SQL使用,没有深入学习数据库的底层知识,尤其使其进程以及锁以及底层的数据如何存储的这些知识. 2.渐渐的在开发中对数据库的要求慢慢高了 比如:临时表 -----BI里面,存储过程里面 ...

  5. 《Linux内核精髓：精通Linux内核必会的75个绝技》一HACK #15　ramzswap

    HACK #15 ramzswap 本节介绍将一部分内存作为交换设备使用的ramzswap.ramzswap是将一部分内存空间作为交换设备使用的基于RAM的块设备.对要换出(swapout)的页面进行 ...

  6. relocation error: /usr/lib64/libc.so.6: symbol _dl_starting_up, version GLIBC_PRIVATE not defined in file ld-linux-x86-64.so.2 with link time reference 问题解决

    在建立一个错误的软连接到ld-linux-x86-64.so.2时,悲剧就这么发生了.此时大部分命令都不能使用,SSH当然也不能登录了.这个时候一定不要退出终端. 有人说那就把软连接复原吧,可是ln也 ...

  7. DOM事件机制(事件捕获和事件冒泡和事件委托)

    内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...

  8. JavaScript词法分析(尽力理解)

    JavaScript中在调用函数的那一瞬间之前,会先进行词法分析 词法分析的过程: 当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面: 1:函数参数 ...

  9. 1_Utilities__bandwidthTest

    使用三种模式(QUICK_MODE,RANGE_MODE,SHMOO_MODE),测试三种拷贝情况下的显存带宽(HostToDevice,DeviceToHost,DeviceToDevice) ▶ ...

  10. sqoop1 与sqoop2的对比

    Sqoop是一款开源的工具,主要用于在Hadoop和传统的数据库(mysql.postgresql等)进行数据的传递,可以将一个关系型数据库(例如:MySQL.Oracle.Postgres等)中的数 ...