script 要素

概要

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

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

• コンテンツカテゴリ メタデータコンテンツ、フローコンテンツ、フレージングコンテンツ
• 許可された内容 text/javascript などの動的スクリプト
• タグの省略 不可。開始と終了タグの両方が必要。
• 許可された親要素 メタデータコンテンツを受け入れるすべての要素、またはフレージングコンテンツを受け入れるすべての要素
• DOM インターフェイスHTMLScriptElement

属性

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

async HTML5

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

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

src

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

type

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

language

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

defer

この論理属性は、スクリプトを文書のパース完了後に実行することをブラウザに示します。この機能を実装していない主要ブラウザがあるため、ページ作者はスクリプトの実行が本当に先送りされると想定するべきではありません。defer 属性を持つスクリプトから document.write() を呼び出してはいけません (Gecko 1.9.2 より、これは文書を壊すでしょう)。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">

<!-- HTML5 -->
<script src="javascript.js"></script>

仕様

ブラウザ実装状況

async のサポート

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() を呼び出しても効果がありません (エラーコンソールに警告を出力することを除く)。

Gecko 固有の注意事項

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) より、document.createElement("script") を呼び出して作成することによって DOM に挿入した script 要素は、挿入順に実行することを強制されません。この変更により、Gecko は HTML5 仕様へ適切に従うことができます。スクリプトで挿入した外部スクリプトを挿入順に実行するには、それらに .async=false を設定してください。

また同じ理由で、<iframe>、<noembed>、<noframes> 要素内の <script> 要素を実行するようになりました。

関連情報

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