Web/API/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 load event.

  <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="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" 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="https://developer.mozilla.org/en-US/docs/Web/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="https://developer.mozilla.org/en-US/docs/Web/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="https://developer.mozilla.org/en-US/docs/Web/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="https://developer.mozilla.org/en-US/docs/Web/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;}

Properties

Inherits properties from its parent, HTMLElement.

HTMLScriptElement.type

Is a DOMString representing the MIME type of the script. It reflects the type attribute.

HTMLScriptElement.src

Is a DOMString representing the URL of an external script. It reflects the src attribute.

HTMLScriptElement.event '

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

HTMLScriptElement.charset

Is a DOMString representing the character encoding of an external script. It reflects the charset attribute.

HTMLScriptElement.async HTMLScriptElement.defer

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.

HTMLScriptElement.crossOrigin '

Is a DOMString reflecting the CORS setting for the script element. For scripts from other origins, this controls if error information will be exposed.

HTMLScriptElement.text

Is a DOMString that 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.

HTMLScriptElement.noModule

Is a Boolean 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

Is a DOMString that reflects the referrerpolicy HTML attribute indicating which referrer to use when fetching the script, and fetches done by that script.

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 StandardThe definition of 'HTMLScriptElement' in that specification.	Living Standard
HTML 5.1The definition of 'HTMLScriptElement' in that specification.	Recommendation
HTML5The definition of 'HTMLScriptElement' in that specification.	Recommendation	The following properties are now obsolete: `htmlFor,`.
Document Object Model (DOM) Level 2 HTML SpecificationThe definition of 'HTMLScriptElement' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 SpecificationThe definition of 'HTMLScriptElement' in that specification.	Obsolete	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	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 Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`async`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 3.6	IE Full support 10	Opera No support No	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`charset`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`crossOrigin` Experimental'	Chrome Full support 1	Edge Full support 14	Firefox Full support 13	IE No support No	Opera No support No	Safari Full support 4	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 14	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`defer`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 3.5	IE Full support 10 Full support 10 No support 4 — 10 Notes' Notes' Non-standard implementation	Opera No support No	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`event` Deprecated'	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`htmlFor` Deprecated'	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`noModule` Experimental'	Chrome Full support Yes	Edge Full support 16	Firefox Full support 60 Full support 60 No support 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.	IE No support No	Opera No support No	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 60 Full support 60 No support 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.	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`referrerPolicy`	Chrome Full support 70	Edge Full support ≤79	Firefox Full support 65	IE No support No	Opera Full support Yes	Safari Full support 14	WebView Android Full support 70	Chrome Android Full support 70	Firefox Android Full support 65	Opera Android Full support Yes	Safari iOS Full support 14	Samsung Internet Android Full support 10.0
`src`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`text`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`type`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.