网站内容复制(2017款之前.js需在插件方案 )

　　网站内容复制(2017款之前.js需在插件方案

)

　　我最近在项目中遇到这样一个需求：

　　点击按钮将指定的URL复制到剪贴板，然后用户可以将其粘贴到浏览器（主要是Safari）中自行打开。

　　选项 1：zeroClipboard.js

　　github地址：

　　复制原理：zeroClipboard使用透明flash覆盖复制按钮，点击flash，将复制的内容传入flash，然后通过flash将传入的内容写入剪贴板

　　我想到这个插件的第一个原因是我之前在PC端项目中使用过它。兼容性好，熟悉，所以先用它做个demo

　　HTML

复制链接

　　JAVASCRIPT

　　 (function(){

var btn = document.getElementById('copyUrlBtn'),

text = document.getElementById('iUrl'),

zc = new ZeroClipboard(btn);

zc.on('beforecopy', function(e){

zc.setText(text.value);

});

btn.onclick = function(){

alert('已复制');

}

})();

　　使用zeroClipboard.js注意以下两点：

　　1#ZeroClipboard.swf和ZeroClipboard.min.js需要在同一个目录结构中，ZeroClipboard.swf不需要调用，在页面中引用ZeroClipboard.min.js即可；

　　2#测试复制功能需要在服务器环境，可以是简单的本地服务器，如：8000/xx

　　测试结果：

　　在PC浏览器上测试，功能正常；但是在ios上，QQ浏览器和Safari浏览器都不能实现复制功能。

　　可能是因为Flash技术被各大浏览器厂商忽视了，目前最新版本的ZeroClipboard.js还无法在手机浏览器中实现文本复制。

　　选项 2：Clipboard.js

　　官网地址：

　　兼容性：

　　虽然要求safari版本在10以上，但是作者已经做了一个很好的优雅降级：

　　好消息是，如果您需要支持旧版浏览器，clipboard.js 会优雅地降级。您所要做的就是显示一个工具提示，上面写着已复制！当调用成功事件时，在调用错误事件时按 Ctrl+C 复制，因为文本已被选中。

　　也就是说，如果Safari版本在10以上，直接复制即可；如果版本小于10，可以通过以下代码提示用户手动复制：

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

alert('请选择“拷贝”进行复制!')

});

　　Safari 10以下版本的效果：

　　alert('请选择“复制”复制！')后，会自动选择要复制的文字，然后会弹出系统本身的tooltip

　　效果如下：

　　演示：

　　HTML：

复制

　　JAVASCRIPT：

　　 //init

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

//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制

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

alert('复制成功!')

e.clearSelection();

});

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

alert('请选择“拷贝”进行复制!')

});

　　2017/08/25 后续补充：

　　最近很多朋友通过短信和邮件问我，为什么我不能用Clipboard.js在Android手机上复制？

　　其实按照本文的demo说明，是完全可以的；

　　只是很多朋友没有把要复制的内容放到输入框中，导致无法在安卓手机上复制。

　　拼写错误：

　　<p id="foo">这里是需要复制的文本

</p>

　　正确的拼写：

　　2018/05/14更新：我的小程序【阳光投票】已经上线，欢迎大家体验建议！