通过Javascript为文章的复制添加版权信息

简单说一下如何在网页文章中通过 JavaScript 监听用户的复制操作，并在复制的内容追加版权信息。
网上现在的文章大多数是用 window.clipboardData.getData("Text");来实现获取复制内容，如下。但目前为止，好像只有 IE 浏览器支持这种方法。像目前主流的浏览器 Chrome、Firefox 这些浏览器，为了用户的隐私，都已经不支持这种方法了。

 //仅支持IE的版权追加代码
  <script type="text/javascript"> 
    document.body.oncopy = function(){ 
      setTimeout( 
        function (){ 
          var text = window.clipboardData.getData("Text");
        if(text){ 
          text = text + "\r\n本文来自: (www.jb51.net) 详细出处参考："+location.href; clipboardData.setData("text", text); 
        } 
      },100) 
    } 
  </script> 

那么既然没办法直接通过 API 接口获取用户的剪切板数据，那就只有找其他的方法了。
首先走一下用用户复制文章的流程
用户选择需要复制的文字 ---------> 用户复制操作 ------------> 复制内容添加到用户的剪贴板

既然流程有了，那我们就根据用户的流程，来设计一下代码：
1、首先，用户选择需要复制的文字，那我们就编写Javascript来监听用户选择的内容：

//仅支持IE的版权追加代码
<script type="text/javascript"> 
    document.οnmοuseup=function(e){
        content=window.getSelection().toString();
     }
</script> 

2、用户选择了需要复制的文字之后，下一步便是复制操作了，那我们就获取用用户的复制操作，在用户复制的时候，将用户选择的文字，加上我们的版权信息，一起添加到用户的剪切板：
//监听用户的复制操作，拼接内容

document.body.oncopy = function(){ 
        setTimeout( 
          function (){ 
            var text = 用户选择的文字;
          if(text){ 
            text = text + "\r\n作者： {author}"+  "\r\n链接" + location.href + "、\r\n来源：刘欣的代码笔记" + "\r\n 协议：CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/" ; 
            copyToClipboard(text); 
          } 
        },100) 
} 
//将文本添加到剪切板函数
const copyToClipboard = str => {
        const el = document.createElement('textarea');
        el.value = str;
        el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        const selected =
          document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        if (selected) {
          document.getSelection().removeAllRanges();
          document.getSelection().addRange(selected);
        }
};

最终代码实现

  <script type="text/javascript"> 
      var content = "";
      document.οnmοuseup=function(e){
        content=window.getSelection().toString();
      }
      document.body.oncopy = function(){ 
        setTimeout( 
          function (){ 
            var text = content;
          if(text){ 
            text = text + "\r\n作者： {author}"+  "\r\n链接" + location.href + "、\r\n来源：刘欣的代码笔记" + "\r\n 协议：CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/" ; 
            copyToClipboard(text); 
          } 
        },100) 
      } 
      const copyToClipboard = str => {
        const el = document.createElement('textarea');
        el.value = str;
        el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        const selected =
          document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        if (selected) {
          document.getSelection().removeAllRanges();
          document.getSelection().addRange(selected);
        }
      };
    </script> 

效果：

 

那么既然没办法直接通过 API 接口获取用户的剪切板数据，那就只有找其他的方法了。
首先走一下用用户复制文章的流程
用户选择需要复制的文字 ---------> 用户复制操作 ------------> 复制内容添加到用户的剪贴板
既然流程有了，那我们就根据用户的流程，来设计一下代码：
1、首先，用户选择需要复制的文字，那我们就编写Javascript来监听用户选择的内容：
作者： 141Mr-liu
链接https://www.liuxincode.cn/articles/2019/11/07/1573056661091.html、
来源：刘欣的代码笔记
协议：CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/
 

 原文地址：https://www.liuxincode.cn/articles/2019/11/07/1573056661091.html