document.write() が非同期的に読み込まれるスクリプトで制限されているのはなぜですか?

非同期的にロードされたスクリプトの実行制限: document.write() の制限について

非同期的にロードされたスクリプトからドキュメントに書き込もうとすると、コンソール メッセージ「'ドキュメント' で '書き込み' の実行に失敗しました: 明示的に開かれない限り、非同期で読み込まれた外部スクリプトからドキュメントに書き込むことはできません。」このメッセージは、スクリプトの予期された動作にもかかわらず表示される場合があり、開発者は困惑しています。

制限が存在する理由

非同期的に読み込まれるスクリプトは、多くの場合、ドキュメントが解析され、閉まっている。したがって、そのようなスクリプトから document.write() を使用すると、ドキュメントが書き込み用に開かれなくなるため、問題が発生します。

解決策: document を使用する代わりに、明示的な DOM 操作

.write() を使用する場合、開発者は非同期で読み込まれるスクリプトで DOM を明示的に操作する必要があります。これには、DOM 要素を作成し、.appendChild()、.insertBefore()、または .innerHTML の設定などのメソッドを使用して目的の親要素に挿入することが含まれます。

例: DOM 操作

説明のために、次のインライン スクリプトを考えてみましょう:

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

非同期でロードされるスクリプトでは、このコードは次のように置き換えることができます:

var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);

あるいは、コンテナーは空の場合は、次の簡略化されたコードを使用できます:

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

これらの DOM 操作手法を採用することで、開発者は非同期でロードされたスクリプトからドキュメントに効果的に書き込み、document.write() によって課せられる制限を回避できます。

以上がdocument.write() が非同期的に読み込まれるスクリプトで制限されているのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。