IE下使用cloneNode注意事項(xiàng)分享
更新時(shí)間:2012年11月22日 15:02:43 作者:
在開(kāi)發(fā)百度“地裂特效”時(shí),發(fā)現(xiàn)了一些匪夷所思的 bug,第一反應(yīng)是特效本身的代碼與頁(yè)面上原有的腳本發(fā)生了沖突,經(jīng)過(guò)調(diào)試發(fā)現(xiàn),問(wèn)題出現(xiàn)在 cloneNode 的應(yīng)用上
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ì)造成影響,如下:
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);
}
因此,我們?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 了之,以絕后患。
然而,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ì)造成影響,如下:
復(fù)制代碼 代碼如下:
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);
}
因此,我們?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 了之,以絕后患。
相關(guān)文章
layui動(dòng)態(tài)渲染生成select的option值方法
今天小編就為大家分享一篇layui動(dòng)態(tài)渲染生成select的option值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
兩款JS腳本判斷手機(jī)瀏覽器類(lèi)型跳轉(zhuǎn)WAP手機(jī)網(wǎng)站
本文通過(guò)兩款js腳本判斷手機(jī)瀏覽器類(lèi)型跳轉(zhuǎn)到wap手機(jī)網(wǎng)站,感興趣的小伙伴快來(lái)學(xué)習(xí)吧2015-10-10
js bind 函數(shù) 使用閉包保存執(zhí)行上下文
在javascript中,函數(shù)總是在一個(gè)特殊的上下文執(zhí)行(稱為執(zhí)行上下文),如果你將一個(gè)對(duì)象的函數(shù)賦值給另外一個(gè)變量的話,這個(gè)函數(shù)的執(zhí)行上下文就變?yōu)檫@個(gè)變量的上下文了。下面的一個(gè)例子能很好的說(shuō)明這個(gè)問(wèn)題2011-12-12
javascript提取URL的搜索字符串中的參數(shù)(自定義函數(shù)實(shí)現(xiàn))
我們經(jīng)常會(huì)看到有的頁(yè)面鏈接地址后面會(huì)跟有參數(shù),很多時(shí)候我們需要獲得這些參數(shù)的值,接下來(lái)將介紹獲取方法,感興趣的朋友可以了解系,希望本文對(duì)你有所幫助2013-01-01
JS實(shí)現(xiàn)帶有抽屜效果的產(chǎn)品類(lèi)網(wǎng)站多級(jí)導(dǎo)航菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶有抽屜效果的產(chǎn)品類(lèi)網(wǎng)站多級(jí)導(dǎo)航菜單代碼,涉及JavaScript動(dòng)態(tài)操作頁(yè)面元素屬性的技巧,整體界面效果美觀大方,具有極強(qiáng)的立體感,需要的朋友可以參考下2015-09-09
javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)
下面小編就為大家?guī)?lái)一篇javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07

