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 相关文章推荐
菜单效果
Oct 14 Javascript
JavaScript类库D
Oct 24 Javascript
Javascript调用C#代码
Jan 17 Javascript
获取body标签的两种方法
Oct 13 Javascript
js 代码优化点滴记录
Feb 19 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
Node.js学习教程之Module模块
Sep 03 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php实现加减法验证码代码
2014/02/14 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
vue mounted组件的使用
2018/06/18 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python选择排序算法的实现代码
2013/11/21 Python
详解Python中的条件判断语句
2015/05/14 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
大学生自我鉴定
2013/12/16 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
安全保证书
2015/01/16 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis