危险:IE下使用cloneNode注意事项

标签: Javascript | 发表时间:2012-06-26 08:00 | 作者:Administrator
出处:http://www.scriptlover.com
在开发百度“地裂特效”时,发现了一些匪夷所思的 bug,第一反应是特效本身的代码与页面上原有的脚本发生了冲突,经过调试发现,问题出现在 cloneNode 的应用上。


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 了之,以绝后患。

来自: http://nus40g1.chinaw3.com

相关 [ie clonenode 注意] 推荐:

危险:IE下使用cloneNode注意事项

- - 脚本爱好者
在开发百度“地裂特效”时,发现了一些匪夷所思的 bug,第一反应是特效本身的代码与页面上原有的脚本发生了冲突,经过调试发现,问题出现在 cloneNode 的应用上. cloneNode 是 HtmlElement 原型链上的方法,用于创建指定 dom 节点的拷贝,它接受一个布尔参数 include_all,如果 include_all 设置为 true,则副本会带有指定节点的所有子节点.

IE 16岁了

- yuguichun123 - cnBeta.COM
Firefox 6正式版的发布引来了诸多关注,但悄无声息之中,Internet Explorer迎来了自己的16周岁生日――Mozilla,你才应该是送蛋糕的那个. 1995年8月16日(美国当地时间),微软发布了第一个版本的Internet Explorer. 其实,IE并不是微软完全自主开发的产品,而是花了200万美元购买Spyglass Mosaic浏览器的授权,然后修改而来.

IE 浏览器的创新

- - 博客 - 伯乐在线
译者按:IE 曾是 web 创新的先驱,但最近几年因为对 web 标准的支持落后于其他 浏览器以及低版本 IE 的各种 bug 而被人诟病. Zakas 带我们回顾了 IE 在 web 发展过程中扮演的辉煌角色,让我们能以一个更客观的眼光来看待 IE. 看完这篇文章,也许大家都会对 IE 浏览器有一定的改观,这也是我翻译这篇文章的目的.

奇怪的 IE Cookie 设置

- - IE浏览器中文网站
今天接到一个奇怪的问题,所有的浏览器都可以正常执行,唯独在 IE10 浏览器下运行会有问题,花了一些时间找问题到底是什么,这篇记录一下,希望能帮到不小心路过的网友. 经过一番 IE8, IE10, Chrome, Firefox 交叉测试后,发现 IE8 的状态栏有个小小的安全性提示(本来要截图,结果 … 选了接受 cookie 就 … 看不到图了),幸好有使用 IE8 做测试,真是不幸中的大幸,IE10 完全自己暗槓起来什么都不说啊 ~~~.

IE CSS文件限制

- - Web前端 - ITeye博客
单个页面最多31个css文件. 每个css文件大小最大288k. 每个css文件最多4095个选择器. Resource merging, which help you reduce the number of requests made to the server, may bring the following dilemma in IE.

IE中Image .onload方法问题

- 红茶 - WEB前端开发
因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的. 先写onload方法,再指定这张图片的URL,这样就正常了. 所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了.

jQuery2.0将不再支持IE 6/7/8

- - 脚本爱好者
jQuery 官方发布了下一阶段 jQuery 的路线图,该路线图显示 jQuery 1.8 将在一个月内发布,而其他后续版本的计划如下:. jQuery 1.9 (early 2013): 该版本将移除所有在 1.8 版本中废弃的接口,其他一些可能做为插件或者可选 API 使用,将继续支持 IE 6/7/8.

Chrome用户比IE用户更聪明?

- - 创意科技 - 果壳网
Calcudoku 根据2010年至2011年间该网站的数独解谜数据,对使用不同浏览器的用户进行了分析. 结果显示,在推解该网站的数独题时,Chrome用户的表现要好于其他浏览器用户. 从Calcudoku发布的分析图中我们可以看出(下图),无论是解4×4、5×5还是6×6的数独,Chrome用户的解题速度都是最快的,火狐和IE用户分列2、3位.

IE市场占有率已低于50%

- 丁丁 - Solidot
Panggit 写道 "根据Net Applications的统计,随着长时间的缓慢下降,IE市场占有率终于在10月份跌破了50%,为49.58%. 而Firefox在10月的占有率小幅上升0.14%,达21.20%. 上升最快的仍然是chrome,已经达到16.59%,进一步逼近Firefox.

IE各个版本的调试工具

- - CSDN博客互联网推荐文章
最近使用JQuery开发的网页在IE6浏览器下出现样式不对,VS2010调试的时候有些不便. 无意之中看到由微软开发的 modern.ie,继而发现 BrowserStack,发现有很多的IE调试工具,就用微软开发的那款吧. Expression Web SuperPreview 4.0软件简介.