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;