W3cubDocs

/Web APIs

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.

EventTarget Node Element HTMLElement HTMLScriptElement

Instance properties

Inherits properties from its parent, HTMLElement.

HTMLScriptElement.type

A string representing the MIME type of the script. It reflects the type attribute.

HTMLScriptElement.src

A string representing the URL of an external script. It reflects the src attribute.

HTMLScriptElement.event Deprecated

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

HTMLScriptElement.charset Deprecated

A string 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:

  1. If the async attribute is present, then the script will be executed asynchronously as soon as it downloads.
  2. If the async attribute is absent but the defer attribute is present, then the script is executed when the page has finished parsing.
  3. 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

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

HTMLScriptElement.text

A string 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.fetchPriority Experimental

An optional string representing a hint given to the browser on how it should prioritize fetching of an external script relative to other external scripts. If this value is provided, it must be one of the possible permitted values: high to fetch at a high priority, low to fetch at a low priority, or auto to indicate no preference (which is the default).

HTMLScriptElement.noModule

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

HTMLScriptElement.referrerPolicy

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

Static methods

HTMLScriptElement.supports()

Returns true if the browser supports scripts of the specified type and false otherwise. This method provides a simple and unified method for script-related feature detection.

Instance methods

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

Events

No specific events; inherits events 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.

js

function loadError(oError) {
  throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}

function prefixScript(url, onloadFunction) {
  const 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.

js

function loadError(oError) {
  throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}

function affixScriptToHead(url, onloadFunction) {
  const newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) {
    newScript.onload = onloadFunction;
  }
  document.head.appendChild(newScript);
  newScript.src = url;
}

Sample usage:

js

affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
  alert('The script "myScript2.js" has been correctly loaded.');
});

Checking if a script type is supported

HTMLScriptElement.supports() provides a unified mechanism for checking whether a browser supports particular types of scripts.

The example below shows how to check for module support, using the existence of the noModule attribute as a fallback.

js

function checkModuleSupport() {
  if ("supports" in HTMLScriptElement) {
    return HTMLScriptElement.supports("module");
  }
  return "noModule" in document.createElement("script");
}

Classic scripts are assumed to be supported on all browsers.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
HTMLScriptElement 1 12 1 5.5 ≤12.1 3 ≤37 18 4 ≤12.1 1 1.0
async 6 12 3.6 10 15 5.1 3 18 4 14 5 1.0
attributionSrc 117 117 No No 103 No 117 117 No No No No
blocking 105 105 No No 91 No 105 105 No 72 No 20.0
charset 1 12 1 6 ≤12.1 3 4.4 18 4 ≤12.1 1 1.0
crossOrigin 19 14 14 11 15 6 4.4 25 14 14 6 1.5
defer 1 12 3.5
10Before Internet Explorer 10, it implemented defer by a proprietary specification. Since version 10 it conforms to the W3C specification.
≤12.1 3 4.4 18 4 ≤12.1 1 1.0
event 1 12 1 5.5 15 3 4.4 18 4 14 1 1.0
fetchPriority 102101–102 102101–102 No No 8887–88 preview 102101–102 102101–102 No 70 No 19.0
htmlFor 1 12 1 5.5 15 3 4.4 18 4 14 1 1.0
integrity 45 17 43 No 32 11.1 43 45 43 32 11.3 5.0
noModule 61 16 60 No 48 11 61 61 60 45 11 8.0
referrerPolicy 70 79 65 No 57 14 70 70 65 49 14 10.0
src 1 12 1 5.5 ≤12.1 3 4.4 18 4 ≤12.1 1 1.0
supports_static 96 96 94 No 82 16 96 96 94 67 16 17.0
text 1 12 1 5.5 ≤12.1 3 4.4 18 4 ≤12.1 1 1.0
type 1 12 1 5.5 ≤12.1 3 4.4 18 4 ≤12.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement