IE下使用cloneNode注意事项分享


Posted in Javascript onNovember 22, 2012

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

Javascript 相关文章推荐
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
jquery remove方法应用详解
Nov 22 #Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 #Javascript
ECMAScript 创建自己的js类库
Nov 22 #Javascript
javascript克隆对象深度介绍
Nov 20 #Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 #Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 #Javascript
JavaScript实现拼音排序的方法
Nov 20 #Javascript
You might like
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
PHP 图片处理
2020/09/16 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python判断telnet通不通的实例
2019/01/26 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python多线程使用方法实例详解
2019/12/30 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
幼儿园教师的考核评语
2014/04/18 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
财务年终工作总结大全
2019/06/20 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript
springcloud整合seata
2022/05/20 Java/Android