zoukankan      html  css  js  c++  java
  • 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="
    
     原文出自[ 范文皓的个人博客 ] 转载请保留原文链接: <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="
    
     原文出自[ 范文皓的个人博客 ] 转载请保留原文链接: <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;
  • 相关阅读:
    iTestin云测试工具
    android 存储操作 大小显示换算 kb mb KB MB 读取
    android 发送短信 判断号码规则 判断字符数70
    android 震动 各种
    10.13总结
    10.8每日总结
    10.9
    10.15
    10.14
    10.12每日总结
  • 原文地址:https://www.cnblogs.com/fanwenhao/p/9685293.html
Copyright © 2011-2022 走看看