1. 開発者向けのウェブ技術
  2. Web API
  3. HTMLScriptElement

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTMLScriptElement

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

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

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

EventTarget Node Element HTMLElement HTMLScriptElement

インスタンスプロパティ

親である HTMLElement から継承したプロパティもあります。

HTMLScriptElement.attributionSrc 安全なコンテキスト用

<script> 要素の attributionsrc 属性をプログラムで取得・設定し、その属性値を反映します。attributionsrc はブラウザーにスクリプトリソースリクエストと一緒に Attribution-Reporting-Eligible ヘッダーを送信することを指定します。サーバー側では、これはレスポンスで Attribution-Reporting-Register-Source または Attribution-Reporting-Register-Trigger ヘッダーを送信するトリガーとして用いられ、それぞれ JavaScript ベースの帰属ソースまたは帰属トリガーを登録します。

HTMLScriptElement.async

スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、async プロパティを true に設定すると、構文解析と並列に外部スクリプトが取得され、利用できるようになるとすぐに評価されます。モジュールスクリプトの場合、async プロパティを true に設定すると、スクリプトとその依存関係がすべて並列に取得され、利用できるようになるとすぐに評価されます。

HTMLScriptElement.blocking

スクリプトを取得する際に特定の操作を実行しないことを示す文字列です。これは <script> 要素の blocking 属性を反映しています。

HTMLScriptElement.charset

文字列で、外部スクリプトの文字エンコーディングを表します。これは charset 属性を反映します。

HTMLScriptElement.crossOrigin

文字列で、 script 要素の CORS 設定 を反映します。他のオリジンのスクリプトについては、エラー情報が公開されるかどうかを制御します。

HTMLScriptElement.defer

スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、defer プロパティを true に設定すると、外部スクリプトは文書が構文解析された後、DOMContentLoaded イベントを発行する前に実行されます。モジュールスクリプトの場合、defer プロパティは何の効果もありません。

HTMLScriptElement.event

文字列です。 HTML 文書で要素にイベントハンドラーを設定するための廃止された方法です。

HTMLScriptElement.fetchPriority

オプションの文字列で、ブラウザーが外部スクリプトの取得を他の外部スクリプトと比較してどのように優先させるべきかのヒントを表します。この値を指定する場合は、許可された値のいずれかでなければなりません。高い優先度で取得する場合は high 、低い優先度で取得する場合は low 、優先度がない場合は auto （既定値）となります。これは <script> 要素の fetchpriority 属性を反映したものです。

HTMLScriptElement.integrity

取得されたリソースが予期せぬ改変なしに配信されたことを確認するためにブラウザーが使用することができる、インラインメタデータを格納する文字列です。これは <script> 要素の integrity 属性を反映したものです。

HTMLScriptElement.noModule

論理値で、 true ならば ES モジュールに対応したブラウザーにおいてスクリプトの実行を停止します。 — JavaScript モジュールに対応していない古いブラウザーで代替スクリプトを実行するために使用します。

HTMLScriptElement.referrerPolicy

文字列で、 HTML 属性 referrerPolicy を反映し、スクリプトを取得する際、そのスクリプトの取得が完了した時にどのリファラーを使用するかを示します。

HTMLScriptElement.src

文字列で、外部スクリプトの URL を表します。これは src 属性を反映します。これは <script> 要素の src 属性を反映したものです。

HTMLScriptElement.text

この <script> 要素の中にあるすべての Text ノード（コメントなどの他のノードを除く）の内容をツリー順で連結した文字列です。設定した場合は、Node.textContent プロパティと同様に動作します。

メモ: Document.write() メソッドで挿入された場合、 <script> 要素は（ふつう同期的に）実行されますが、 Element.innerHTML または Element.outerHTML を使用して挿入された場合は実行されません。

HTMLScriptElement.type

文字列で、スクリプトの MIME タイプを表します。これは <script> 要素の type 属性を反映したものです。

静的メソッド

HTMLScriptElement.supports_static

ブラウザーが指定された種類のスクリプトに対応している場合は true を、それ以外の場合は false を返します。 このメソッドは、スクリプト関連の機能検出のためのシンプルで統一された方法を提供します。

インスタンスメソッド

独自のメソッドはありません。親である HTMLElement からメソッドを継承しています。

イベント

独自のイベントはありません。親である HTMLElement からイベントを継承しています。

例

スクリプトの動的なインポート

文書内の新しいスクリプトをインポートする関数を作成しましょう。次のコードをホストする <script> の直前に <script> ノードを作成します（document.currentScript を使用）。これらのスクリプトは非同期で実行されます。詳細については、 defer および async プロパティを参照してください。

js
function loadError(oError) {
  throw new URIError(`スクリプト ${oError.target.src} は正しく読み込まれませんでした。`);
}

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> タグの子として追加するものです。

js
function loadError(oError) {
  throw new URIError(`スクリプト ${oError.target.src} は正しく読み込まれませんでした。`);
}

function affixScriptToHead(url, onloadFunction) {
  const newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) {
    newScript.onload = onloadFunction;
  }
  document.head.appendChild(newScript);
  newScript.src = url;
}

サンプルの使用法は次の通りです。

js
affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
  alert('スクリプト "myScript2.js" は正しく読み込まれました。');
});

あるスクリプト種別に対応しているかどうかをチェック

HTMLScriptElement.supports_static は、ブラウザーが特定の種類のスクリプトに対応しているかどうかをチェックする統一的な仕組みを提要します。

以下の例では、 noModule 属性の存在を代替として使用して、モジュールの対応をチェックする方法を示しています。

js
function checkModuleSupport() {
  if ("supports" in HTMLScriptElement) {
    return HTMLScriptElement.supports("module");
  }
  return "noModule" in document.createElement("script");
}

クラシックスクリプトはすべてのブラウザーで対応していると想定できます。

仕様書

仕様書
HTML
# htmlscriptelement

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告