今日想要給博客增加版權(quán)信息，不僅要在每一篇博文的最后添加，還有在博客內(nèi)任一地方的復制功能上添加版權(quán)信息

oncopy 、onpaste、oncut事件

以上事件分別為復制、粘貼、剪切事件，這類事件會返回 ClipboardEvent 事件對象 。

MDNClipboardEvent

這是 MDN 官方的資料，paste事件我在之前我的編輯器里有提到 daiEditor---一鍵生成符合hexo框架markdown文件 ，經(jīng)過我多次測試setData()方法 chrome 是不兼容的。

那么要如何限制在博客內(nèi)的復制功能，添加版權(quán)信息呢

多次嘗試之后，才注意到一個細節(jié)：
oncopy、oncut、onpaste事件的出發(fā)時間都是在實際 復制、剪切、 粘貼操作之前！之前?。≈埃。?！觸發(fā)的，重要的事情要講三遍。

開發(fā)思路：那么想要在復制時追加自己的版權(quán)信息，只需要修改我們選中的內(nèi)容就好了

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

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


    // 獲取選中范圍 調(diào)用cloneContents()方法復制 DocumentFragment 對象，獲取選中 html格式內(nèi)容
    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;

第二步：添加版權(quán)信息

     // 添加版權(quán)信息后綴
    copytext += `
<br><br>
    作者: 貓十一 <br>
    鏈接：${location.href} <br>
    來源：<a >貓十一の紙盒子</a> <br>
    著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。`;

第三部：添加一個隱藏的div，將修改的內(nèi)容添加進去，再修改瀏覽器的選中內(nèi)容就可以了

    // 添加隱藏的div 修改瀏覽器的選中內(nèi)容 以供復制
    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);
}

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