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;
  • 相关阅读:
    linux一周学习总结
    浅谈用户、组之管理指令
    关于基因组注释文件GTF的解释
    swiper display:none 后 在显示 滑动问题
    CSS相关
    常用正则表达式
    CSS Flex布局
    原生js去掉所有的html标签,最终得到HTML标签中的所有内容
    python 爬虫与数据可视化--python基础知识
    mongodb的安装与配置
  • 原文地址:https://www.cnblogs.com/fanwenhao/p/9685293.html
Copyright © 2011-2022 走看看