<script> and <noscript>
<script> は HTML の要素で、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 <script> 要素は WebGL の GLSL shader プログラミング言語、 JSON 等の他の言語にも使用することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 2 | |
| HTML 属性 | ||||||
async | 1 | 12 | 3.6 | ≤4 | 18 | ≤3.2 |
| crossorigin 属性は、audio, img, link, script, video の各要素で有効です。CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 | 19 | 14 | 14 | 6 | 25 | 6 |
defer | 1 | 12 | 3.5 | 3 | 18 | 2 |
integrity | 45 | 17 | 43 | 11.1 | 45 | 11.3 |
src | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| type は 要素の属性で、その要素で表されるスクリプトの種類（クラシックスクリプト、JavaScript モジュール、インポートマップ、データブロック）を示します。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| HTML の script 要素は HTMLScriptElement インターフェイスを公開しています。これは 要素の動作や実行を操作するための特別なプロパティやメソッドを（通常の HTMLElement から継承によって利用できるものに加えて）提供します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| async は HTMLScriptElement インターフェイスのプロパティで、スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、async プロパティを true に設定すると、構文解析と並列に外部スクリプトが取得され、利用できるようになるとすぐに評価されます。モジュールスクリプトの場合、async プロパティを true に設定すると、スクリプトとその依存関係がすべて並列に取得され、利用できるようになるとすぐに評価されます。 | 6 | 12 | 3.6 | 5.1 | 18 | 5 |
| crossOrigin は HTMLScriptElement インターフェイスのプロパティで、この script 要素のCORS設定を反映します。他のオリジンからのクラシックスクリプトの場合、完全なエラー情報が公開されるかどうかを制御します。モジュールスクリプトでは、スクリプト自身とインポートするスクリプトを制御します。詳細は CORS 設定属性を参照してください。 | 19 | 14 | 14 | 6 | 25 | 6 |
| defer は HTMLScriptElement インターフェイスのプロパティで、スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、defer プロパティを true に設定すると、外部スクリプトは文書が構文解析された後、DOMContentLoaded イベントを発行する前に実行されます。モジュールスクリプトの場合、defer プロパティは何の効果もありません。 | 1 | 12 | 3.5 | 3 | 18 | 1 |
| integrity は HTMLScriptElement インターフェイスのプロパティで、取得されたリソースが予期せぬ改変なしに配信されたことを確認するためにブラウザーが使用することができる、インラインメタデータを格納する文字列です。 | 45 | 17 | 43 | 11.1 | 45 | 11.3 |
| src は HTMLScriptElement インターフェイスのプロパティで、外部スクリプトの URL を表す文字列です。文書内に直接スクリプトを埋め込む代わりに使用することができます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| supports() は HTMLScriptElement インターフェイスの静的メソッドで、ユーザーエージェントが対応しているスクリプトの種類を機能的に検出するための、単純で一貫したメソッドを提供します。 | 96 | 96 | 94 | 16 | 96 | 16 |
| text は HTMLScriptElement インターフェイスのプロパティで、script 要素内のテキストコンテンツを反映する文字列です。これは Node.textContent プロパティと同じ方法で動作します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| type は HTMLScriptElement インターフェイスのプロパティで、スクリプトの種類を反映する文字列です。 | 1 | 12 | 1 | 3 | 18 | 1 |
| その他 | ||||||
| は HTML の要素で、ブラウザーがこのページ上のスクリプトの種類に対応していない場合や、スクリプトの実行が無効にされている場合に表示する HTML の部分を定義します。 | 1 | 12 | 1 | 3 | 18 | 2 |
- Firefox 4 から、`document.createElement("script")` を呼び出して作成された <script> 要素を挿入しても、挿入順に実行されなくなりました。この変更により、Firefox は仕様に正しく従うことができます。スクリプトを挿入した外部スクリプトを挿入順に実行させるには、`.async=false`を設定してください。
- crossorigin` 属性は WebKit のバグ 81438 で実装されました。
- crossorigin` 属性は WebKit のバグ 81438 で実装されました。
- ページが XHTML (`application/xhtml+xml`) として提供される場合、Chrome は `defer` 属性を持つスクリプトを遅延させない。
- Firefox 3.6 以降、 `src` 属性を持たないスクリプトでは `defer` 属性は無視されます。しかし、Firefox 3.5 では、インラインスクリプトであっても `defer` 属性が設定されていれば遅延されます。
- Chrome Android でページが XHTML (`application/xhtml+xml`) として提供される場合に `defer` 属性を持つスクリプトが遅延されない。
基本構文
<script src="app.js" defer></script>
<script type="module" src="module.js"></script>
<script>
console.log('インラインスクリプト');
</script>
<noscript>Please enable JavaScript.</noscript>実務での使いどころ
-
<script> and <noscript> の活用
<script> は HTML の要素で、実行できるコードやデータを埋め込むために使用します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。