W3cubDocs

/DOM

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.

The script should be served with the text/javascript MIME type, but browsers are lenient and only block them if the script is served with an image type (image/*), a video type (video/*), an audio (audio/*) type, or text/csv. If the script is blocked, an error is sent to the element, if not a success event is sent.

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`	The `async` and `defer` attributes are boolean attributes that indicate how the script should be executed. The `defer` and `async` attributes must not be specified if the `src` attribute is not present. There are three possible modes that can be selected using these attributes. If the `async` attribute is present, then the script will be executed asynchronously, as soon as it is available. If the `async` attribute is not present 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, before the user agent continues parsing the page. 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 children 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
WHATWG HTML Living Standard The definition of 'HTMLScriptElement' in that specification.	Living Standard	No change from HTML5.
HTML5.1 The definition of 'HTMLScriptElement' in that specification.	Recommendation
HTML5 The definition of 'HTMLScriptElement' in that specification.	Recommendation	The following properties are now obsolete: `htmlFor,`.
Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLScriptElement' in that specification.	Recommendation	No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLScriptElement' in that specification.	Recommendation	Initial definition.

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)^[2]	(Yes)	(Yes)	(Yes)
`async`	(Yes)	(Yes)	3.6 (1.9.2)	10	No support	(Yes)
`defer`	(Yes)	(Yes)	3.5 (1.9.1)	4^[4] 10	No support	(Yes)
`crossOrigin`	1.0^[1]	(Yes)	13 (13)^[3]	No support	No support	4.0^[1]

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	1.0 (1.0)^[1]	(Yes)	(Yes)	(Yes)
`async`	(Yes)	(Yes)	1.0 (1.0)	No support	?	(Yes)
`defer`	(Yes)	(Yes)	1.0 (1.0)	No support	?	(Yes)
`crossOrigin`	?	(Yes)	?	?	?	?

[1] This was implemented in WebKit bug 81438.

[2] 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.

[3] This was implemented in bug 696301.

[4] Internet Explorer 4 implements this feature by its own specification. Starting from version 10 the implementation aligns to the official specification.