js监听页面copy事件添加版权信息

个人博客 地址:http://www.wenhaofan.com/article/20180921103346

1.介绍

当页面需要做版权保护时，比如当用户copy我们网站的文章时，我们会希望在他copy的文章内容中添加一些版权信息，例如我们的网站地址。

2.实现方法

首先我们需要捕捉到用户的copy事件,这里我们可以使用document.oncopy来绑定触发事件,此时执行复制操作时将会触发addLink方法,addLink方法中将包含所有处理步骤

    document.oncopy = addLink;

捕捉到copy事件后我们还需要在addLink事件执行一些操作

    function addLink() {
    var body_element = document.body;
    var selection;
    selection = window.getSelection();

    var locationHref=document.location.href;
    var appendLink="\r\n\r\n 原文出自[ 范文皓的个人博客 ] 转载请保留原文链接: <a href='"+locationHref+"'>"+locationHref+"</a>";
    if (window.clipboardData) { // Internet Explorer
        var copytext = selection + appendLink;
        window.clipboardData.setData ("Text", copytext);
        return false;
    } else {
        var copytext = selection + appendLink;
        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);
    }
}

在上面的代码中使用了两种方法来兼容各种浏览器

1.直接通过浏览器接口操作剪切板，该方法在chrome firefox等版本较高的ie中可用

2.修改用户选中的内容 该方法基本上兼容所有浏览器

当浏览器不能直接操作剪切板时便会使用第二种方法来确保追加生效

3.完整代码

    function addLink() {
    var body_element = document.body;
    var selection;
    selection = window.getSelection();

    var locationHref=document.location.href;
    var appendLink="\r\n\r\n 原文出自[ 范文皓的个人博客 ] 转载请保留原文链接: <a href='"+locationHref+"'>"+locationHref+"</a>";
    if (window.clipboardData) { // Internet Explorer
        var copytext = selection + appendLink;
        window.clipboardData.setData ("Text", copytext);
        return false;
    } else {
        var copytext = selection + appendLink;
        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;