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

绝地灬酷狼 2022-05-09 02:10 297阅读 0赞

现在很多网站都有复制网页内容自动添加版权信息，俗称小尾巴，比如：知乎，简书，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][https_segmentfault.com_q_1010000003986612_a-1020000003994492]

[https_segmentfault.com_q_1010000003986612_a-1020000003994492]: https://segmentfault.com/q/1010000003986612/a-1020000003994492