HTMLScriptElement
HTML の <script> 要素は HTMLScriptElement インターフェイスを公開しています。これは（通常の HTMLElement から継承によって利用できるものに加えて） <script> 要素の動作や実行を操作するための特別なプロパティやメソッドを提供します。
JavaScript ファイルは application/javascript の MIME タイプで提供されますが、 しかし、ブラウザーは寛大で、スクリプトが画像型 (image/*)、動画型 (video/*)、音声型 (audio/*)、または text/csv で提供されている場合のみブロックされます。スクリプトがブロックされた場合、その要素は error イベントを受け取ります。それ以外の場合は、load イベントを受け取ります。
インスタンスプロパティ
親である HTMLElement から継承したプロパティもあります。
HTMLScriptElement.type(en-US)-
文字列で、スクリプトの MIME タイプを表します。これは
type属性を反映します。 HTMLScriptElement.src(en-US)-
文字列で、外部スクリプトの 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(en-US)-
文字列で、 script 要素の CORS 設定 を反映します。他のオリジンのスクリプトについては、エラー情報が公開されるかどうかを制御します。
HTMLScriptElement.text(en-US)-
この
<script>要素の中にあるすべてのTextノード（コメントなどの他のノードを除く）の内容をツリー順で連結した文字列です。設定すると、textContentIDL 属性と同様に動作します。メモ:
document.write()メソッドで挿入された場合、<script>要素は（ふつう同期的に）実行されますが、innerHTMLまたはouterHTMLを使用して挿入された場合は実行されません。 HTMLScriptElement.fetchPriority(en-US) Experimental-
オプションの文字列で、ブラウザーが外部スクリプトの取得を他の外部スクリプトと比較してどのように優先させるべきかのヒントを表します。この値を指定する場合は、許可された値のいずれかでなければなりません。高い優先度で取得する場合は
high、低い優先度で取得する場合はlow、優先度がない場合はauto（既定値）となります。 HTMLScriptElement.noModule(en-US)-
論理値で、 true ならば ES モジュールに対応したブラウザーにおいてスクリプトの実行を停止します。 — JavaScript モジュールに対応していない古いブラウザーで代替スクリプトを実行するために使用します。
HTMLScriptElement.referrerPolicy-
文字列で、 HTML 属性
referrerPolicyを反映し、スクリプトを取得する際、そのスクリプトの取得が完了した時にどのリファラーを使用するかを示します。
静的メソッド
HTMLScriptElement.supports_static-
ブラウザーが指定された種類のスクリプトに対応している場合は
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_static は、ブラウザーが特定の種類のスクリプトに対応しているかどうかをチェックする統一的な仕組みを提要します。
以下の例では、 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 と似たコードの断片だが、別なグローバルコンテキストで実行されるもの）