IE下使用cloneNode注意事項分享

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 了之，以絕後患。