IE下使用cloneNode注意事项分享

cloneNode 方法概述

cloneNode 作为 HtmlElement 原型链上的方法，用于生成指定 DOM 节点的副本。该方法接收一个布尔参数 include_all，当该参数设为 true 时，生成的副本将包含原节点的所有子节点。

IE 与非 IE 浏览器的行为差异

尽管 script 标签本质上也是 DOM 节点，cloneNode 对其同样生效，但实测发现各浏览器（尤其是 IE）对该方法的执行结果存在显著差异，主要体现为以下两种不同现象。

在 IE 浏览器中，特别是 IE8 及更低版本，若对包含 script 节点的元素执行 cloneNode，script 标签内的脚本内容“有可能”会被重新执行一次。

在非 IE 浏览器中，对包含 script 节点的元素执行 cloneNode 时，其内部的脚本内容不会被再次执行。

非 IE 浏览器的表现符合预期，而针对上述 IE 中出现的“有可能”重新执行的情况，具体可分为以下两种子情形。

若直接 cloneNode 一个 script 节点，无论该脚本是外链引用还是内嵌代码，均不会导致脚本被重新执行。

若 cloneNode 一个包含 script 的其他节点，其中内嵌脚本不会被执行，但外链脚本会被再次执行一次。

此处提供了一个 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，则 iframe 内的脚本必然会被重新执行。虽然 iframe 页面本身可能无问题（但也未必），但其对 parent 的操作可能带来不可预知的影响。解决方法是在 cloneNode 后移除副本中的 iframe；若业务逻辑必须保留 iframe，则需在 iframe 页面内的脚本中自行进行判断处理。

此外，若 cloneNode 的目标节点内包含 link 标签，也可能产生类似影响。虽未进行专门实验，但为杜绝隐患，建议同样采用 removeChild 方式移除 link 标签。