复制网页内容自动添加版权信息的方法

现在很多网站都有复制网页内容自动添加版权信息,俗称小尾巴,比如:知乎,简书,CSDN等

经过查找和测试发现此代码真实有效,利用的是javascript的oncopy事件

本人对大神代码进行了改良,现记录如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>复制网页内容自动添加版权信息</title>
</head>
<body>

    分别复制到txt和富文本查看效果
    <div id="answer">测试数据1<b>测试</b></div>
    <p style="color:red">测试数据2<span style="color:yellow;background-color: #ccc">测试数据3</span></p>

<script>
    /**/
    function setClipboardText(event){
        event.preventDefault();//阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
        var node = document.createElement('div');
        //对documentfragment不熟,不知道怎么获取里面的内容,用了一个比较笨的方式
        node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
        //getRangeAt(0)返回对基于零的数字索引与传递参数匹配的选择对象中的范围的引用。对于连续选择,参数应为零。
        var htmlData = '<div>'
            + node.innerHTML
            + '<br /><br />著作权归作者所有。<br />'
            + '商业转载请联系作者获得授权,非商业转载请注明出处。<br />'
            + '作者:tiantian<br />链接:http://segmentfault.com/u/tiantian_<br />'
            + '来源:segmentfault<br /><br />'
            + '</div>';
        var textData = window.getSelection().getRangeAt(0)
            + '\n\n著作权归作者所有。\n'
            + '商业转载请联系作者获得授权,非商业转载请注明出处。\n'
            + '作者:tiantian\n'
            + '来源:segmentfault\n\n';
        if(event.clipboardData){
            event.clipboardData.setData("text/html", htmlData);
            //setData(剪贴板格式, 数据) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
            event.clipboardData.setData("text/plain",textData);
        }
        else if(window.clipboardData){ //window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上,提供了对于预定义的剪贴板格式的访问,以便在编辑操作中使用。
            return window.clipboardData.setData("text", textData);
        }
    };

    document.addEventListener('copy',function(e){
        setClipboardText(e);
    });
</script>
</body>
</html>

转载自:https://segmentfault.com/q/1010000003986612/a-1020000003994492

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值