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 `text/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

HTMLScriptElementInstance 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 classic 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`

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

| Specification |
| --- |
| HTML Standard # htmlscriptelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTML `<script>` element
* HTML `<noscript>` element
* `document.currentScript`
* Web Workers (code snippets similar to scripts but executed in another global context)