HTML <script> 要素は実行可能なスクリプトを埋め込み、または外部参照するコードを指定する際に用いられます。
| コンテンツカテゴリー | メタデータコンテンツ、フローコンテンツ、フレージングコンテンツ |
|---|---|
| 許可された内容 | text/javascript などの動的スクリプト |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | メタデータコンテンツ を受け入れるすべての要素、または フレージングコンテンツ を受け入れるすべての要素 |
| 許可された ARIA ロール | なし |
| DOM インターフェイス | HTMLScriptElement |
属性
他のすべての要素と同様に、この要素はグローバル属性を持ちます。
asyncHTML5- この論理属性は、可能であればブラウザーはスクリプトを非同期的に実行すべきであることを示します。これはインラインスクリプト (すなわち、src 属性を持たない script 要素) では効果がありません。
- ブラウザーのサポート状況については Browser compatibility をご覧ください。asm.js 向け非同期スクリプト もご覧ください。
integrity- この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータを含みます。Subresource Integrity をご覧ください。
src- この属性は外部スクリプトの URI を指定します。直接文書にスクリプトコードを埋め込む代わりに外部参照を行うスクリプトファイルを指定します。
src属性が指定されているscript要素は、自身のタグ中に埋め込みスクリプトを持つべきではありません。 type- この属性は
script要素内に埋め込まれている、あるいはsrc属性にて参照されているコードのスクリプト言語を指定します。この明示は MIME タイプに沿って指定しなければなりません。サポートされている MIME タイプの一例をあげると、text/javascript,text/ecmascript,application/javascript,application/ecmascriptなどがあります。この属性がない場合は、スクリプトを JavaScript として扱います。 - 指定された MIME タイプが JavaScript のタイプではない場合は、このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。
moduleタイプが指定された場合は、コードを JavaScript モジュールとして扱います 。ES6 in Depth: Modules をご覧ください。- Firefox では
type=application/javascript;version=1.8を指定すると、let 文など新しい JS バージョンの高度な機能を使用できます 。ただしこれは非標準の機能ですので、特に Chromium ベースのブラウザーなど他のブラウザーではサポートされていません。 - 他のプログラミング言語を含める方法については Rosetta をご覧ください。
texttextContent属性と同じように、この属性は要素のテキストコンテンツを設定します。textContent属性との違いは、ノードが DOM に挿入された後に実行可能なコードとして評価されることです。languagetype属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。type属性と異なるのは、この属性に指定可能な値が標準化されることがなかったという点です。そのため、通常はこの属性の代わりにtype属性を用いるべきです。defer- この論理属性は、スクリプトを文書のパース完了後かつ
DOMContentLoadedが発生する前に実行することをブラウザーに示します。defer属性は外部スクリプトに限って使用するべきです。 crossorigin- 通常の
script要素は標準の CORS チェックをパスしないスクリプトに対して、window.onerrorに最小限の情報しか渡しません。静的なメディアに別のドメインを使用するサイトに対してエラーロギングを許可するため、この属性を使用してください。有効な値について、詳しくは CORS 設定属性 をご覧ください。
注記
async 属性または defer 属性を持たない script はインラインスクリプト同様に、ブラウザーがページの解析を続けるより先に、ただちに読み込みおよび実行されます。
スクリプトは text/javascript MIME タイプで提供するべきですが、ブラウザーは寛大であり、画像 (image/*)・動画 (video/*)・音声 (audio/*)・text/csv のタイプで提供されたスクリプトに限りブロックします。スクリプトがブロックされると、success イベントではなく error イベントが発生します。
例
<!-- HTML4 および (x)HTML --> <script type="text/javascript" src="javascript.js"></script> <!-- HTML5 --> <script src="javascript.js"></script>
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <script> の定義 |
現行の標準 | module タイプを追加 |
| HTML5 <script> の定義 |
勧告 | |
| HTML 4.01 Specification <script> の定義 |
勧告 | |
| Subresource Integrity <script> の定義 |
勧告 | integrity 属性を追加 |
ブラウザー実装状況
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本サポート | 1.0 | (有) | 1.0 (1.7 or earlier)[2] | (有) | (有) | (有) |
| async 属性 | (有)[1] | (有) | 3.6 (1.9.2)[1] | 10[1] | 15[1] | (有)[1] |
| defer 属性 | (有) | (有) | 3.5 (1.9.1)[6] |
4[3] |
未サポート | (有) |
| crossorigin 属性 | 30.0 | (有) | 13 (13) | 未サポート | 12.50 | (有)[4] |
| integrity 属性 | 45.0 | 未サポート | 43 (43) | 未サポート[5] |
| 機能 | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | (有) | 1.0 (1.0)[2] | (有) | (有) | (有) | (有) |
| async 属性 | (有)[1] | (有)[1] | (有) | 1.0 (1.0)[1] | 未サポート[1] | ?[1] | (有)[1] | (有)[1] |
| defer 属性 | (有) | (有) | (有) | 1.0 (1.0) | 未サポート | ? | (有) | (有) |
| integrity 属性 | 未サポート | 45.0 | 未サポート | 43 (43) | 45.0 |
[1] async 属性をサポートしない古いブラウザーでは、パーサーによって挿入された script はパーサーを妨害します。スクリプトによって挿入された script は、IE および WebKit では非同期的に、Opera およびバージョン 4.0 より前の Firefox では同期的に実行します。Firefox 4.0 ではスクリプトが生成した script で async DOM プロパティの既定値が true であるため、デフォルトの動作が IE や WebKit の動作に一致します。スクリプトによって挿入された外部スクリプトをブラウザーで挿入順に実行することを要求するには、document.createElement("script").async が true と評価される場合 (Firefox 4.0 など) に、順序を制御したい script で .async=false を設定します。async のスクリプトから document.write() を呼び出してはいけません。Gecko 1.9.2 では document.write() を呼び出すと予期せぬ効果をもたらします。Gecko 2.0 では async スクリプトから document.write() を呼び出しても効果がありません (エラーコンソールに警告を出力することを除く)。
[2] Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) より、document.createElement("script") を呼び出して作成することによって DOM に挿入した script 要素は、挿入順に実行することを強制されません。この変更により、Gecko は HTML5 仕様へ適切に従うことができます。スクリプトで挿入した外部スクリプトを挿入順に実行するには、それらに .async=false を設定してください。
また同じ理由で、<iframe>、<noembed>、<noframes> 要素内の <script> 要素を実行するようになりました。
[3] Internet Explorer 10 より前のバージョンの Trident は、独自仕様で <script> を実装していました。バージョン 10 より、W3C 仕様に準拠しています。
[4] WebKit では、crossorigin 属性の実装を WebKit bug 81438 で行いました。
[5] WebKit の Subresource Integrity 実装は WebKit bug 148363 で追跡しています (integrity 属性を含む)。
[6] Gecko 1.9.2 より、src 属性を持たない script 要素では defer 属性を無視します。一方、Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) ではインラインスクリプトでも、defer 属性を設定していれば実行が遅延します。