Sharing of precautions when using cloneNode under IE_javascript skills

cloneNode is a method on the HtmlElement prototype chain, used to create a copy of the specified dom node. It accepts a Boolean parameter include_all. If include_all is set to true, the copy will have all the child nodes of the specified node.

However, the script tag is also a dom node, and cloneNode is still valid for it. It has been measured that various browsers (especially IE) have inconsistent execution results of cloneNode. The main phenomena are the following two:

IE, at least IE8 and below, when cloning a node, if the node contains a script node, the script content of the script node may be executed again.
For non-IE browsers, the script content of the script node contained in a cloneNode node will not be executed again.
I am very satisfied with the performance of browsers other than IE. Regarding the "possibility" of IE mentioned above, there are two situations:

If cloneNode is a script node, regardless of whether the node is Neither external link scripts nor embedded scripts will be executed again.
If you cloneNode another node, the embedded scripts contained under the node will not be executed, but the external link scripts contained will be executed again.
Here is a demo that reproduces the problem of cloneNode under IE.

Are you going to get dizzy after seeing this? The solution is very simple. No matter what browser it is, just remove all script tags under the target node before cloning Node. Because the script has already been executed, removing its tags will not have any impact, as follows:

Copy code The code is as follows:

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);
}

Therefore, we must pay attention when using cloneNode(true) Thinking: Are all the child nodes in the copied node required? Try to get rid of all the unnecessary ones to avoid negative effects. For another example, if the copied div contains an iframe, and the iframe page has the script parent.xxx..., then these scripts in the iframe will inevitably be executed again. , there is nothing wrong with the iframe page itself (not necessarily), but because it operates on the parent, the impact of this parent is difficult to estimate. The solution is to cloneNode and then kill the iframe contained in the copy. Of course, if the iframe cannot be killed as required by the plot, the script in the iframe page will make its own judgment.

In addition, if the cloneNode target node contains the link tag, this may also have some impact. I have not done experiments. If it is useless, I will removeChild to avoid future troubles.