ホームページ  >  記事  >  ウェブフロントエンド  >  IE_javascriptスキルでcloneNodeを利用する際の注意点の共有

IE_javascriptスキルでcloneNodeを利用する際の注意点の共有

WBOY
WBOYオリジナル
2016-05-16 17:48:10976ブラウズ

cloneNode は、指定された dom ノードのコピーを作成するために使用される HtmlElement プロトタイプ チェーンのメソッドです。 include_all が true に設定されている場合、コピーには指定されたノードのすべての子ノードが含まれます。

ただし、script タグも dom ノードであり、cloneNode は依然として有効です。さまざまなブラウザ (特に IE) で cloneNode の実行結果が不一致になることが測定されています。主な現象は次の 2 つです。 :

IE、少なくとも IE8 以下では、ノードのクローンを作成するときに、ノードにスクリプト ノードが含まれている場合、スクリプト ノードのスクリプト コンテンツが再度実行される可能性があります。
IE 以外のブラウザの場合、cloneNode ノードに含まれるスクリプト ノードのスクリプト コンテンツは再度実行されません。
IE 以外のブラウザのパフォーマンスには非常に満足しています。上記の IE の「可能性」については、次の 2 つの状況があります。

cloneNode がスクリプト ノードの場合、ノードがスクリプト ノードであるかどうかは関係ありません。外部リンク スクリプトも埋め込みスクリプトも再度実行されることはありません。
別のノードを cloneNode すると、そのノードの下に含まれる埋め込みスクリプトは実行されませんが、含まれる外部リンク スクリプトは再度実行されます。
これは IE で cloneNode の問題を再現するデモです。

これを見たらめまいがしませんか?解決策は非常に簡単で、どのブラウザであっても、ノードをクローンする前にターゲット ノードにあるすべてのスクリプト タグを削除するだけです。スクリプトはすでに実行されているため、次のようにタグを削除しても影響はありません。 🎜>

コードをコピーします コードは次のとおりです:
function cloneNode(dom){
var scripts = dom.getElementsByTagName("script");
for(var i = scripts - 1, s; i >= 0; i --){
s = scripts[i]; .parentNode .removeChild(s);
}
return dom.cloneNode(true);



したがって、cloneNode(true) を使用する場合は注意が必要です) 考えてみます: コピーされたノード内のすべての子ノードは必要ですか?悪影響を避けるために、不要なものをすべて削除するようにしてください。たとえば、コピーされた div に iframe が含まれており、iframe ページにスクリプトparent.xxx... がある場合、iframe 内のこれらのスクリプトは必然的に実行されます。繰り返しになりますが、iframe ページ自体には何も問題はありません (必ずしもそうではありません)。ただし、iframe ページは親に対して動作するため、この親の影響を推定するのは困難です。解決策は、Node を複製してから、コピーに含まれる iframe を強制終了することです。もちろん、プロットの要求に従って iframe を強制終了できない場合は、iframe ページ内のスクリプトが独自の判断を行います。
また、cloneNode ターゲット ノードにリンク タグが含まれている場合、これも実験を行っていませんが、役に立たない場合は、将来のトラブルを避けるために、Child を削除します。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。