HTMLScriptElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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.
Instance properties
Inherits properties from its parent, HTMLElement
.
HTMLScriptElement.attributionSrc
Secure context Experimental-
Gets and sets the
attributionsrc
attribute on an<script>
element programmatically, reflecting the value of that attribute.attributionsrc
specifies that you want the browser to send anAttribution-Reporting-Eligible
header along with the script resource request. On the server-side this is used to trigger sending anAttribution-Reporting-Register-Source
orAttribution-Reporting-Register-Trigger
header in the response, to register a JavaScript-based attribution source or attribution trigger, respectively. HTMLScriptElement.async
-
A boolean value that controls how the script should be executed. For classic scripts, if the
async
property is set totrue
, the external script will be fetched in parallel to parsing and evaluated as soon as it is available. For module scripts, if theasync
property is set totrue
, the script and all their dependencies will be fetched in parallel to parsing and evaluated as soon as they are available. HTMLScriptElement.blocking
Experimental-
A string indicating that certain operations should be blocked on the fetching of the script. It reflects the
blocking
attribute of the<script>
element. HTMLScriptElement.charset
Deprecated-
A string representing the character encoding of an external script. It reflects the
charset
attribute. 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.defer
-
A boolean value that controls how the script should be executed. For classic scripts, if the
defer
property is set totrue
, the external script will be executed after the document has been parsed, but before firingDOMContentLoaded
event. For module scripts, thedefer
property has no effect. HTMLScriptElement.event
Deprecated-
A string; an obsolete way of registering event handlers on elements in an HTML document.
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, orauto
to indicate no preference (which is the default). It reflects thefetchpriority
attribute of the<script>
element. HTMLScriptElement.integrity
-
A string that contains inline metadata that a browser can use to verify that a fetched resource has been delivered without unexpected manipulation. It reflects the
integrity
attribute of the<script>
element. 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. HTMLScriptElement.src
-
A string representing the URL of an external script; this can be used as an alternative to embedding a script directly within a document. It reflects the
src
attribute of the<script>
element. 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 theNode.textContent
property.Note: When inserted using the
Document.write()
method,<script>
elements execute (typically synchronously), but when inserted usingElement.innerHTML
orElement.outerHTML
, they do not execute at all. HTMLScriptElement.type
-
A string representing the type of the script. It reflects the
type
attribute of the<script>
element.
Static methods
HTMLScriptElement.supports()
-
Returns
true
if the browser supports scripts of the specified type andfalse
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.
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.
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:
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.
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
See also
- HTML
<script>
element - HTML
<noscript>
element document.currentScript
- Web Workers (code snippets similar to scripts but executed in another global context)