非同期で読み込まれたスクリプトを使用してドキュメントへの書き込みを実行できないのはなぜですか?

ドキュメントへの書き込みの実行: 非同期的に読み込まれたスクリプトに関する問題は何ですか?

非同期的に読み込まれたスクリプトを使用する場合、次のような問題が発生する可能性があります。エラー「ドキュメントに対する 'write' の実行に失敗しました。明示的に開かれない限り、非同期で読み込まれた外部スクリプトからドキュメントに書き込むことはできません。」これは、ドキュメントが完全に解析されて閉じられた後に非同期スクリプトが読み込まれるため、document.write() などの関数を使用した DOM への直接変更が無効になるために発生します。

解決策の理解

この問題を解決するには、document.write() を明示的な DOM 操作に置き換える必要があります。コンテンツの自動挿入に依存する代わりに、DOM 要素を手動で作成し、それらを適切に挿入する必要があります。

例

赤色のテキストを挿入する次のインライン スクリプトについて考えてみましょう。 「コンテナ」 div への「Hello」テキスト:

<code class="html"><div id="container">
<script>
document.write('<span style="color:red">Hello</span>');
</script>
</div></code>

非同期で読み込まれたスクリプトで同じアクションを実行するには、インライン スクリプトを次のコードで置き換えます:

<code class="javascript">var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);</code>

コンテナに他のコンテンツがない場合は、その innerHTML を単純に上書きすることもできます。

<code class="javascript">var container = document.getElementById("container");
container.innerHTML = '<span style="color:red;">Hello</span>';</code>

明示的な DOM 操作を採用することで、非同期で読み込まれたスクリプトがドキュメントと効果的にやり取りできるようになり、スクリプトの実行の遅延によって課せられる制限。

以上が非同期で読み込まれたスクリプトを使用してドキュメントへの書き込みを実行できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。