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

经典脚本被假定在所有浏览器中都受支持。