你知道 cloneNode() 可以把網頁搞壞嗎?!
最近遇到一件神奇的事，重現方法如下：
- 開啟 Youtube 首頁。
- 確認 Youtube 各影片旁「⁝」三豎點狀的地方點擊會跳出操作影片的右鍵選單。
- 打開瀏覽器控制台，執行以下程式碼 clone 頁面元素：
document.documentElement.cloneNode(true); - 現在點擊「⁝」再也不會跳出右鍵選單了。
在 Firefox 和 Google Chrome 最新版都發生同樣問題。
以上是簡化的重現問題步驟，實際上的使用情境是撰寫瀏覽器套件時，想透過 cloneNode 擷取頁面的 DOM 資訊作整理、分析和再利用。
按常理來看 cloneNode 應該不會影響頁面啊……難道 Youtube 有程式碼能偵測頁面 clone 物件？
經過一番調查及請教各路大神，總算找到答案了……。
這問題的關鍵在於：有沒有什麼 JavaScript 腳本會在 cloneNode 時被觸發？
找來找去，還真的有：customElement 的 constructor 會在自訂元素建立時執行！而一但有腳本執行，就有可能發生干擾或衝突了。
雖然還沒徹查 YouTube 的 JavaScript 腳本，但初步發現 YouTube 有使用 Polymer Project，而 Polymer Project 會利用 customElement 做網頁元素的控制。
按此，先建立一個新的 document 再 importNode 這問題就解決了。
另外還有個類似的東西是 MutationObserver，可以監控網頁中任何 DOM 變化，因此如果網頁本身要控制或禁止第三方工具插入或改寫內容，是有可能做到的。
一個 cloneNode 都可以把網頁搞壞，真是令人驚呆（單押）。前端的領域真是博大精深啊～
留言
張貼留言
1.本格歡迎任何留言，只有廣告和垃圾留言會刪。
2.希望您盡量留下代稱，以方便大家討論、回覆。
3.如果您打算長篇大論，建議在您自己的部落格貼文，然後留下連結和摘要。