ホームページ > ウェブフロントエンド > jsチュートリアル > 非同期スクリプトの読み込み後のドキュメント書き込み実行の失敗を処理するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-10-20 14:13:30
オリジナル
283 人が閲覧しました

How to Handle Document Write Execution Failure After Asynchronous Script Loading?

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

スクリプトを非同期で読み込む場合、読み込まれたスクリプトはドキュメントが完全に解析されてから実行されます。閉まっている。この制限により、ロードされたスクリプト内から 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 サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート