HTMLScriptElement

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

HTML <script> 元素公開了 HTMLScriptElement 介面，該介面提供了用於操作 <script> 元素行為和執行的特殊屬性和方法（超越了繼承的 HTMLElement 介面）。

JavaScript 檔案應使用 text/javascript MIME 型別提供服務，但瀏覽器很寬容，僅當指令碼以影像型別 (image/*)、影片型別 (video/*)、音訊型別 (audio/*) 或 text/csv 提供服務時才會阻止。如果指令碼被阻止，其元素將接收一個 error 事件；否則，它將接收一個 load 事件。

例項屬性

繼承自其父級 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: 一個字串，反映了指令碼元素的 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: 一個字串，反映了 referrerPolicy HTML 屬性，該屬性指示在獲取指令碼以及由該指令碼執行的獲取時應使用哪個引用者。
HTMLScriptElement.src: 一個字串，表示外部指令碼的 URL；這可以作為直接在文件中嵌入指令碼的替代方法。它反映了 <script> 元素的 src 屬性。
HTMLScriptElement.text: 一個字串，將 <script> 元素內的所有 Text 節點的（忽略其他節點，如註釋）內容按樹順序連線並返回。在設定時，它的作用與 Node.textContent 屬性相同。

注意： 當使用 Document.write() 方法插入時，<script> 元素會執行（通常是同步執行），但當使用 Element.innerHTML 或 Element.outerHTML 插入時，它們根本不會執行。
HTMLScriptElement.type: 一個字串，表示指令碼的型別。它反映了 <script> 元素的 type 屬性。

靜態方法

HTMLScriptElement.supports(): 如果瀏覽器支援指定型別的指令碼，則返回 true，否則返回 false。此方法提供了一種簡單統一的指令碼相關功能檢測方法。

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");
}

經典指令碼被假定在所有瀏覽器中都受支援。