script 要素

by 3 contributors:

概要

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

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

属性

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

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>

仕様

仕様書 策定状況 コメント
HTML5 勧告候補  
HTML 4.01 Specification 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) (有) (有) (有)
async 属性 (有) 3.6 (1.9.2) 10 未サポート (有)
defer 属性 (有) 3.5 (1.9.1) 4 (独自仕様)
10 (標準仕様)
未サポート (有)
crossorigin 属性 30.0 Chromium Bug 159566 13 (13) バグ 696301 未サポート 12.50 (有)
(WebKit bug 81438)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 1.0 (1.0) (有) (有) (有)
async 属性 (有) 1.0 (1.0) 未サポート ? (有)
defer 属性 (有) 1.0 (1.0) 未サポート ? (有)

async のサポート

async 属性をサポートしない古いブラウザでは、パーサーによって挿入された script はパーサーを妨害します。スクリプトによって挿入された script は、IE および WebKit では非同期的に、Opera およびバージョン 4.0 より前の Firefox では同期的に実行します。Firefox 4.0 ではスクリプトが生成した script で async DOM プロパティの既定値が true であるため、デフォルトの動作が IE や WebKit の動作に一致します。スクリプトによって挿入された外部スクリプトをブラウザで挿入順に実行することを要求するには、document.createElement("script").asynctrue と評価される場合 (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> 要素を実行するようになりました。

関連情報

ドキュメントのタグと貢献者

Contributors to this page: yyss, ethertank, RobinEgg
最終更新者: yyss,