HTMLScriptElement

基线广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本上运行。它已在浏览器中可用，自 2015 年 7 月.

HTML <script> 元素公开 **HTMLScriptElement** 接口，该接口提供用于操作 <script> 元素的行为和执行的特殊属性和方法（超出了继承的 HTMLElement 接口）。

JavaScript 文件应使用 text/javascript MIME 类型提供服务，但浏览器很宽容，仅当脚本使用图像类型 (image/*)、视频类型 (video/*)、音频类型 (audio/*) 或 text/csv 提供服务时才会阻止它们。如果脚本被阻止，则其元素会接收 error 事件；否则，它会接收 load 事件。

实例属性

继承其父级 HTMLElement 的属性。

HTMLScriptElement.attributionSrc 安全上下文实验性: 以编程方式获取和设置 attributionsrc 属性在 <script> 元素上，反映该属性的值。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: 一个布尔值，如果为真，则停止在支持 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");
}

假设所有浏览器都支持经典脚本。

规范

规范
HTML 标准 # htmlscriptelement

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

HTML <script> 元素
HTML <noscript> 元素
document.currentScript
Web Workers（类似于脚本的代码片段，但在另一个全局上下文中执行）