Some incredible bugs were found during the development of Baidu's "crack special effects". The first reaction was that the code of the special effects conflicted with the original script on the page. After debugging, it was found that, the problem occurs in cloneNode applications. cloneNode is a method on the HtmlElement prototype chain. It is used to create a copy of a specified dom node. It accepts a Boolean parameter include_all. If include_all is set to true, the copy carries all the child nodes of the specified node.
However, the script tag is also a dom node, and cloneNode is still valid for it. The results of cloneNode execution by different browsers (especially IE) are inconsistent according to the actual test. The main phenomena are as follows:
IE, at least IE8 and earlier. If a node named cloneNode contains a script node, the script content of the script node may be executed again.
For a non-IE browser, the script content of a node named cloneNode is not re-executed.
I am very satisfied with the performance of browsers other than IE, but there are two possible situations for IE described above:
If cloneNode is a script node, no matter whether it is an external link script or an embedded script, it will not be executed again.
If cloneNode is another node, the embedded scripts under the node will not be executed, but the external link scripts will be executed again.
Here is a demo that reproduce the cloneNode problem in IE.
Are you going to be dizzy? The solution is very simple. You don't need to worry about the browser. Before cloneNode, you can remove all the script labels under the target node. Because the script has been executed, removing its labels will not affect the operation, as follows:
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, when using cloneNode (true), we must consider whether all the subnodes In the copied node are required? Try to eliminate unnecessary items to avoid negative effects. For example, if the copy p contains iframe, And the iframe page contains the script parent. xxx ..., These scripts in iframe will inevitably be re-executed. The iframe page itself is fine (and not necessarily), but because it operates the parent, the impact of this parent is hard to estimate. After cloneNode is used, the iframe contained in the copy is killed. Of course, if the iframe cannot be killed as required by the plot, the script on the iframe page is used for self-determination.
In addition, if the cloneNode target node contains the link tag, this estimation will also have some impact. I did not perform the experiment. If it is useless, it would also be removeChild.
