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

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“IE下使用cloneNode注意事项分享”

暂无“IE下使用cloneNode注意事项分享”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。