インライン JavaScript が外部ソースのスクリプト タグで機能しないのはなぜですか?

HTML スクリプト タグを使用したスクリプトのロード

HTML スクリプト タグは、JavaScript コードを含めて実行するために使用されます。デフォルトでは、このタグは JavaScript ファイルをロードするための scr などの外部ソース属性を受け取ります。ただし、次のようにスクリプト タグ内にインライン JavaScript を含めようとすると、

<script src="myFile.js">
    alert( "This is a test" );
</script>

エラーをスローせずに失敗します。

スクリプト タグでインライン JavaScript を使用すると機能しない理由

この動作の理由は、スクリプト要素が外部ソースかインラインソースかに関係なく、単一のソースしかロードできないためです。 src とインライン コンテンツの両方が存在する場合、インライン コンテンツは無視されます。したがって:

<script src="script/addScript.js">
    addScript( "script/obj.js" );
    addScript( "script/home/login.js" );
</script>

指定されたスクリプトはロードされません。

解決策: 複数のスクリプト要素の使用

複数のスクリプトをロードするには、それぞれに個別のスクリプト要素を使用する必要があります。 :

<script src="script/obj.js"></script>
<script src="script/home/login.js"></script>

また、必要なスクリプトを動的にロードする親スクリプトを作成することもできます:

<script>
var scripts = ["script/obj.js", "script/home/login.js"];
for (var i = 0; i < scripts.length; i++) {
  var script = document.createElement("script");
  script.src = scripts[i];
  document.head.appendChild(script);
}
</script>

追加メモ

スクリプト要素ではインライン JavaScript は無視されます外部ソースの場合、スクリプト要素のコンテンツは DOM に残ります。このため、一部の開発者は、外部スクリプトによってアクセスされるデータを保存するためにこれを使用するようになりました。ただし、一般に、この目的には data-* 属性を使用する方がより適切でクリーンなアプローチです。

以上がインライン JavaScript が外部ソースのスクリプト タグで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。