script 要素クライアントサイドスクリプトのコードを埋め込む
script 要素はクライアントサイドスクリプトのコードを埋め込み、実行します。外部ファイルとして用意した JavaScript を src 属性で読み込んで実行できるほか、script 要素内に直接ソースコードを記述することもできます。
script 要素の仕様
- カテゴリ
- コンテンツモデル
-
- src 属性が指定されていない場合、type 属性の値と一致するスクリプト
- src 属性が指定されている場合は空、もしくは JavaScript におけるコメントテキスト
- この要素を使用できる文脈
- メタデータ・コンテンツが期待される場所
- フレージング・コンテンツが期待される場所
- スクリプトサポート要素が期待される場所
- この要素で使用できる属性
詳細説明
script 要素に指定可能な属性は下記の通りです。
| 属性 | 概要 |
|---|---|
| src 属性 | 外部スクリプトの URI を指定します。 |
| type 属性 | スクリプトの MIME タイプを指定します。省略された場合の初期値は text/javascript です。 |
| nomodule 属性 | nomodule 属性は、ES Modules（ES2015 仕様において策定された、JavaScript ファイルから別の JavaScript ファイルをインポートする仕組み）に対応するブラウザでは該当スクリプトを実行するべきではないことを伝えるための論理属性です。 |
| async 属性 | async 属性は論理属性です。src 属性が指定されている場合のみ指定可能です。文書を読み込み時、この属性が指定されたスクリプトが実行可能になった時点で実行します。 |
| defer 属性 | defer 属性は論理属性です。src 属性が指定されている場合のみ指定可能です。文書の読み込みが完了した時点で、この属性が指定されたスクリプトを実行します。 |
| charset 属性 | src 属性が指定されている場合のみ指定可能です。読み込まれるスクリプトの文字コードを指定します。 |
| crossorigin 属性 | crossorigin 属性は CORS （Cross-Origin Resource Sharing / クロスドメイン通信） 設定属性です。サードパーティ （元の文書とは異なるオリジン） から読み込んだ画像などのリソースを利用する際のルールを指定します。 |
| nonce 属性 | CSP（Content Security Policy）によって、文書内に読み込まれた script 要素や、style 要素の内容を実行するかを決定するために利用される nonce（number used once / ワンタイムトークン） を指定します。 |
async 属性と defer 属性
async 属性と defer 属性は同時に指定することも可能です。併記された場合、async 属性に対応する環境では async 属性が有効になり、async 属性に対応しない環境では defer 属性がフォールバックとなります。
script 要素のサンプルソース
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ct = canvas.getContext('2d');
ct.strokeStyle = '#009900';
ct.strokeRect(50, 50, 200, 200);
}
</script>
<script src="/js/script.js" charset="utf-8"></script>
<script src="/js/jquery.js">/* jQuery の読み込み */</script>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |