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

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

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

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

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



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

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

最新評(píng)論