前言：

常规利用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. 廖雪峰Java1-2程序基础-5浮点数运算

    1.浮点数运算的特点 很多浮点数无法精确表示 计算有误差 整型可以自动提升到浮点型 如0.1用二进制表示会是一个无限循环的小数.计算机不可能在有限内存中表示一个无限小数.因此浮点数不能精确表示.也造成 ...

  2. 关于wp数据备份

    差点忘记记录,之前一直用wp数据备份,但是一直发送邮件不成功,后来才发现,原来是因为发送的邮箱没有设置开通那个什么pop鬼的,不记得叫什么了,看下图. 开通这个服务,就可以正常接收wp的数据邮件备份了 ...

  3. scrapy 抓取拉勾网数据

    其实很简单,却因为一些小问题,折腾不少时间,简要记录一下,以备后需. >> scrapy startproject lagou >> cd lagou >> scr ...

  4. PHP 弹出文件下载 原理 代码

    /** * @author      default7<default7@zbphp.com> * @description 演示PHP弹出下载的原理 * * @param $file_n ...

  5. 探究CSS中border-top属性的使用

    上一节我们介绍了CSS top属性的用法,那么这节关于CSS border-top属性用法学习起来就会轻松一些,border-top 简写属性把上边框的所有属性设置到一个声明中. 本文向大家描述一下C ...

  6. BTree,B-Tree,B+Tree,B*Tree的数据结构

    B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...

  7. python应用之爬虫实战1 爬虫基本原理

    知识内容: 1.爬虫是什么 2.爬虫的基本流程 3.request和response 4.python爬虫工具 参考:http://www.cnblogs.com/linhaifeng/article ...

  8. Sklearn与特征工程

    Scikit-learn与特征工程 “数据决定了机器学习的上限,而算法只是尽可能逼近这个上限”,这句话很好的阐述了数据在机器学习中的重要性.大部分直接拿过来的数据都是特征不明显的.没有经过处理的或者说 ...

  9. python 编写远程连接服务器脚本

    import paramiko client = paramiko.SSHClient()client.set_missing_host_key_policy(paramiko.AutoAddPoli ...

  10. leetcode54

    class Solution { public: vector<int> spiralOrder(vector<vector<int>>& matrix) ...