最近客户提出来要将当前页面的url 复制到剪切板，然后直接打开其他浏览器标签粘贴播放的需求，但是上网找了很多例子都不好使（浏览器兼容），网上的的现有方案大致有两种：
一：使用原生JavaScript中window.clipboardData实现复制到剪贴板功能，但是仅仅支持ie浏览器，在firefox,chrome浏览器上则不起作用
二：使用Zero Clipboard库，它是基于 Flash 来实现跨浏览器的复制功能的，但是在现代浏览器中，flash逐渐没落，firefox浏览器默认不开启flash，所以Zero Clipboard在兼容方面也表现不佳
最后在一个牛人的博客上找到了这个可以兼容各大浏览器的好方法，测试之后找到一个比较通用、适用的方法，（但是有个问题，就是复制的内容元素不能设置隐藏样式，否则功能不好用，暂时也没找到解决办法）功能做完之后记录一下方便日后自己和其他人使用，直接上代码，还有demo 举例可自行下载：http://download.csdn.net/detail/csdn_cjgu/9699601
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>function-target</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <button class="btn">Copy</button> <div>hello</div> <!-- 2. Include library --> <script src="../dist/clipboard.min.js"></script> <!-- 3. Instantiate clipboard --> <script> var clipboard = new Clipboard('.btn', { target: function() { return document.querySelector('div'); } }); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </body> </html>非常简单实用，引入js （clipboard.min.js），将功能嵌入自己的页面即可
也可以在复制成功和复制失败方法中加入提示，例如：
//我们定义两个成功和失败需要显示的div <div class='copyTipSuc'>☺ 复制成功</div> <div class='copyTipFail'>复制失败！</div> //定义提示的样式和位置 .copyTipSuc{ position: absolute; width: 78px; z-index: 100; background-color: #ffffff; border: 1px solid #ddacac; font-size: 12px; border-radius: 3px; padding: 3px; top: 44px; left: 680px; display:none; } //成功后弹出提示 clipboard.on('success', function(e) { $(".copyTipSuc").fadeIn("slow"); setTimeout(function(){ $(".copyTipSuc").fadeOut("slow"); },1000); });done! ☺☺☺☺☺
