Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

HTMLScriptElement

BaselineWidely available *

HTML<script> elements expose theHTMLScriptElement interface, which provides special properties and methods for manipulating the behavior and execution of<script> elements (beyond the inheritedHTMLElement interface).

JavaScript files should be served with thetext/javascriptMIME 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/*), ortext/csv. If the script is blocked, its element receives anerror event; otherwise, it receives aload event.

EventTarget Node Element HTMLElement HTMLScriptElement

Instance properties

Inherits properties from its parent,HTMLElement.

HTMLScriptElement.attributionSrcSecure contextExperimental

Gets and sets theattributionsrc attribute on a<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-basedattribution source orattribution trigger, respectively.

HTMLScriptElement.async

A boolean value that controls how the script should be executed. For classic scripts, if theasync property is set totrue, the external script will be fetched in parallel to parsing and evaluated as soon as it is available. Formodule 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

A string indicating that certain operations should be blocked on the fetching of the script. It reflects theblocking attribute of the<script> element.

HTMLScriptElement.charsetDeprecated

A string representing the character encoding of an external script. It reflects thecharset attribute.

HTMLScriptElement.crossOrigin

A string reflecting theCORS setting for the script element. For classic scripts from otherorigins, 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 thedefer property is set totrue, the external script will be executed after the document has been parsed, but before firingDOMContentLoaded event. Formodule scripts, thedefer property has no effect.

HTMLScriptElement.eventDeprecated

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 theintegrity attribute of the<script> element.

HTMLScriptElement.noModule

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

HTMLScriptElement.referrerPolicy

A string that reflects thereferrerPolicy 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 thesrc attribute of the<script> element.

HTMLScriptElement.text

A string that joins and returns the contents of allText 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 theDocument.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 thetype attribute of the<script> element.

Static methods

HTMLScriptElement.supports()

Returnstrue 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> nodeimmediately before the<script> that hosts the following code (throughdocument.currentScript).These scripts will beasynchronously executed.For more details, see thedefer andasync 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 thedocument.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 thenoModule 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
# htmlscriptelement

Browser compatibility

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp