現在実行中の JavaScript をロードしたスクリプト要素を見つけるにはどうすればよいですか?

現在実行中のスクリプトをロードしたスクリプト要素を参照する方法

問題を理解する

特定のシナリオでは、開発者は追加のスクリプトを動的にロードする必要がある場合がありますスクリプトをドキュメントに追加します。ただし、HEAD 要素がまだ完全にレンダリングされていない場合、document.getElementsByTagName('head')[0].appendChild(v) を使用する従来の方法は適切ではない可能性があります。

解決策: 現在のスクリプトを参照する

現在実行中のスクリプトをロードしたスクリプト要素を参照するには、いくつかの手法を使用できます。

1. document.currentScript

利点:

• シンプル、明示的、信頼性が高い
• スクリプト タグの変更が不要
• 非同期スクリプトで動作します (遅延およびasync)
• 動的に挿入されたスクリプトで動作します

制限事項:

• 古いブラウザまたは IE ではサポートされません
• モジュールでは機能しません (

  3.データ属性の選択

  利点:

  • シンプルかつ明示的
  • 非同期スクリプト (遅延および非同期) で動作
  • 挿入されたスクリプトで動作します動的に

  制限事項:

  • カスタム data-* 属性をスクリプト タグに追加する必要があります
  • 使用するものよりもサポート範囲が狭いID
  • 同じデータを共有する他の要素との混乱を引き起こす可能性があります属性

  <br><script data-name="myscript"><br>var me = document.querySelector('script[data-name="myscript"]');<br></script><br>

  4.ソースの選択

  利点:

  • 信頼性
  • 非同期スクリプトで動作 (遅延および非同期)
  • スクリプトで動作動的に挿入されました
  • カスタム属性なしまたは ID が必要です

  制限事項:

  • ローカル スクリプトでは機能しません
  • 異なる環境 (例: 開発環境と本番環境) で問題が発生します
  • 静的で壊れやすい (スクリプトの場所を変更するには修正が必要です)
  • ID を使用する場合よりもサポート範囲が狭い
  • 同じスクリプトを使用すると問題が発生する複数回ロードされます

  <br><script src="//example.com/embed.js"></script><br>

  <br><script><br>var me = document.querySelector('script[src="//example.com/embed.js"]');<br></script><br>

  5.スクリプトの反復

  利点:

  • 以前の手法の利点を継承
  • querySelector() に依存しないため、古いバージョンでも動作しますブラウザ

  制限事項:

  • より複雑で計算コストが高くなります

  <br><スクリプト><br>var me = null;<br>var scripts = document.getElementsByTagName("script")<br>for (var i = 0; i <scripts.length i> if (isMe(scripts[i])) {</scripts.length></p>
  <pre class="brush:php;toolbar:false">me = scripts[i];

  }
  }
  
  

  6.最後に実行されたスクリプト

  利点:

  • シンプル
  • ほぼ普遍的にサポート
  • カスタム属性や ID なし必須

  制限事項:

  • 非同期スクリプト (遅延および非同期) では動作しません
  • 挿入されたスクリプトでは動作しません動的

  <br><script><br>var scripts = document.getElementsByTagName( 'script' );<br>var me = scripts[ scripts.length - 1 ];<br></script><br>

  結論

  現在のスクリプト要素を参照する方法の選択は、アプリケーションの特定の要件によって異なります。さまざまなブラウザのサポート。最新のブラウザでは、document.currentScript が推奨されるアプローチです。

  以上が現在実行中の JavaScript をロードしたスクリプト要素を見つけるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。