W3cubDocs

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 type, but browsers are lenient and block them only if the script is served with an image type (image/*), video type (video/*), audio type (audio/*), or text/csv. If the script is blocked, its element receives an error event; otherwise, it receives a success event.

Properties

Inherits properties from its parent, HTMLElement.

Name	Type	Description
`type`	`DOMString`	Represents the MIME type of the script. It reflects the `type` attribute.
`src`	`DOMString`	Gets and sets the URL of an external script. It reflects the `src` attribute.
`event`	`DOMString`	An old, quirky way of registering event handlers on elements in an HTML document.
`charset`	`DOMString`	Represents the character encoding of an external script. It reflects the `charset` attribute.
`async`	`Boolean`	The `async` and `defer` attributes are boolean attributes that control how the script should be executed. The `defer` and `async` attributes must not be specified if the `src` attribute is absent. There are three possible execution modes: If the `async` attribute is present, then the script will be executed asynchronously as soon as it downloads. If the `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. The `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. Note: 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, and in XML; the rules for the `document.write()` method; the handling of scripting; and so on.
`defer`	`Boolean`
`crossOrigin`	`DOMString`	A `DOMString` reflecting the CORS setting for the script element. For scripts from other origins, this controls if error information will be exposed.
`text`	`DOMString`	The IDL attribute `text` joins and returns the contents of all `Text` nodes inside the `<script>` element (ignoring other nodes like comments) in tree order. On setting, it acts 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` or `outerHTML`, they do not execute at all.
`noModule`	`Boolean`	This Boolean property 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.

Methods

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

Examples

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 properties.

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> tag.

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."); });

Specifications

Specification	Status	Comment
HTML Living Standard The definition of 'HTMLScriptElement' in that specification.	Living Standard
HTML 5.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.	Obsolete	No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLScriptElement' in that specification.	Obsolete	Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	Yes	1	Yes	Yes	Yes
`async`	Yes	Yes	3.6	10	No	Yes
`charset`	1	Yes	1	Yes	Yes	Yes
`crossOrigin`	1	Yes	13	No	No	4
`defer`	Yes	Yes	3.5	10 10 4 — 10 Non-standard implementation	No	Yes
`event`	1	Yes	1	Yes	Yes	Yes
`htmlFor`	1	Yes	1	Yes	Yes	Yes
`noModule`	Yes	No	60 60 55 — 60 Disabled Disabled From version 55 until version 60 (exclusive): this feature is behind the `dom.moduleScripts.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	No	No	No
`src`	1	Yes	1	Yes	Yes	Yes
`text`	1	Yes	1	Yes	Yes	Yes
`type`	1	Yes	1	Yes	Yes	Yes

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes	Yes	Yes	4	Yes	Yes	?
`async`	Yes	Yes	Yes	4	Yes	Yes	?
`charset`	Yes	Yes	Yes	4	Yes	Yes	?
`crossOrigin`	Yes	Yes	Yes	14	Yes	Yes	?
`defer`	Yes	Yes	Yes	4	Yes	Yes	?
`event`	Yes	Yes	Yes	4	Yes	Yes	?
`htmlFor`	Yes	Yes	Yes	4	Yes	Yes	?
`noModule`	Yes	Yes	Yes	60 60 55 — 60 Disabled Disabled From version 55 until version 60 (exclusive): this feature is behind the `dom.moduleScripts.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Yes	Yes	?
`src`	Yes	Yes	Yes	4	Yes	Yes	?
`text`	Yes	Yes	Yes	4	Yes	Yes	?
`type`	Yes	Yes	Yes	4	Yes	Yes	?