HTMLScriptElement

HTML の <script> 要素は HTMLScriptElement インターフェイスを公開しています。これは（通常の HTMLElement から継承によって利用できるものに加えて） <script> 要素の動作や実行を操作するための特別なプロパティやメソッドを提供します。

JavaScript ファイルは application/javascript の MIME タイプで提供されますが、 しかし、ブラウザーは寛大で、スクリプトが画像型 (image/*)、動画型 (video/*)、音声型 (audio/*)、または text/csv で提供されている場合のみブロックされます。スクリプトがブロックされた場合、その要素は error イベントを受け取ります。それ以外の場合は、load イベントを受け取ります。

EventTarget Node Element HTMLElement HTMLScriptElement

インスタンスプロパティ

親である 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 種類あります。

  1. async 属性が存在した場合、スクリプトはダウンロードされ次第、非同期に実行されます。
  2. async 属性がなく defer 属性が存在した場合、スクリプトはページの解釈の終了時に実行されます。
  3. どちらの属性もなかった場合、スクリプトは直ちに読み取られて実行され、ページの解釈はブロックされます。

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

オプションの文字列で、ブラウザーが外部スクリプトの取得を他の外部スクリプトと比較してどのように優先させるべきかのヒントを表します。この値を指定する場合は、許可された値のいずれかでなければなりません。高い優先度で取得する場合は 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

関連情報