HTMLScriptElement
HTML の <script>
要素は HTMLScriptElement
インターフェイスを公開しています。これは(通常の HTMLElement
から継承によって利用できるものに加えて) <script>
要素の動作や実行を操作するための特別なプロパティやメソッドを提供します。
JavaScript ファイルは application/javascript
の MIME タイプで提供されますが、 しかし、ブラウザーは寛大で、スクリプトが画像型 (image/*
)、動画型 (video/*
)、音声型 (audio/*
)、または text/csv
で提供されている場合のみブロックされます。スクリプトがブロックされた場合、その要素は error
イベントを受け取ります。それ以外の場合は、load
イベントを受け取ります。
インスタンスプロパティ
親である HTMLElement
から継承したプロパティもあります。
HTMLScriptElement.type
-
文字列で、スクリプトの MIME タイプを表します。これは
type
属性を反映します。 HTMLScriptElement.src
-
文字列で、外部スクリプトの URL を表します。これは
src
属性を反映します。 HTMLScriptElement.event
非推奨-
文字列です。 HTML 文書で要素にイベントハンドラーを設定するための廃止された方法です。
HTMLScriptElement.charset
非推奨-
文字列で、外部スクリプトの文字エンコーディングを表します。これは
charset
属性を反映します。 HTMLScriptElement.async
,HTMLScriptElement.defer
-
async
およびdefer
属性は論理属性で、スクリプトの実行方法を制御します。defer
およびasync
属性はsrc
属性がないときには指定しないでください。取りうる実行モードは 3 種類あります。
async
属性が存在した場合、スクリプトはダウンロードされ次第、非同期に実行されます。async
属性がなくdefer
属性が存在した場合、スクリプトはページの解釈の終了時に実行されます。- どちらの属性もなかった場合、スクリプトは直ちに読み取られて実行され、ページの解釈はブロックされます。
defer
属性はasync
属性と共に指定することができます。defer
のみに対応している(そしてasync
には対応していない)ブラウザーでは、既定のブロックが発生する動作の代わりにdefer
で代替することができます。メモ: これらの属性における正確な処理の詳細は、 HTML の多くの異なる側面を含むため複雑であり、そのため仕様全体に散らばっています。これらのアルゴリズムは、核となる考えを記述していますが、
<script>
の開始および終了タグの HTML、外部コンテンツ、XMLにおける解釈ルール、document.write()
メソッドのルール、スクリプティングの扱い、などによります。 HTMLScriptElement.crossOrigin
-
文字列で、 script 要素の CORS 設定 を反映します。他のオリジンのスクリプトについては、エラー情報が公開されるかどうかを制御します。
HTMLScriptElement.text
-
この
<script>
要素の中にあるすべてのText
ノード(コメントなどの他のノードを除く)の内容をツリー順で連結した文字列です。設定すると、textContent
IDL 属性と同様に動作します。メモ:
document.write()
メソッドで挿入された場合、<script>
要素は(ふつう同期的に)実行されますが、innerHTML
またはouterHTML
を使用して挿入された場合は実行されません。 HTMLScriptElement.fetchPriority
Experimental-
オプションの文字列で、ブラウザーが外部スクリプトの取得を他の外部スクリプトと比較してどのように優先させるべきかのヒントを表します。この値を指定する場合は、許可された値のいずれかでなければなりません。高い優先度で取得する場合は
high
、低い優先度で取得する場合はlow
、優先度がない場合はauto
(既定値)となります。 HTMLScriptElement.noModule
-
論理値で、 true ならば ES モジュールに対応したブラウザーにおいてスクリプトの実行を停止します。 — JavaScript モジュールに対応していない古いブラウザーで代替スクリプトを実行するために使用します。
HTMLScriptElement.referrerPolicy
-
文字列で、 HTML 属性
referrerPolicy
を反映し、スクリプトを取得する際、そのスクリプトの取得が完了した時にどのリファラーを使用するかを示します。
静的メソッド
HTMLScriptElement.supports()
-
ブラウザーが指定された種類のスクリプトに対応している場合は
true
を、それ以外の場合はfalse
を返します。 このメソッドは、スクリプト関連の機能検出のためのシンプルで統一された方法を提供します。
インスタンスメソッド
独自のメソッドはありません。親である HTMLElement
からメソッドを継承しています。
イベント
独自のイベントはありません。親である HTMLElement
からイベントを継承しています。
例
スクリプトの動的なインポート
文書内の新しいスクリプトをインポートする関数を作成しましょう。次のコードをホストする <script>
の直前に <script>
ノードを作成します(document.currentScript
を使用)。これらのスクリプトは非同期で実行されます。詳細については、 defer
および async
プロパティを参照してください。
function loadError(oError) {
throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}
function prefixScript(url, onloadFunction) {
const newScript = document.createElement("script");
newScript.onerror = loadError;
if (onloadFunction) { newScript.onload = onloadFunction; }
document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
newScript.src = url;
}
次の関数は、新しいスクリプトを document.currentScript
要素の直前に追加するのではなく、 <head>
タグの子として追加するものです。
function loadError(oError) {
throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}
function affixScriptToHead(url, onloadFunction) {
const newScript = document.createElement("script");
newScript.onerror = loadError;
if (onloadFunction) { newScript.onload = onloadFunction; }
document.head.appendChild(newScript);
newScript.src = url;
}
サンプルの使用法:
affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => { alert("The script \"myScript2.js\" has been correctly loaded."); });
あるスクリプト種別に対応しているかどうかをチェック
HTMLScriptElement.supports()
は、ブラウザーが特定の種類のスクリプトに対応しているかどうかをチェックする統一的な仕組みを提要します。
以下の例では、 noModule
属性の存在を代替として使用して、モジュールの対応をチェックする方法を示しています。
function checkModuleSupport() {
if ('supports' in HTMLScriptElement) {
return HTMLScriptElement.supports('module');
}
return 'noModule' in document.createElement('script');
}
クラシックスクリプトはすべてのブラウザーで対応していると想定できます。
仕様書
Specification |
---|
HTML Standard # htmlscriptelement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML の
<script>
要素 - HTML の
<noscript>
要素 document.currentScript
- ウェブワーカー (script と似たコードの断片だが、別なグローバルコンテキストで実行されるもの)