IE下使用cloneNode注意事項(xiàng)分享

2024-05-06 14:20:51

字體：大中小

供稿：網(wǎng)友

cloneNode 是 HtmlElement 原型鏈上的方法，用于創(chuàng)建指定 dom 節(jié)點(diǎn)的拷貝，它接受一個(gè)布爾參數(shù) include_all，如果 include_all 設(shè)置為 true，則副本會帶有指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)。

然而，script 標(biāo)簽也是 dom 節(jié)點(diǎn)，cloneNode 對其依然有效，經(jīng)實(shí)測各瀏覽器（尤其是IE）對 cloneNode 執(zhí)行結(jié)果表現(xiàn)不一致，主要現(xiàn)象為以下兩種：

IE，至少是 IE8 及以下，對某節(jié)點(diǎn) cloneNode 時(shí)，如果該節(jié)點(diǎn)包含 script 節(jié)點(diǎn)，那么 script 節(jié)點(diǎn)的腳本內(nèi)容“有可能”會被再次執(zhí)行一次。
非 IE 瀏覽器，cloneNode 某節(jié)點(diǎn)，包含的 script 節(jié)點(diǎn)的腳本內(nèi)容不會被再次執(zhí)行。
IE 以外的瀏覽器表現(xiàn)令我很滿意，而針對于上面所述 IE 的“有可能”，還分以下兩種情況：

如果 cloneNode 一個(gè) script 節(jié)點(diǎn)，無論該節(jié)點(diǎn)是外鏈腳本，還是內(nèi)嵌腳本，均不會被再次執(zhí)行。
如果 cloneNode 一個(gè)其它節(jié)點(diǎn)，該節(jié)點(diǎn)下包含的內(nèi)嵌腳本不會被執(zhí)行，而包含的外鏈腳本，會被再次執(zhí)行一次。
這里有一個(gè) demo 復(fù)現(xiàn)了 IE 下 cloneNode 的這個(gè)問題。

看到這里，你是不是要被繞暈了？解決方法很簡單，不用管是什么瀏覽器，cloneNode 之前，把目標(biāo)節(jié)點(diǎn)下所有的 script 標(biāo)簽移除即可，因?yàn)槟_本已經(jīng)執(zhí)行過，移除它的標(biāo)簽并不會造成影響，如下：

代碼如下:
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) 時(shí)一定要注意思考：所復(fù)制節(jié)點(diǎn)內(nèi)的所有子節(jié)點(diǎn)是否都是需要的？盡量把不需要的都干掉，避免造成負(fù)作用影響，再舉個(gè)例子，如果復(fù)制 div 中包含 iframe，而 iframe 的頁面里有腳本 parent.xxx…，那么 iframe 里的這些腳本必然會再重新執(zhí)行一次，iframe 頁本身沒問題（也不一定），但由于它操作了 parent，那么這個(gè) parent 造成的影響就難以估量了。解決方法是 cloneNode 之后，把副本里包含的 iframe 干掉，當(dāng)然，如果劇情所需，iframe 不能干掉的話，就在 iframe 頁里的腳本自行做判斷了。

另外，cloneNode 目標(biāo)節(jié)點(diǎn)內(nèi)包含 link 標(biāo)簽的話，這個(gè)估計(jì)也會有些影響，我沒有做實(shí)驗(yàn)，如果沒用的話，也是 removeChild 了之，以絕后患。

上一篇：web基于瀏覽器的本地存儲方法應(yīng)用

下一篇：javascript:history.go()和History.back()的區(qū)別及應(yīng)用