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;