首頁 > web前端 > js教程 > IE下使用cloneNode注意事項分享_javascript技巧

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

WBOY
發布: 2016-05-16 17:48:10
原創
1019 人瀏覽過

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 了之,以絕後患。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板