DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> IE下使用cloneNode注意事項分享
IE下使用cloneNode注意事項分享
編輯:關於JavaScript     
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 了之,以絕後患。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved