HTMLScriptElement

在此页

特性
方法
范例
规范
浏览器兼容性
另请参阅
相关话题

HTML <script> elements expose the HTMLScriptElement interface, which provides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited HTMLElement interface).

JavaScript files should be served with the application/javascript MIME 类型 , but browsers are lenient and block them only if the script is served with an image type ( image/* ), video type ( video/* ), audio type ( audio/* )，或 text/csv . If the script is blocked, its element receives an error event; otherwise, it receives a load 事件。

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/EventTarget.html" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="../API/HTMLScriptElement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="406" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLScriptElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

特性

继承的特性来自其父级， HTMLElement .

HTMLScriptElement.type

是


									DOMString

representing the MIME type of the script. It reflects the


								
									type

属性。

HTMLScriptElement.src

是


									DOMString

representing the URL of an external script. It reflects the

src

属性。

HTMLScriptElement.event

是


									DOMString

; an obsolete way of registering event handlers on elements in an HTML document.

HTMLScriptElement.charset

是


									DOMString

representing the character encoding of an external script. It reflects the


								
									charset

属性。

HTMLScriptElement.async


									HTMLScriptElement.defer

async and defer attributes are 布尔 attributes that control how the script should be executed. defer and async attributes must not be specified if the src attribute is absent.

There are three possible execution modes:

若 async attribute is present, then the script will be executed asynchronously as soon as it downloads.
若 async attribute is absent but the defer attribute is present, then the script is executed when the page has finished parsing .
If neither attribute is present, then the script is fetched and executed immediately, blocking further parsing of the page.

defer attribute may be specified with the async attribute, so legacy browsers that only support defer (and not async ) fall back to the defer behavior instead of the default blocking behavior.

注意： The exact processing details for these attributes are complex, involving many different aspects of HTML, and therefore are scattered throughout the specification. These algorithms describe the core ideas, but they rely on the parsing rules for


										<script>

start and end tags in HTML, in foreign content ，和 in XML ; the rules for the


										document.write()

method; the handling of scripting ; and so on.

HTMLScriptElement.crossOrigin

是


									DOMString

反射 CORS setting for the script element. For scripts from other origins , this controls if error information will be exposed.

HTMLScriptElement.text

是 DOMString that joins and returns the contents of all 文本 nodes 在 <script> element (ignoring other nodes like comments) in tree order. On setting, it acts the same way as the textContent IDL attribute.

注意：


										document.write()


										<script>


										innerHTML


										outerHTML

HTMLScriptElement.noModule

是


									布尔

that if true, stops the script's execution in browsers that support ES2015 modules — used to run fallback scripts in older browsers that do not support JavaScript modules.

HTMLScriptElement.referrerPolicy

是


									DOMString

that reflects the


								
									referrerpolicy

HTML attribute indicating which referrer to use when fetching the script, and fetches done by that script.

方法

No specific methods; inherits methods from its parent, HTMLElement .

范例

Dynamically importing scripts

Let's create a function that imports new scripts within a document creating a <script> node immediately before the <script> that hosts the following code (through document.currentScript ). These scripts will be asynchronously executed. For more details, see the defer and async 特性。

function loadError(oError) {
  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
}
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;
}

This next function, instead of prepending the new scripts immediately before the document.currentScript element, appends them as children of the <head> 标签。

function loadError(oError) {
  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
}
function affixScriptToHead(url, onloadFunction) {
  var newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) { newScript.onload = onloadFunction; }
  document.head.appendChild(newScript);
  newScript.src = url;
}

Sample usage:

affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", function () { alert("The script \"myScript2.js\" has been correctly loaded."); });

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLScriptElement' in that specification.	实时标准
HTML 5.1 The definition of 'HTMLScriptElement' in that specification.	推荐
HTML5 The definition of 'HTMLScriptElement' in that specification.	推荐	The following properties are now obsolete: `htmlFor,` .
DOM (文档对象模型) 2 级 HTML 规范 The definition of 'HTMLScriptElement' in that specification.	过时	无变化自 DOM (文档对象模型) 1 级规范 .
DOM (文档对象模型) 1 级规范 The definition of 'HTMLScriptElement' in that specification.	过时	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`HTMLScriptElement`	Chrome 1	Edge 12	Firefox 1	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`async`	Chrome Yes	Edge 12	Firefox 3.6	IE 10	Opera No	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`charset`	Chrome 1	Edge 12	Firefox 1	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`crossOrigin`	Chrome 1	Edge 14	Firefox 13	IE No	Opera No	Safari 4	WebView Android Yes	Chrome Android Yes	Firefox Android 14	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`defer`	Chrome Yes	Edge 12	Firefox 3.5	IE 10 10 不支持 4 — 10 Non-standard implementation	Opera No	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`event` 弃用	Chrome 1	Edge 12	Firefox 1	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`htmlFor` 弃用	Chrome 1	Edge 12	Firefox 1	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`noModule`	Chrome Yes	Edge 16	Firefox 60 60 不支持 55 — 60 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera No	Safari No	WebView Android Yes	Chrome Android Yes	Firefox Android 60 60 不支持 55 — 60 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`referrerPolicy`	Chrome 70	Edge ≤79	Firefox 65	IE No	Opera Yes	Safari No	WebView Android 70	Chrome Android 70	Firefox Android 65	Opera Android Yes	Safari iOS No	Samsung Internet Android 10.0
`src`	Chrome 1	Edge 12	Firefox 1	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`text`	Chrome 1	Edge 12	Firefox 1	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`type`	Chrome 1	Edge 12	Firefox 1	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持
不支持
实验。期望将来行为有所改变。
弃用。不要用于新网站。

用户必须明确启用此特征。

另请参阅

HTML <script> element
HTML <noscript> element
document.currentScript
Web 工作者 (code snippets similar to scripts but executed in another global context )
Ryan Grove's <script> and <link> node event compatibility chart

元数据

最后修改： May 27, 2020

在此页

特性

方法

范例

Dynamically importing scripts

规范

浏览器兼容性

图例

另请参阅

相关话题