前言：

常规利用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. PHPExcel导入导出 若在thinkPHP3.2中使用（无论实例还是静态调用（如new classname或classname::function)都必须加反斜杠，因3.2就命名空间，如/classname

    php利用PHPExcel类导出导入Excel用法 来源:   时间:2013-09-05 19:26:56   阅读数: 分享到: 16 [导读] PHPExcel类是php一个excel表格处理插 ...

  2. RmNet，CDC-ECM ，NDIS，RNDIS区别

    RmNet和CDC-ECM区别:更像是两种拨号方式的区别,RmNet获取公网IP,ECD-ECM获取局域网IP. 在高通平台上,rmnet driver 和标准的CDC-ECM是有区别的,rmnet ...

  3. xiao look 知识贴

    从事中医临床近二十年了,多少总是积累了点经验,本来准备将来老了经验更丰富的时候传给子女的,可惜儿子根本不打算学医.在这个论坛里也混了不短了,感觉这里的风气很纯正,也有不少立志于中医的人士.为此,我决定 ...

  4. CSS3d 基础

    -webkit-transform-style:-webkit-preserve-3d;//设置3D转换 translateX:px; 平移 translateY:px; translateZ:px; ...

  5. Overriding managed version XX for YY

    在警告部分,添加<!--$NO-MVN-MAN-VER$-->. <build> <plugins> <plugin> <groupId>o ...

  6. Jquery jcarousellite 参数说明

    参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" btnNext     string 下一个按钮的class ...

  7. Mysql 索引优化 - 2

    永远小表驱动大表(小数据驱动大数据) in exists区别, SELECT * FROM A WHERE A.id in (SELECT id FORM B) 若A表数据大于B表数据用in SELE ...

  8. ios 避免navigationcontroller出现时scrollview内容被resize

    viewDidLoad中设置以下属性 self.automaticallyAdjustsScrollViewInsets = NO;

  9. 关于gevent的一些理解(二)

    3 实际应用 1 zeromq和gevent: zeromq的介绍请参看:http://www.infoq.com/cn/news/2010/09/introduction-zero-mq 假设你已经 ...

  10. FreeMarkerUtl

    /** * @title FreeMarkerUtl * @description 模板文件工具类 * @author maohuidong * @date 2017-07-05 */public c ...