script 要素

HTML <script> 要素は実行可能なスクリプトを埋め込み、または外部参照するコードを指定する際に用いられます。

属性

他のすべての要素と同様に、この要素はグローバル属性を持ちます。

async HTML5

この論理属性は、可能であればブラウザーはスクリプトを非同期的に実行すべきであることを示します。これはインラインスクリプト (すなわち、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 をご覧ください。

text

textContent 属性と同じように、この属性は要素のテキストコンテンツを設定します。textContent 属性との違いは、ノードが DOM に挿入された後に実行可能なコードとして評価されることです。

language

type 属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。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>

仕様

ブラウザー実装状況

[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 属性を設定していれば実行が遅延します。

関連情報

• document.currentScript
• Ryan Grove's <script> and <link> node event compatibility chart