复制粘贴你真的会用么？--- 给你的博文添加版权信息

今日想要给博客增加版权信息，不仅要在每一篇博文的最后添加，还有在博客内任一地方的复制功能上添加版权信息 oncopy 、onpaste、oncut事件 以上事件分别为复制、粘贴、剪切事件，这类事件会返回 ClipboardEvent 事件对象 。 MDNClipboardEvent 这是 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 += `

作者: 猫十一
链接：${location.href}
来源：猫十一の纸盒子
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`; 第三部：添加一个隐藏的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); } 这是我的博客【猫十一の纸盒子】，欢迎学习交流

本文章由javascript技术分享原创和收集