最近在做一个的智能客服Web端浏览器应用，其中有一项需求是客户在获取系统返回的

答案后点击“复制答案”按钮将答案复制到系统剪切板。本以为这是一个小case,但是发现如果

要对各种主流浏览器都有良好的兼容性并不简单。原因在于出于安全原因，大多数现代浏览

器都未提供通用的剪贴板复制接口(或即便有，也默认被禁用)。

　　上网搜索了一下，现有的方案大致有两种：

　　一：使用原生javascript中window.clipboardData实现复制到剪贴板功能；

　　二：使用Zero Clipboard库；

　　在尝试了之后发现现有的方案都不能满足需求。

方案一仅仅支持ie浏览器，在firefox,chrome浏览器上则不起作用。

方案二则是现有绝大多数网站（包括github等）所采取的方案，ZeroClipboard是国外大神开发的一个

用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard

的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助

它实现复制功能就行了。

　　ZeroClipboard 中的 "Zero" 指的就是"不可见，零干扰"。

　　对此感兴趣的可以参考 http://my.oschina.net/shniu/blog/298406?p=1

　　但是在现代浏览器中，flash逐渐没落，firefox浏览器默认不开启flash，所以Zero Clipboard在

兼容方面也表现不佳。

　　那么，对于复制到剪切板这种简单的操作有没有一种实现简单，兼容性良好的解决方案呢？有的！那就是github

上的开源项目clipboard.js(官网：http://zenorocha.github.io/clipboard.js/) 官网对于clipboard.js的介绍

非常简单：

　　A modern approach to copy text to clipboard No Flash. No dependencies. Just 3kb gzipped

　　Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure

or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.

That's why clipboard.js exists.(拷贝文本到剪切板不应该复杂，它不应该需要许多步骤以及几百KB的文件，另

外，它不应该依靠flash以及其他框架，这就是clipboard存在的原因)

　　使用clipboard简单快捷，并且从官网下载下来的zip格式压缩包里有非常实用的demo,举一个简单的例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>target-div</title>

 </head>

 <body>

     <!-- 1. Define some markup -->

     <div>hello</div>

     <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

     <!-- 2. Include library -->

     <script src="../dist/clipboard.min.js"></script>

     <!-- 3. Instantiate clipboard -->

     <script>

     var clipboard = new Clipboard('.btn');

     clipboard.on('success', function(e) {

         console.log(e);

     });

     clipboard.on('error', function(e) {

         console.log(e);

     });

     </script>

 </body>

 </html>

非常简单吧，我们只需下面四步：

1.引入clipboard.min.js文件

2.选择一个可以确定被拷贝元素的选择器，本例中使用用的是基本的标签选择器<div>，当然也可以使用id选择器 class选择器等等

3.定义一个button按钮，注意按钮的属性：

　　data-clipboard-action="copy" data-clipboard-target="div"
　　其中data-clipboard-target属性就是第二步你定义的选择器

4.书写js,建立clipboard对象以及复制后执行的方法

OK,这样功能就完成了，点击按钮后就会发现div的内容已经拷贝到剪切板了。

 
 

使用clipboard.js复制页面内容到剪切板的更多相关文章

  1. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...

  2. 使用ZeroClipboard 复制指定内容到剪切板

    有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中.但是出于安全原因,大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用).只有IE浏览器可以 ...

  3. 使用clipBoard.js进行页面内容复制

    官方网址: https://clipboardjs.com/

  4. js实现复制文本内容到剪切板

    function copyUrl() { var Url2=document.getElementById("url").innerText; var oInput = docum ...

  5. js+flash(as3)实现复制文字内容到剪切板实例

    /* SWFObject v2.2 swfobject.js */ var swfobject=function(){var D="undefined",r="objec ...

  6. 一段js实现复制文本内容到剪切板

    <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementBy ...

  7. Shell——Linux/Mac 终端复制文件内容到剪切板

    pbcopy < filename 如: pbcopy < README.md 效果如下: 说明:上图中  # gitskills   即README.md 中内容.

  8. js拷贝指定内容到剪切板

    function copyTextToClipboard(text) { var textArea = document.createElement("textarea"); te ...

  9. windows 复制 文本文件内容 到剪切板

    shell  打开 type filename | clip

随机推荐

  1. linux shell 命令学习(3) split - split a file into pieces

    split 用来进行文件分割的指令 split [OPTION]... [INPUT [PREFIX]] 发现这个命令是因为有个需求,有个10W行的文本文件,需要分成5个2w行的文本文件, 查了一下资 ...

  2. 317. Shortest Distance from All Buildings

    题目: Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where th ...

  3. linux系统识别和挂载文件系统

    1. 使用df 命令查看文件系统及相关挂载点信息 [root@server101 ~]# df Filesystem 1K-blocks Used Available Use% Mounted on ...

  4. Linux远程文件传输

    linux系统中,难免会遇到一些要将某文件通过网络传送给其他主机的情况,而恰好两台主机 都是linux系统的时候,我们就可以直接使用scp命令来传输文件到另一台主机了. scp命令用于在网络中安全的传 ...

  5. AE 栅格数据使用总结

    RasterBand)的数据组成,一个波段就是一个数据矩阵.对于格网数据(DEM数据)和单波段的影像数据,表现为仅仅只有一个波段数据的栅格数据集,而对于多光谱影像数据则表现为具有多个波段的栅格数据集. ...

  6. 使用Gson解析复杂的json数据

    Gson解析复杂的json数据 最近在给公司做一个直播APK的项目,主要就是通过解析网络服务器上的json数据,然后将频道地址下载下来再调用Android的播放器进行播放,原先本来打算使用普通的jso ...

  7. git add 之后因为没提交正确文件需要撤销

    之后因为没提交正确文件需要撤销时,采用如下方法:git log //查看提交记录MT6592_L_2SIM_GIT$ git reset --hard 717af7c9664be098939cb266 ...

  8. Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!

      分类: Android高手进阶 Android基础教程 2012-09-14 18:10 29759人阅读 评论(35) 收藏 举报 android相册layoutobjectclassloade ...

  9. 代码开光，Orz

    有一次在cf上看到了,666,- - // // _oo0oo_ // o8888888o // 88" . "88 // (| -_- |) // 0\ = /0 // ___/ ...

  10. 在asp.net前台页面中引入命名空间 和连接数据库

    例如:<%@ Import Namespace="System.Data" %> 连接数据库 <% string strconn = "Data Sou ...