script 要素

概要

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

async 属性または defer 属性を持たない script はインラインスクリプト同様に、ブラウザがページの解析を続けるより先に、ただちに読み込みおよび実行されます。

属性

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

async HTML5

この論理属性は、可能であればブラウザはスクリプトを非同期的に実行すべきであることを示します。これはインラインスクリプト (すなわち、src 属性を持たない script 要素) では効果がありません。

ブラウザのサポート状況については Browser compatibility をご覧ください。Async scripts for asm.js 向け非同期スクリプトもご覧ください。

integrity

この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザエージェントが検証するために使用できるメタデータを含みます。Subresource Integrity をご覧ください。

src

この属性は外部スクリプトの URI を指定します。直接文書にスクリプトコードを埋め込む代わりに外部参照を行うスクリプトファイルを指定します。src 属性が指定されている script 要素は、自身のタグ中に埋め込みスクリプトを持つべきではありません。

type

この属性は script 要素内に埋め込まれている、あるいは src 属性にて参照されているコードのスクリプト言語を指定します。この明示は MIME タイプに沿って指定しなければなりません。サポートされている MIME タイプの一例をあげると、text/javascript, text/ecmascript, application/javascript, application/ecmascript などがあります。この属性がない場合は、スクリプトを JavaScript として扱います。

Firefox では type=application/javascript;version=1.8 を指定すると、let 文など新しい JS バージョンの高度な機能を使用できます。ただしこれは非標準の機能ですので、特に Chromium ベースのブラウザなど他のブラウザではサポートされていません。

他のプログラミング言語を含める方法については Rosetta をご覧ください。

text

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

language

type 属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。type 属性と異なるのは、この属性に指定可能な値が標準化されることがなかったという点です。そのため、通常はこの属性の代わりに type 属性を用いるべきです。

defer

この論理属性は、スクリプトを文書のパース完了後に実行することをブラウザに示します。この機能を実装していない主要ブラウザがあるため、ページ作者はスクリプトの実行が本当に先送りされると想定するべきではありません。defer 属性は src 属性を持たない script 要素で使用すべきではありません。Gecko 1.9.2 より、src 属性を持たない script 要素では defer 属性を無視します。しかし Gecko 1.9.1 ではインラインスクリプトでも、defer 属性を設定していれば実行が遅延します。

crossorigin

通常の script 要素は標準の CORS チェックをパスしないスクリプトに対して、window.onerror に最小限の情報しか渡しません。静的なメディアとは別のドメインを使用するサイトに対してエラーロギングを許可するため、いくつかのブラウザは img 要素で標準の crossorigin 属性と同じ定義で、script 要素でも crossorigin 属性を有効にしています。この属性を標準化する活動は、WHATWG のメーリングリストで進行中です。

例

<!-- 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 属性を含む)。

関連情報

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