HTMLScriptElement

HTML script elements expose the HTMLScriptElement interface, which provides special properties and methods (beyond the regular HTMLElement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <script> elements.

Properties

Inherits properties from its parent, HTMLElement.

Name Type Description
type DOMString Represents the MIME type of the script. It reflects the type attribute. For how to parse exotic programming languages, please read this article.
src DOMString Represents gives the address of the external script resource to use. It reflects the src attribute.
htmlFor DOMString The htmlFor property sets or returns the value of the for attribute of a label. The for attribute specifies which form element a label is bound to.
event DOMString HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
charset DOMString Represents the character encoding of the external script resource. It reflects the charset attribute.
async Boolean

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

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

Note: The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation requirements are therefore by necessity scattered throughout the specification. These algorithms describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for <script> start and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the handling of scripting, etc.

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.
defer Boolean
crossOrigin DOMString Is a DOMString that corresponds to the CORS setting for this script element. See CORS settings attributes for details. It controls, for scripts that are obtained from other origins, whether error information will be exposed.
text DOMString

The IDL attribute text must return a concatenation of the contents of all the Text nodes that are children of the <script> element (ignoring any other nodes such as comments or elements), in tree order. On setting, it must act the same way as the textContent IDL attribute.

Note: When inserted using the document.write() method, <script> elements execute (typically synchronously), but when inserted using innerHTML and outerHTML attributes, they do not execute at all.

Methods

No specific method; inherits properties from its parent, HTMLElement.

Examples

Dynamically importing scripts

Let's create a function named importScript(url[, onloadFunction]) able to import new scripts within a document creating a <script> node immediately before the <script> which hosts the following code (got through document.currentScript). These scripts will be asynchronously executed. For more details, see the defer and async properties.

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;
}

…the same thing, but appending the new scripts as last childs of the <head> tag, instead of appending them immediately before the document.currentScript element:

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

Sample usage:

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

Specifications

Specification Status Comment
HTML Living Standard
HTMLScriptElement		 Living Standard No change from HTML5.
HTML 5.1
HTMLScriptElement		 Recommendation  
HTML5
HTMLScriptElement		 Recommendation The following properties are now obsolete: htmlFor,.
Document Object Model (DOM) Level 2 HTML Specification
HTMLScriptElement		 Obsolete No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification
HTMLScriptElement		 Obsolete Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
async (Yes) 3.6 (1.9.2) 10 未实现 (Yes)
defer (Yes) 3.5 (1.9.1)

4 (follows a spec of its own)

10 (by the spec)

 未实现 (Yes)
crossOrigin WebKit bug 81438 13 (13) bug 696301 未实现 未实现 WebKit bug 81438
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
async (Yes) 1.0 (1.0) 未实现 ? (Yes)
defer (Yes) 1.0 (1.0) 未实现 ? (Yes)
crossOrigin ? ? ? ? ?

Gecko-specific notes

Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), inserting script elements that have been created by calling document.createElement("script") into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set the async property to false on them.

Also, <script> elements inside <iframe>, <noembed> and <noframes> elements are now executed, for the same reasons.

See also

文档标签和贡献者