複製粘貼你真的會用麼？--- 給你的博文添加版權信息

今日想要給博客增長版權信息，不只要在每一篇博文的最後添加，還有在博客內任一地方的複製功能上添加版權信息

oncopy 、onpaste、oncut事件

以上事件分別爲複製、粘貼、剪切事件，這類事件會返回 ClipboardEvent 事件對象 。

這是 MDN 官方的資料，paste事件我在以前個人編輯器裏有提到 daiEditor---一鍵生成符合hexo框架markdown文件 ，通過我屢次測試setData()方法 chrome 是不兼容的。

那麼要如何限制在博客內的複製功能，添加版權信息呢

屢次嘗試以後，才注意到一個細節： oncopy、oncut、onpaste事件的出發時間都是在實際 複製、剪切、 粘貼操做以前！以前！！以前！！！觸發的，重要的事情要講三遍。

開發思路：那麼想要在複製時追加本身的版權信息，只須要修改咱們選中的內容就行了

第一步：瀏覽器添加copy事件，先獲取最早選中的 html 格式的內容

window.addEventListener('copy', function(event) {    
    // 獲取瀏覽器選中部分
    const selection = window.getSelection();


    // 獲取選中範圍 調用cloneContents()方法複製 DocumentFragment 對象，獲取選中 html格式內容
    const range = selection.getRangeAt(0);
    const docFragment = range.cloneContents();
    const hiddenBox = document.createElement('div'); 
    hiddenBox.style.position='absolute'; 
    hiddenBox.style.left='-99999px'; 
    
    hiddenBox.appendChild(docFragment);    
    let copytext = hiddenBox.innerHTML;
複製代碼

第二步：添加版權信息

     // 添加版權信息後綴
    copytext += ` <br><br>     做者: 貓十一 <br>     連接：${location.href} <br>     來源：<a href="https://db324246.github.io/">貓十一の紙盒子</a> <br>     著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。`;
複製代碼

第三部：添加一個隱藏的div，將修改的內容添加進去，再修改瀏覽器的選中內容就能夠了

    // 添加隱藏的div 修改瀏覽器的選中內容 以供複製
    var newdiv = document.createElement('div'); 
    newdiv.style.position='absolute'; 
    newdiv.style.left='-99999px'; 


    document.body.appendChild(newdiv); 
    newdiv.innerHTML = copytext; 


    selection.selectAllChildren(newdiv); 


    window.setTimeout(function() { 
      document.body.removeChild(newdiv); 
    },0);
}
複製代碼

這是個人博客【貓十一の紙盒子】，歡迎學習交流