HTML - script 要素

概要

名前
script
カテゴリー
  • Metadata content
  • Flow content
  • Phrasing content
  • Script-supporting element
配置できる場所
  • Metadata content が期待される場所。
  • Phrasing content が期待される場所。
  • Script-supporting element が期待される場所。
コンテンツモデル
src 属性を持たない場合、type 属性の値に従ったスクリプトの内容。src 属性が持つ場合、空、または type 属性の値に従ったスクリプトの内容。
説明
script 要素は、HTML 文書の中にスクリプトを組み込むための要素です。スクリプトは要素内容として書き込むことや、別のファイルに記述したものを src 属性で読み込ませることも可能です。また、HTML5 以降ではデータブロックを組み込むために使用することもできます。データブロックを組み込む場合は、必ず要素内容として格納する必要があります。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLScriptElement
仕様書
仕様書策定状況コメント
LS:現行の標準charset 属性を削除
REC:勧告module type を追加
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
11
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

属性

属性サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
async11
crossorigin133012
defer103.5
integrity434545
language11
nomodule16606111481161
referrerPolicy657070
src11
text11
type11
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
async
これは論理属性で、可能であればスクリプトを非同期で読み込むべきであることを示します。この属性は src 属性がない場合 (つまり、インラインスクリプトの場合) に使用してはいけません。そのような場合は効果がありません。ブラウザは最も悪いシナリオを想定し、HTML の解釈中は同期的にスクリプトを読み込みます。動的に挿入されたスクリプトは、既定で非同期に読み込まれますので、同期的に読み込まれるスクリプトには async="false" を設定してください。
crossorigin
通常の script 要素は標準の CORS チェックに通らないスクリプトに対して window.onerror に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用してください。
defer
この論理属性は、スクリプトを文書の解析完了後かつ DOMContentLoaded が発生する前に実行することをブラウザに示します。defer 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで DOMContentLoaded イベントの発生が抑制されます。この属性は src 属性がない場合 (つまり、インラインスクリプトの場合) に使用してはいけません。そのような場合は効果がありません。動的に挿入されたスクリプトで同様の効果を得るには、代わりに async="false" を使用してください。defer 属性の付いたスクリプトは文書内に出現する順で実行されます。
integrity
この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかをユーザエージェントが検証するために使用できるメタデータを含みます。
integrity
この論理属性は、ES2015 モジュールに対応するブラウザでスクリプトを実行するべきではないことを示します。つまり、モジュール式の JavaScript コードをサポートしない古いブラウザ向けのフォールバックスクリプトを提供するために使用できます。
nonce
script-src コンテンツセキュリティポリシー内の行内スクリプトをホワイトリストに入れるための暗号ノンス (ワンタイム番号) です。サーバはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスを推測できないノンスを提供することが重要です。
referrerpolicy
スクリプトを読み込んだりスクリプトがリソースを読み込んだりする際に、どのリファラーを送信するかを示します。
  • no-referrer: Referer ヘッダーは送信しません。
  • no-referrer-when-downgrade (既定値): Referer ヘッダーは、オリジンに TLS (HTTPS) がない場合には送信しません。
  • origin: 送信するリファラーを、参照しているページのオリジン (スキーム、ホスト、ポート番号) のみに制限します。
  • origin-when-cross-origin: 異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポート番号に制限します。同一オリジンへの移動では、リファラーのパスも含めます。
  • same-origin: リファラーは同一オリジンには送信しますが、オリジン間リクエストにはリファラー情報が含めません。
  • strict-origin: プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信しますが、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) には送信しません。
  • strict-origin-when-cross-origin: 同一オリジンのリクエストを行う際は URL 全体を送信しますが、プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信し、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) にはヘッダーを送信しません。
  • unsafe-url: リファラーはオリジンおよびパスを含みます (ただし、フラグメント、パスワード、ユーザ名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
既定値および referrerpolicy に対応していない場合の代替値は空文字列です。referrerpolicyscript 要素で明示的に指定されていない場合はより高次元、つまり文書全体やドメイン全体のリファラーポリシーに合わせられます。より高次元のポリシーが利用できない場合は、空文字列は no-referrer-when-downgrade と同等のものとして扱われます。
src
この属性は外部スクリプトの URI を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。ただし、script 要素に src 属性が指定した場合は、自身のタグ中に埋め込みスクリプトを持たせないでください。
type
スクリプトを表すタイプを指定します。この属性の値は、以下の種類のいずれかにします。
  • 省略または JavaScript の MIME タイプ: これはスクリプトが JavaScript であることを示します。HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。過去のブラウザでは埋め込まれている、あるいは (src 属性で) インポートされたコードのスクリプト言語を指定していました。
  • module: コードを JavaScript モジュールとして扱います。スクリプトの処理は charset および defer 属性の影響を受けません。
  • その他の値: このタグで埋め込んだコンテンツを、ブラウザによって処理されないデータブロックとして扱います。開発者はデータブロックを記述するために JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。src 属性は無視されます。

非推奨の属性

以下の属性は非推奨、非標準、実験的、または廃止された属性のため、使用しないでください。

language
非推奨。新しいウェブサイトでは使用しないでください。
非標準。ブラウザ間の互換性が低い可能性があります。
nomodule
実験的。動作が変更される可能性があります。

サンプルコード

script 要素のサンプルコードは以下のとおりです。

<script src="javascript.js"></script>
script 要素のサンプルコード

関連記事