置顶文章

JavaScript监听页面复制事件添加版权信息

1. 最后一次更新与：2020-08-28 11:47
2. 发布与：2019-07-24 15:00
3. By 大脸猫
4. In JavaScript 小技巧 代码 前端 document
5. Look 19768访问

---

JavaScript监听页面复制事件添加版权信息这个功能可以使得我们的文章以及代码可以更好的得到宣传。

1.介绍

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

2.实现方法

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

document.oncopy = addLink;

捕捉到复制事件后我们还需要在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;

=====================

---

JavaScript监听页面复制事件添加版权信息：https://www.yzdlm.com/web/54.html

作者：大脸猫 分类: web开发

---

上一篇：如何通过JavaScript获取搜索引擎搜索关键词 下一篇：前端程序员应该往全栈方向发展吗？还是坚守前端？