HTMLScriptElement - 操作 <script> 元素

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

JavaScript 文件应该提供的 MIME type 为 application/javascript，但浏览器是宽松的，只有在脚本以图像类型（image/*），视频类型（video/*），音频类型（audio/*）或 text/csv 提供时才阻止它们。如果脚本被阻止，则其元素将收到 error 事件；否则，它会收到 success 事件。

属性

从其父接口 HTMLElement 继承了属性。

HTMLScriptElement.type

一个 DOMString，表示脚本的 MIME 类型。它反映了 type 属性。

HTMLScriptElement.src

一个 DOMString，用于获取和设置外部脚本的 URL。它反映了 src 属性。

HTMLScriptElement.event

一个 DOMString，在 HTML 文档中的元素上注册事件处理程序的古老，古怪的方式。

HTMLScriptElement.charset

一个 DOMString，表示外部脚本的字符编码。它反映了 charset 属性。

HTMLScriptElement.async

一个 Boolean，async 和 defer 都是 boolean 属性，用于控制脚本的执行方式。如果缺少 defer 属性，则不能指定 async 和 src 属性。

有三种可能的执行模式：

  1. 如果存在 async 属性，则脚本将在下载后立即异步执行。

  2. 如果没有 async 属性但是存在 defer 属性，则在页面完成解析时执行脚本。

  3. 如果两个属性都不存在，则立即获取并执行脚本，阻止进一步解析页面。

defer 属性可以和 async 属性一起使用，因此只支持 defer（而不是 async）的旧版浏览器会回退到 defer 行为，而不是默认的阻塞行为。

注意： 这些属性的具体处理细节很复杂，涉及 HTML 的许多不同方面，因此分散在整个规范中。这些算法 描述了核心思想，但它们依赖于 HTML 中的 <script> 开始和结束标记，外部内容和 XML 中的解析规则；document.write() 方法的规则；脚本的处理；等等。

HTMLScriptElement.defer

一个 Boolean。

HTMLScriptElement.crossOrigin

一个 DOMString，反映了脚本元素的 CORS 设置。对于来自其他源的脚本，它控制是否显示错误信息。

HTMLScriptElement.text

一个 DOMString。text IDL 属性表示按树节点的顺序，将 <script> 元素内的 Text 节点](/en-US/docs/DOM/Text)（忽略其他节点，如注释）的内容连接起来并返回。它的作用方式与 textContent IDL 属性相同。

注意： 当使用 document.write() 方法插入 <script> 元素时，它内容会执行（通常是同步的），但是当使用 innerHTML 或 outerHTML 插入时，它们完成不会执行。

HTMLScriptElement.noModule

一个 Boolean，表示在支持 ES2015 模块 的浏览器中不运行该脚本 - 用于在不支持 JavaScript 模块的旧浏览器中运行回退脚本。

HTMLScriptElement.referrerPolicy

一个 DOMString，反映了referrerpolicy HTML 属性，指示在获取脚本时使用哪个 referrer。

方法

没有具体方法; 从其父接口 HTMLElement 继承了方法。

实例

动态引入脚本

让我们创建一个函数，在当前代码的 <script> 标签之前创建一个 <script> 节点（通过 document.currentScript），来向文档中引入新脚本。这些脚本将以异步方式执行。有关更多详细信息，请参阅defer 和 async 属性。

function loadError(oError) {
  throw new URIError("脚本 " + oError.target.src + " 不能正确加载。");
}

function prefixScript(url, onloadFunction) {
  var 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) {
  var 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", function () { alert("脚本 \"myScript2.js\" 已加载完成。"); });

规范

规范 状态 备注
HTML Living Standard
HTMLScriptElement 的定义		 现行的标准 -
HTML 5.1
HTMLScriptElement 的定义		 推荐 -
HTML5
HTMLScriptElement 的定义		 推荐 以下属性现已过时：htmlFor。
Document Object Model (DOM) Level 2 HTML Specification
HTMLScriptElement 的定义		 已过时 自从 Document Object Model (DOM) Level 1 Specification 以来没有变化。
Document Object Model (DOM) Level 1 Specification
HTMLScriptElement 的定义		 已过时 初始定义。

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持1 支持1 支持 支持 支持
async 支持 支持3.610 不支持 支持
charset1 支持1 支持 支持 支持
crossOrigin1 支持13 不支持 不支持4
defer 支持 支持3.5

10

4 — 101

 不支持 支持
event1 支持1 支持 支持 支持
htmlFor1 支持1 支持 支持 支持
noModule 支持 不支持

60

55 — 60

 不支持 不支持 不支持
src1 支持1 支持 支持 支持
text1 支持1 支持 支持 支持
type1 支持1 支持 支持 支持

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持 支持 支持 支持4 未知 支持 支持
async 支持 支持 支持4 未知 支持 支持
charset 支持 支持 支持4 未知 支持 支持
crossOrigin 支持 支持 支持14 未知 支持 支持
defer 支持 支持 支持4 未知 支持 支持
event 支持 支持 支持4 未知 支持 支持
htmlFor 支持 支持 支持4 未知 支持 支持
noModule 支持 支持 支持

60

55 — 60

 未知 支持 支持
src 支持 支持 支持4 未知 支持 支持
text 支持 支持 支持4 未知 支持 支持
type 支持 支持 支持4 未知 支持 支持

1. 非标准实现

相关链接