IE下使用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 了之，以绝后患。

赞 (0)

相关推荐

  • javascript cloneNode()方法的使用

    控件cloneNode()方法的使用 "; //用cloneNode永久克隆(true标示克隆) var NewSelect = document.getElementById("sexType").cloneNode(true); NewSelect.id = "sexType" + i; //td2的值为NewSelect td2.appendChild(NewSelect); td3.innerHTML = ''; } } // --> 姓名

  • cloneNode实现表格增加删除效果

    查询窗口 function changeValue1(obj){ if(obj.value == 0){ document.getElementById("result").value = "f117"; }else { document.getElementById("result").value = "gaofei"; } } function changeValue(obj){ if(obj.value == 0){ o

  • JavaScript 用cloneNode方法克隆节点的代码

    JavaScript 用cloneNode方法克隆节点的代码

    很多时候我们会用for 来生成多个结构相同的节点结构,这样我们需要写很多createElement.setAttribute.appendChild 等代码. 但其实我们只需要有一个html 的模板,就可以用cloneNode 方法对已有的节点进行克隆,包括其子节点. 以下是cloneNode 方法原型: newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只

  • javascript dom操作之cloneNode文本节点克隆使用技巧

    true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点) 当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等:比如 img... 为了让大家理解的更为深刻,举个小例子吧: 复制代码 代码如下: <div> <span>Shadow</span> |No Shadow

  • IE下使用cloneNode注意事项分享

    cloneNode 是 HtmlElement 原型链上的方法,用于创建指定 dom 节点的拷贝,它接受一个布尔参数 include_all,如果 include_all 设置为 true,则副本会带有指定节点的所有子节点. 然而,script 标签也是 dom 节点,cloneNode 对其依然有效,经实测各浏览器(尤其是IE)对 cloneNode 执行结果表现不一致,主要现象为以下两种: IE,至少是 IE8 及以下,对某节点 cloneNode 时,如果该节点包含 script 节点,那

  • VMware下仅主机模式(host-only)下的ip配置教程分享

    在编程学习中,很多时候,我们希望将数据库和软件的运行进行分离,比如软件通过ip地址连接到数据库进行存储操作,但由于学习成本有限,我们通常的办法是将数据库装在虚拟机上,在主机(host)上模拟一个远程连接的操作,此时就需要主机通过ip可以访问到VMware上安装的虚拟机. VMware的网络配置有三种:桥接.仅主机模式.NAT模式.桥接模式在连接有线的时候,可以直接获取ip,主机通过该ip可以访问虚拟机.但有时候我们是无线联网的状态,此时我们可以通过仅主机模式来使得主机可以访问到虚拟机. 1.右键

  • jQuery树形下拉菜单特效代码分享

    jQuery树形下拉菜单特效代码分享

    本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考. 运行jQuery树形下拉菜单特效效果图: 为大家分享的jQuery树形下拉菜单代码如下 <head> <title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="

  • iOS DropDown下拉按钮效果代码分享

    iOS DropDown下拉按钮效果代码分享

    本文实例为大家分享了iOS下拉按钮效果展示的具体代码,供大家参考,具体内容如下 一.效果图. 二.工程图. 三.代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController @end RootViewController.m #import "RootViewController.h" #import "NIDropDown.h&q

  • HDwiki 5.1下iis的rewrite规则分享

    HDwiki 5.1下iis的rewrite规则分享

    一.注意事项: 1.本功能对服务器环境有特殊要求,独立主机用户需要对 Web 服务器增加相应的 Rewrite 规则,因此需要服务器权限才可使用.对于虚拟主机用户,您需要向您的空间服务商进行咨询:空间是否支持 Rewrite 以及是否支持对站点目录中 .htaccess 的文件解析,只有满足这两条件,URL 静态化 功能才会生效. 2.打开 URL 静态化后,如果您的服务器环境不支持或者尚未配置好,访问这些链接会出现"网页无法显示"的错误信息,HDwiki将无法正常访问.发生无法访问的

  • 部署PHP项目应该注意的几点事项分享

    在部署PHP项目时,有几点需要特别注意,也是初学者比较容易忽视的点: 一.下载WAMPServer后,如何安装配置? 二.如何通过客户端管理MySQL数据库? 三.如何通过IP地址访问PHP网站,如果在局域网内部访问服务器上的PHP网站? 针对第一点,注意以下内容: 1.下载WAMPServer,地址可以自己去找: 2.安装WAMPServer 3.此时PHP.Apache.MySQL都已经装好,甚至可以立即访问http://localhost,也可以通过phpMyAdmin访问到MySQL数据

  • mysql中group by与having合用注意事项分享

    group by函数应该的使用应该是SELECT 列表中指定的每一列也必须出现在 GROUP BY 子句中,除非这列是用于聚合函数,但是今天帮同事调试一个mysql中的group by函数,让我大跌眼镜,当时感觉不可思议,然后回来做了个简化版试验,试验过程如下: mysql表结构 复制代码 代码如下: mysql> desc t;+---+----–+--+-–+---+---+| Field | Type | Null | Key | Default | Extra |+---+----–+-

  • MySQL下海量数据的迁移步骤分享

    公司数据中心计划将海量数据做一次迁移,同时增加某时间字段(原来是datatime类型,现在增加一个date类型),单表数据量达到6亿多条记录,数据是基于时间(月)做的partition由于比较忙,一直没有总结,所以很细节的地方都记不清楚了,此处只是简单总结下当时的情形,备忘 乱打乱撞 最初接到任务,没有明确的入手点,直接就是select * from db limit 10000,动态修改翻页数量,通过控制台看耗时情况,慢 复制代码 代码如下: SELECT IR_SID,IR_HKEY,IR_

  • 阿里云申请的 CA Wosin 证书,在Windows iis下导入证书的步骤分享

    阿里云申请后, 你可以下载一个压缩文件, 里面有两个文件 key & pem 文件. 这两个文件需要 OpenSSL 命令转为 PFX 文件, 导入到IIS中. 这个是阿里云16年才上的一个功能, 不完善, 连文档都没有问了好久, 给了一个这样的文档 https://help.aliyun.com/knowledge_detail/13086385.html 里面有这句话 3. 将PEM/KEY/CRT转换为PFX 使用OpenSSL工具,可以将密钥文件KEY和公钥文件CRT转化为PFX文件.

  • Ubuntu 14.04下安装Eclipse的经验分享

    ubuntu系统自带有openjdk,在终端中输入java -version命令,会有一些提示,这对后面安装没有影响主要是让大家了解一下 1 # 首先到http://www.oracle.com/technetwork/java/javase/downloads/下载jdk,我下载的是最新版jdk-8u20-linux-i586.tar.gz,下载完成使用命令 sudo tar zxvf jdk-8u20-linux-i586.tar.gz 解压 2 # 然后将解压好的jdk1.8.0_20文件

随机推荐