js复制链接

前言

几年前,因为浏览器不具备直接访问剪贴板的能力,开发者只能借助于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 + '

请手动长按复制链接!'); } console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); }

你可能感兴趣的:(js复制链接)