前言
几年前,因为浏览器不具备直接访问剪贴板的能力,开发者只能借助于Flash插件来提供这一基本功能。
乍一看开放剪贴板权限似乎没什么危害,但试想如果浏览器能随意查看和操作剪贴板内容的话,页面脚本(包括第三方脚本)岂不是就能轻松偷窥其中的信息然后将密码,敏感信息,甚至整个页面发送给远端的服务器了。
现在,我们已经可以整合基本的剪贴板功能,但还是有一些限制:
1.大部分浏览器支持剪贴板功能,Mac和iOS上的Safari除外。
2.不同浏览器的支持程度不尽相同,一些功能并不完整或存在缺陷。
3.用户必须通过点击鼠标或按键的方式来主动触发,脚本并不能随时操纵剪贴板。
实现方式
一、document.execCommand() 方法
function copylink ( ) {
var copyDOM = document.getElementByld ( ' copy _ content ' + riderFlag);
var range = document.creatRange();
var selection = window.getSelection();
range.selectNode(copyDOM);
var successful = document.execCommand('copy');
try{
var msg = successful ? '成功' : ‘失败’;
$("#share_box").hide();
showCopySuc();
} catch(err){
alert('复制链接失败')
}
window.getSelection().removeAllRanges();
二、clipboard.js插件
clipboard.js 是一个不依赖 Flash,将文本复制到剪贴板的插件,仅仅 2kb。
参考代码
function copylink() {
var clipboard = new Clipboard('.share_ticket' + riderFlag);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
showCopySuc();
e.clearSelection();
});
clipboard.on('error', function(e) {
if(isNull(e.text)) {
alertSureDialog(e.text + '</br></br>请手动长按复制链接!');
}
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}