HTMLScriptElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML の <script>
要素は HTMLScriptElement
インターフェイスを公開しています。これは <script>
要素の動作や実行を操作するための特別なプロパティやメソッドを(通常の HTMLElement
から継承によって利用できるものに加えて)提供します。
JavaScript ファイルは text/javascript
の MIME タイプで提供されます。しかし、ブラウザーは寛大であり、スクリプトが画像型 (image/*
)、動画型 (video/*
)、音声型 (audio/*
)、または text/csv
で提供されている場合のみブロックされます。スクリプトがブロックされた場合、その要素は error
イベントを受け取ります。それ以外の場合は、load
イベントを受け取ります。
インスタンスプロパティ
親である HTMLElement
から継承したプロパティもあります。
HTMLScriptElement.attributionSrc
安全なコンテキスト用 Experimental-
<script>
要素のattributionsrc
属性をプログラムで取得・設定し、その属性値を反映します。attributionsrc
はブラウザーにスクリプトリソースリクエストと一緒にAttribution-Reporting-Eligible
ヘッダーを送信することを指定します。サーバー側では、これはレスポンスでAttribution-Reporting-Register-Source
またはAttribution-Reporting-Register-Trigger
ヘッダーを送信するトリガーとして用いられ、それぞれ JavaScript ベースの属性ソースまたは属性トリガーを登録します。 HTMLScriptElement.async
-
スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、
async
プロパティをtrue
に設定すると、構文解析と並列に外部スクリプトが取得され、利用できるようになるとすぐに評価されます。モジュールスクリプトの場合、async
プロパティをtrue
に設定すると、スクリプトとその依存関係がすべて並列に取得され、利用できるようになるとすぐに評価されます。 HTMLScriptElement.blocking
Experimental-
スクリプトを取得する際に特定の操作を実行しないことを示す文字列です。これは
<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
プロパティを参照してください。
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>
タグの子として追加するものです。
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;
}
サンプルの使用法は次の通りです。
affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
alert('スクリプト "myScript2.js" は正しく読み込まれました。');
});
あるスクリプト種別に対応しているかどうかをチェック
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 と似たコードの断片だが、別なグローバルコンテキストで実行されるもの)