js实现复制页面内容自动添加版权信息文字

很多前端技术博客有这样的处理，当我们复制代码或者文章内容的时候，都会自动加上一段文本信息版权，像下面这样：

这是如何实现的呢？

其实实现的方式很简单，可以在我们的网站页面上绑定一个copy事件，当你复制文章内容的时候，自动在剪切板文字后面加上一段版权声明就 OK 啦。

这里我整理出两种方式实现，皆可直接拿去使用，仅供大家参考学习。

第一种方式

function addLink() {
    var body_element = document.body;
    var selection;
    //var selection = window.getSelection();
    var blogName = '[ 码云笔记技术博客 ]'; // 此处修改成你自己网站的名称
    selection = window.getSelection() ? window.getSelection() : document.selection.createRange().text;
    if (window.clipboardData) { // Internet Explorer
        var pagelink = "\n\n 原文出自" + blogName + " 转载请保留原文链接: " + document.location.href + "";
        var copyText = selection + pagelink;
        window.clipboardData.setData("Text", copyText);
        return false;
    } else {
        var pagelink = " 原文出自" + blogName + " 转载请保留原文链接: " + document.location.href + "";
        var copyText = selection + pagelink;
        var newDiv = document.createElement('div');
        newDiv.style.position = 'absolute';
        newDiv.style.left = '-99999px';
        body_element.appendChild(newDiv);
        newDiv.innerHTML = copyText;
        selection.selectAllChildren(newDiv);
        window.setTimeout(function() {
            body_element.removeChild(newDiv);
        },
        0);
    }
}
document.oncopy = addLink;

第二种方式

// 监听整个网页的 copy(复制)事件
document.addEventListener('copy',function(event) {
    // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
    let clipboardData = event.clipboardData || window.clipboardData;
    // 如果未复制或者未剪切，则 return 出去
    if (!clipboardData) {
        return;
    }
    // Selection 对象，表示用户选择的文本范围或光标的当前位置。
    // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
    let text = window.getSelection().toString();
    if (text) {
        // 如果文本存在，首先取消文本的默认事件
        event.preventDefault();
        // 通过调用常 clipboardData 对象的 setData(format, data) 方法；来设置相关文本
        // setData(format, data);参数
        // format
        // 一个 DOMString 表示要添加到 drag object 的拖动数据的类型。
        // data
        // 一个 DOMString 表示要添加到 drag object 的数据。
        clipboardData.setData('text/plain', text + '\n\n 码云笔记 版权所有');
    }
});

以上代码相关参数详解

element.addEventListener(type, handle, false);

• type: 事件触发类型，如click，keypress等等，下面我们详细的讲讲事件类型！！
• handle:事件处理函数，事件出发后，定义可能发生的变化！！
• false: 表示事件冒泡模型，一般来说都是 false。

lipboardData

clipboardData 属性保存了一个 DataTransfer 对象（用户剪切板的内容），这个对象可用于：

• 描述哪些数据可以由 cut(en-US) 和 copy(en-US) 事件处理器放入剪切板，通常通过调用 setData(format, data) 方法；
• 获取由 paste(en-US) 事件处理器拷贝进剪切板的数据，通常通过调用 getData(format) 方法

format数据类型有：text/plain，text/uri-list。data表示要添加到剪切板的数据。

event.preventDefault()

event.preventDefault()方法阻止元素发生默认的行为。

例如：

• 当点击提交按钮时阻止对表单的提交
• 阻止以下 URL 的链接