非同期スクリプトの読み込み後のドキュメント書き込み実行の失敗を処理するにはどうすればよいですか?

非同期スクリプトの読み込み後のドキュメント書き込み実行エラー

スクリプトを非同期で読み込む場合、読み込まれたスクリプトはドキュメントが完全に解析されてから実行されます。閉まっている。この制限により、ロードされたスクリプト内から document.write() を使用することができなくなります。

エラーの理由

エラー メッセージ「書き込みはできません」 「非同期でロードされた外部スクリプトからドキュメントに追加されました」は、ドキュメントが閉じられた後にスクリプトがロードされたため、document.write() を使用してドキュメントに書き込もうとして失敗したことを示します。

代替 DOM 操作

この問題に対処するには、document.write() ステートメントを明示的な DOM 操作に置き換える必要があります。これには、DOM 要素を作成し、

• .appendChild()
• .insertBefore()
• .innerHTML
のようなメソッドを使用して親要素に挿入することが含まれます。

例

たとえば、次のようにインライン スクリプトで document.write() を使用する代わりに、

<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>

document.write() ステートメントをこれらの代替 DOM 操作に置き換えることにより、このテクニックを使用すると、目的のドキュメント変更を実現しながら、非同期で読み込まれたスクリプトを確実に正常に実行できます。

以上が非同期スクリプトの読み込み後のドキュメント書き込み実行の失敗を処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。