HTML5

タグ(要素)

SCRIPT

  編集:2022.06.28 by T.A.

mdn

埋め込みスクリプト。

この要素を使用できる文脈

メタ データ内容が期待される場所。

フレージング内容が期待される場所。

スクリプト サポート要素が期待される場所。

内容モデル

src 属性が存在しない場合、type 属性の値に依存するが、スクリプトの内容制限に一致しなければならない。

src 属性が存在する場合、要素は空またはスクリプト文書を含むだけでなくスクリプトの内容制限に一致するかのいずれかでなければならない。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性
解説

著者が文書に動的スクリプトおよびデータ ブロックを含むことを許可する。この要素は、ユーザーに内容を表すものでない。

クラシック スクリプトおよびモジュール スクリプトは、インラインで埋め込むか src 属性を使用する外部ファイルからインポートすることができ、これは指定された場合に使用する外部スクリプト リソースのURLを与える。src 属性が指定される場合、潜在的にスペースで囲まれる妥当な空でない URLでなければならない。インライン SCRIPT 要素、または外部スクリプト リソースの内容は、それぞれクラシック スクリプトおよびモジュール スクリプトに対する JavaScript 仕様の Script または Module 制作物の要件に適合しなければならない。[JAVASCRIPT]

データ ブロックを含めるために使用される場合、データは、インラインに埋め込まれなければならず、データの形式は、type 属性を使用して指定しなければならず、かつ SCRIPT 要素のコンテンツは、使用される形式のために定義される要件に適合しなければならない。src、async、nomodule、defer、crossorigin、integrity、referrerpolicy 属性を指定してはならない。

クラシック スクリプトについて、async 属性が存在する場合、クラシック スクリプトは、構文解析と並行してフェッチされるとすぐに(潜在的に構文解析が完了する前に)利用可能になると評価される。async が存在しないが defer 属性が存在する場合、クラシック スクリプトは、並行してフェッチされ、ページが解析終了したときに評価される。いずれの属性も存在しない場合、スクリプトは、両方が完了するまで解析を阻止して、すぐにフェッチされ評価される。

モジュール スクリプトについて、async 属性が存在する場合、モジュール スクリプトとそのすべての依存関係は、構文解析と並行してフェッチされ、モジュール スクリプトは利用可能になるとすぐに(潜在的に構文解析が完了する前に)評価される。そうでなければ、モジュール スクリプトとその依存関係は、構文解析と並行してフェッチされ、ページが解析終了したときに評価される。(defer 属性は、モジュール スクリプトに影響しない。)

これは、次の模式図にすべて要約される:


src属性

リソースのアドレス。

Test.js:

<SCRIPT src="Com/Test.js"></SCRIPT>

type属性

スクリプトの種類。

表されるスクリプトの型をカスタマイズを可能にする:

Test.js:

<SCRIPT src="Com/Test.js" type=text/javascript></SCRIPT>

nomodule属性

モジュール スクリプトをサポートするユーザー エージェントでスクリプトが実行されないようにする。真偽属性

これは、以下に示すように、モダンなユーザー エージェントのモジュール スクリプトと古いユーザー エージェントのクラシック スクリプトの選択的な実行を可能にする。nomodule 属性をモジュール スクリプトで指定してはならない(この属性がある場合は無視される)。

async属性

フェッチの間ブロックなしで、可能な場合にスクリプトを実行する。真偽属性。

async および defer 属性は、どのようにスクリプトが評価されるべきかを示す。

クラシック スクリプトは、defer または async を指定してもよいが、src 属性が存在しない限り、いずれかを指定してはならない。

モジュール スクリプトは async 属性を指定してもよいが、defer 属性を指定してはならない。

これらの属性を使用して、スクリプトの種類によって選択できる複数の可能なモードが存在する。

defer属性

スクリプトの実行を延期する。真偽属性。

crossorigin属性

要素が生成元をまたいだ要求を処理する方法。CORS 設定属性

クラシック スクリプトについて、スクリプトが他の生成元から得られる場合、エラー情報が公開されるかどうかを制御する。モジュール スクリプトについて、生成元をまたいだリクエストに使用される資格情報モードを制御する。

クラシック スクリプトとは異なり、モジュール スクリプトは、生成元をまたいだフェッチのために CORS プロトコルを使用する必要がある。

integrity属性

Subresource Integrity チェックで使用される整合性メタ データ [SRI]

この要素が責任を負うリクエストに対する完全性メタ データを表す。値はテキストである。src 属性が指定されていない場合、integrity 属性は指定してはならない。[SRI]

referrerpolicy属性

要素によって開始されたフェッチのためのリファラー ポリシー。

リファラー ポリシー属性である。その目的は、スクリプトをフェッチするときに使用されるリファラー ポリシーと、そこからインポートされたスクリプトを設定することにある。[REFERRERPOLICY]

インポートされたスクリプトをフェッチするときに使用されているが他のサブ リソースを取得していないときに使用されている script のリファラー ポリシーの例:

<SCRIPT referrerpolicy="origin">
  fetch('/api/data');    // not fetched with <SCRIPT>'s referrer policy
  import('./utils.mjs'); // is fetched with <SCRIPT>'s referrer policy ("origin" in this case)
</SCRIPT>

テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: