HTMLScriptElement

HTML 脚本元素暴露 HTMLScriptElement 接口,它提供了特殊的属性和方法 (超出了常规 HTMLElement 对象接口,他们也可以通过继承操纵<脚本>元素的布局和演示。)

属性

从其父类中继承的属性,HTMLElement

Name Type Description
type DOMString 代表了脚本的 MIME 类型。它反映了 type 属性。如何解析奇异的编程语言,请阅读这篇文章。
src DOMString 代表了使用外部脚本资源的地址。它反映了 src 属性。
htmlFor 已弃用 DOMString 他 htmlFor 属性设置或返回的值的属性标签。属性指定的表单元素绑定到一个标签。
event 已弃用 DOMString HTML DOM 事件允许 JavaScript 注册不同的事件处理程序的元素在一个 HTML 文档。
charset DOMString 代表外部脚本资源的字符编码。它反映了 charset 属性。
async Boolean (en-US)

async 和 defer 属性值为 bool,它用来说明 script 脚本应该如何执行。在没有 src 属性的情况下,async 和 defer 属性可以不指定值。

使用该属性有三种模式可供选择,如果 async 属性存在,脚本将异步执行,只要它是可用的,如果 async 属性不存在,而 defer 属性存在,脚本将会在页面完成解析后执行,如果都不存在,那么脚本会在 useragent 解析页面之前被取出并立刻执行。

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

延迟属性可以指定即使指定异步属性,导致遗留 Web 浏览器只支持推迟(而不是异步)回落推迟行为而不是同步阻塞是默认的行为。

defer Boolean (en-US)
crossOrigin 实验性 DOMString 反馈该脚本元素 CORS 设置的字符串。对其他的脚本,此属性控制错误信息的暴露情况。
text DOMString

一个字符串,用于按树形顺序连接并返回 <script> 元素(忽略注释等其他节点)内所有文本节点的内容。在设置时,它的作用与 textContent IDL 属性相同。

备注:当插入使用 document.write() 方法,<script> 元素执行(通常是同步),但当插入使用 innerHTML 和 outerHTML 属性,它们不执行。

方法

没有具体的方法;属性从其父类 HTMLElement 继承。

示例

动态导入脚本

让我们创建一个名为 importScript 的函数,它能够在一个文档中导入新的脚本,创建一个 <script> 节点,并立即插入到宿主 <script> 之前(通过 document.currentScript 可以获取宿主 script 标签)。这些脚本将异步执行。更多细节,请参见 defer 和 async 属性。

js
function loadError(oError) {
  throw new URIError("The script " + oError.target.src + " is not accessible.");
}

function importScript(sSrc, fOnload) {
  var oScript = document.createElement("script");
  oScript.type = "text/javascript";
  oScript.onerror = loadError;
  if (fOnload) {
    oScript.onload = fOnload;
  }
  document.currentScript.parentNode.insertBefore(
    oScript,
    document.currentScript,
  );
  oScript.src = sSrc;
}

以下函数不是将新脚本直接插入在 document.currentScript 元素之前,而是将它们作为 <head> 标签的子节点追加。

js
var importScript = (function (oHead) {
  function loadError(oError) {
    throw new URIError(
      "The script " + oError.target.src + " is not accessible.",
    );
  }

  return function (sSrc, fOnload) {
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.onerror = loadError;
    if (fOnload) {
      oScript.onload = fOnload;
    }
    oHead.appendChild(oScript);
    oScript.src = sSrc;
  };
})(document.head || document.getElementsByTagName("head")[0]);

示例用法:

js
importScript("myScript1.js");
importScript(
  "myScript2.js",
  /* onload function: */ function () {
    alert(
      'You read this alert because the script "myScript2.js" has been correctly loaded.',
    );
  },
);

规范

Specification
HTML Standard
# htmlscriptelement

浏览器兼容性

BCD tables only load in the browser

参见