IE下使用cloneNode注意事項分享_javascript技巧

cloneNode 是 HtmlElement 原型鏈上的方法，用於建立指定 dom 節點的拷貝，它接受一個布林參數 include_all，如果 include_all 設為 true，則副本會帶有指定節點的所有子節點。

然而，script 標籤也是dom 節點，cloneNode 對其依然有效，經實測各瀏覽器（尤其是IE）對cloneNode 執行結果表現不一致，主要現象為以下兩種：

IE，至少是IE8 及以下，對某節點cloneNode 時，如果該節點包含script 節點，那麼script 節點的腳本內容「有可能」會再次執行一次。
非 IE 瀏覽器，cloneNode 某節點，包含的 script 節點的腳本內容不會再執行一次。
IE 以外的瀏覽器表現令我很滿意，而針對於上面所述IE 的“有可能”，還分以下兩種情況：

如果cloneNode 一個script 節點，無論該節點是外鏈腳本，還是內嵌腳本，均不會再次執行。
如果 cloneNode 一個其它節點，則該節點下包含的內嵌腳本不會被執行，而包含的外鏈腳本，會再次執行一次。
這裡有一個 demo 復現了 IE 下 cloneNode 的這個問題。

看到這裡，你是不是要被繞暈了？解決方法很簡單，不用管是什麼瀏覽器，cloneNode 之前，把目標節點下所有的script 標籤移除即可，因為腳本已經執行過，移除它的標籤並不會造成影響，如下：

複製程式碼 程式碼如下:

function cloneNode(dom){ var scripts dom.getElementsByTagName("script");
for(var i = scripts - 1, s; i >= 0; i --){
s = scripts[i];
s.parentNode. removeChild(s);
}
return dom.cloneNode(true);
}

因此，我們在使用cloneNode(true) 時一定要注意思考：所複製節點內的所有子節點是否都是需要的？盡量把不需要的都乾掉，避免造成負作用影響，再舉個例子，如果複製div 中包含iframe，而iframe 的頁面裡有腳本parent.xxx…，那麼iframe 裡的這些腳本必然會再重新執行一次，iframe 頁本身沒問題（也不一定），但由於它操作了parent，那麼這個parent 造成的影響就難以估量了。解決方法是 cloneNode 之後，把副本裡包含的 iframe 幹掉，當然，如果劇情所需，iframe 不能幹掉的話，就在 iframe 頁裡的腳本自行做判斷了。

另外，cloneNode 目標節點內包含 link 標籤的話，這個估計也會有些影響，我沒有做實驗，如果沒用的話，也是 removeChild 了之，以絕後患。