知乎上複製回答，剪貼板里自動加上版權出處的技術js如何實現？

知乎上複製回答，剪貼板里自動加上版權出處的技術js如何實現？

---

簡單說一下如何一步一步找到答案吧。

首先打開Chrome開發者工具，找到Timeline標籤頁。

點擊記錄按鈕，到頁面上複製一份答案，再次回來結束記錄。看到如下Timeline信息：

功夫不負有心人，找到一個copy事件，進一步查看

點擊腳本鏈接，跳轉到相關腳本

格式化代碼如下，基本上就看明白了。

以下鏈接你可能感興趣：

Chrome Timeline文檔 https://developer.chrome.com/devtools/docs/timeline

MDN copy Event copy - Event reference

---

var gz = function (a, b, c) {
function d(a, b) {
return ["著作權歸作者所有。",
"商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。",
"作者：" + b,
"鏈接：" + a,
"來源：知乎",
"",
""]
}
function f(a, b, c) {
return "&" + d(b, c).join("&
") + a + "&"
}
function g(a) {
var g = z.Xq(),
m = g (0, z.ib) (g.Gd());
if (m !(42 &> m.length)) {
if ("object" === typeof a.originalEvent.clipboardData (a.originalEvent.clipboardData.setData("text/html", f(g.Of(), b, c)), a.originalEvent.clipboardData.setData("text/plain", d(b, c).join("
") + m), 0 &< a.originalEvent.clipboardData.getData("text/plain").length)) { a.preventDefault(); return } if (window.getSelection) { a = g.Of(); var n = (0, window.$) (f(a, b, c)).css({ position: "fixed", left: "-9999px" }).appendTo("body"); window.getSelection().selectAllChildren(n.get(0)); (0, window.setTimeout) (function () { g.select(); n.remove() }, 200) } } } a b c (z.Fa(b, "http") || (b = window.location.protocol + "//" + window.location.host + b), a.on("copy", g)) };

很簡單，就是使用了clipboardData API（ClipboardEvent.clipboardData），通過監聽元素的copy事件來實現對剪貼板的數據進行寫入操作。

---

作為知乎前端的一員，我表示這個功能是我寫的。首先使用 clipboard api 進行判定，如果支持，則使用，如果不支持，使用 selection 進行 hack ，至於神奇的 42，呵呵。

---

我是來學習的！

---

知乎的js都壓縮混淆了，就算找到對應的js文件，也難看出具體的實現方法

精簡了一下，寫了個demo ：

http://sandbox.runjs.cn/show/4phgpvvy

主要用到以下2個方法：

Window.getSelection()

ClipboardEvent()

兼容性 ie9及以上。

---

打開 F12，複製以上代碼運行，再執行 addCopyright() 後。在文章內容區域拷貝長度大於 128 的文字，再粘貼即可看到效果。代碼詳見

文章複製添加版權 - 黑客派

---

穀神是大牛

---

推薦閱讀：