View in EnglishAlways switch to English

HTMLScriptElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

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`	async 和 defer 属性值为 bool，它用来说明 script 脚本应该如何执行。在没有 src 属性的情况下，async 和 defer 属性可以不指定值。使用该属性有三种模式可供选择，如果 async 属性存在，脚本将异步执行，只要它是可用的，如果 async 属性不存在，而 defer 属性存在，脚本将会在页面完成解析后执行，如果都不存在，那么脚本会在 useragent 解析页面之前被取出并立刻执行。备注：这些属性的具体处理细节非常复杂，涉及 HTML 的许多不同方面，因此分散在整个规范中。这些算法描述了核心思想，但它们依赖于 HTML、外部内容和XML 中 `<script>`开始和结束标记的解析规则；`document.write()` 方法的规则；脚本处理等等。延迟属性可以指定即使指定异步属性，导致遗留 Web 浏览器只支持推迟（而不是异步）回落推迟行为而不是同步阻塞是默认的行为。
`defer`	`Boolean`
`crossOrigin`实验性	`DOMString`	反馈该脚本元素CORS 设置的字符串。对其他源的脚本，此属性控制错误信息的暴露情况。
`text`	`DOMString`	一个字符串，用于按树形顺序连接并返回`<script>` 元素（忽略注释等其他节点）内所有文本节点的内容。在设置时，它的作用与`textContent` IDL 属性相同。备注：当插入使用`document.write()` 方法，`<script>` 元素执行（通常是同步），但当插入使用 innerHTML 和 outerHTML 属性，它们不执行。

方法

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

示例

动态导入脚本

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

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> 标签的子节点追加。

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]);

示例用法：

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