複製網頁內容自動新增版權資訊的方法
阿新 • • 發佈：2018-12-12
現在很多網站都有複製網頁內容自動新增版權資訊，俗稱小尾巴，比如：知乎，簡書，CSDN等
經過查詢和測試發現此程式碼真實有效，利用的是javascript的oncopy事件
本人對大神程式碼進行了改良，現記錄如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>複製網頁內容自動新增版權資訊</title> </head> <body> 分別複製到txt和富文字檢視效果 <div id="answer">測試資料1<b>測試</b></div> <p style="color:red">測試資料2<span style="color:yellow;background-color: #ccc">測試資料3</span></p> <script> /**/ function setClipboardText(event){ event.preventDefault();//阻止元素髮生預設的行為（例如，當點選提交按鈕時阻止對錶單的提交）。 var node = document.createElement('div'); //對documentfragment不熟，不知道怎麼獲取裡面的內容，用了一個比較笨的方式 node.appendChild(window.getSelection().getRangeAt(0).cloneContents()); //getRangeAt(0)返回對基於零的數字索引與傳遞引數匹配的選擇物件中的範圍的引用。對於連續選擇，引數應為零。 var htmlData = '<div>' + node.innerHTML + '<br /><br />著作權歸作者所有。<br />' + '商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。<br />' + '作者：tiantian<br />連結：http://segmentfault.com/u/tiantian_<br />' + '來源：segmentfault<br /><br />' + '</div>'; var textData = window.getSelection().getRangeAt(0) + '\n\n著作權歸作者所有。\n' + '商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。\n' + '作者：tiantian\n' + '來源：segmentfault\n\n'; if(event.clipboardData){ event.clipboardData.setData("text/html", htmlData); //setData(剪貼簿格式, 資料) 給剪貼簿賦予指定格式的資料。返回 true 表示操作成功。 event.clipboardData.setData("text/plain",textData); } else if(window.clipboardData){ //window.clipboardData的作用是在頁面上將需要的東西複製到剪貼簿上，提供了對於預定義的剪貼簿格式的訪問，以便在編輯操作中使用。 return window.clipboardData.setData("text", textData); } }; document.addEventListener('copy',function(e){ setClipboardText(e); }); </script> </body> </html>