【php】在知乎复制的文本为什么会自带一些版权声明，这个功能是如何实现的?

Z时代
2024-01-10
分类：技术分享

比如说我复制的

123456

最后出现的是
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：stevenliuyi
链接：http://www.zhihu.com/question/20451870/answer/15168034
来源：知乎

123456

回答

大体思路：

答案区域监听copy事件，并阻止这个事件的默认行为。

获取选中的内容（window.getSelection()）加上版权信息，然后设置到剪切板（clipboardData.setData()）。

下面的代码实现了一个简单的DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div id="answer">测试数据<b>test</b></div>
    <script>
        function setClipboardText(event){ 
            event.preventDefault();
            var node = document.createElement('div');
            //对documentfragment不熟，不知道怎么获取里面的内容，用了一个比较笨的方式
            node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
            var htmlData = '<div>著作权归作者所有。<br />' 
                            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br />'
                            + '作者：tiantian<br />链接：http://segmentfault.com/u/tiantian_<br />'
                            + '来源：segmentfault<br /><br />' 
                            + node.innerHTML 
                            + '</div>';
            var textData = '著作权归作者所有。\n' 
                            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
                            + '作者：tiantian\n链接：http://segmentfault.com/u/tiantian_\n'
                            + '来源：segmentfault\n\n' 
                            + window.getSelection().getRangeAt(0);
            if(event.clipboardData){  
                event.clipboardData.setData("text/html", htmlData); 
                event.clipboardData.setData("text/plain",textData);
            }
            else if(window.clipboardData){  
                return window.clipboardData.setData("text", textData);  
            }  
        };  
        var answer = document.getElementById("answer");
        answer.addEventListener('copy',function(e){
            setClipboardText(e);
        });
    </script>
</body></html>

看了知乎的代码，大致也是这么实现的，但是还加入了一些其他的判断，比如如果答案设置了不能复制，则阻止copy事件，并显示提示信息，如果复制的文本长度小于42的话，不会加上版权信息。

copy事件可以参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/oncopy
http://codebits.glennjones.net/editing/setclipboarddata.htm

直接贴代码吧，兼容各种浏览器，还解决了换行问题~

<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
    {
      var selected = window.getSelection();
      var selectedText = selected.toString().replace(/\n/g, '<br>');  // Solve the line breaks conversion issue
      var copyFooter = '<br>---------------------<br>著作权归作者所有。<br>' 
                            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
                            + '作者：Bravo Yeung<br> 源地址：' + document.location.href
                            + '<br>来源：博客园cnblogs<br>© 版权声明：本文为博主原创文章，转载请附上博文链接！';
      var copyHolder = $('<div>', {id: 'temp', html: selectedText + copyFooter, style: {position: 'absolute', left: '-99999px'}});
      $('body').append(copyHolder);
      selected.selectAllChildren( copyHolder[0] );
      window.setTimeout(function() {
          copyHolder.remove();
      },0);
    });</script>