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 相关文章推荐
js 操作select相关方法函数
Dec 06 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
从0开始学Vue
Oct 27 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
js实现动态显示时间效果
Mar 06 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
简述JS浏览器的三种弹窗
Jul 15 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
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
javascript中的几个运算符
2007/06/29 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
input的focus方法使用
2010/03/13 Javascript
js href的用法
2010/05/13 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
控制工程专业个人求职信
2013/09/25 职场文书
副厂长岗位职责
2014/02/02 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
新员工入职感想
2015/08/07 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
Python的三个重要函数详解
2022/01/18 Python