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.

* Some parts of this feature may have varying levels of support.

HTML-Elemente <script> legen die HTMLScriptElement-Schnittstelle offen, die spezielle Eigenschaften und Methoden zum Manipulieren des Verhaltens und der Ausführung von <script>-Elementen bietet (zusätzlich zur geerbten HTMLElement-Schnittstelle).

JavaScript-Dateien sollten mit dem text/javascript MIME-Typ bereitgestellt werden, aber Browser sind nachsichtig und blockieren sie nur, wenn das Skript mit einem Bildtyp (image/*), Videotyp (video/*), Audiotyp (audio/*) oder text/csv bereitgestellt wird. Wenn das Skript blockiert wird, erhält sein Element ein error-Ereignis; andernfalls erhält es ein load-Ereignis.

EventTarget Node Element HTMLElement HTMLScriptElement

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLScriptElement.attributionSrc Sicherer Kontext Experimentell

Ruft das attributionsrc-Attribut eines <script>-Elements programmgesteuert ab und setzt es, wodurch der Wert dieses Attributs wiedergespiegelt wird. attributionsrc gibt an, dass Sie den Browser anweisen möchten, einen Attribution-Reporting-Eligible-Header zusammen mit der Skriptanforderung zu senden. Auf der Serverseite wird dies verwendet, um das Senden eines Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Headers in der Antwort auszulösen, um eine JavaScript-basierte Attributionsquelle oder einen Attribution-Trigger zu registrieren.

HTMLScriptElement.async

Ein Boolean-Wert, der steuert, wie das Skript ausgeführt werden soll. Bei klassischen Skripten, wenn die async-Eigenschaft auf true gesetzt ist, wird das externe Skript parallel zum Parsen abgerufen und ausgewertet, sobald es verfügbar ist. Bei Modulscripten, wenn die async-Eigenschaft auf true gesetzt ist, werden das Skript und alle ihre Abhängigkeiten parallel zum Parsen abgerufen und ausgewertet, sobald sie verfügbar sind.

HTMLScriptElement.blocking

Ein String, der angibt, dass bestimmte Operationen beim Abrufen des Skripts blockiert werden sollen. Er spiegelt das blocking-Attribut des <script>-Elements wider.

HTMLScriptElement.charset Veraltet

Ein String, der die Zeichenkodierung eines externen Skripts darstellt. Er spiegelt das charset-Attribut wider.

HTMLScriptElement.crossOrigin

Ein String, der die CORS-Einstellung für das Skriptelement widerspiegelt. Bei klassischen Skripten von anderen Ursprüngen steuert dies, ob Fehlerinformationen offengelegt werden.

HTMLScriptElement.defer

Ein Boolean-Wert, der steuert, wie das Skript ausgeführt werden soll. Bei klassischen Skripten, wenn die defer-Eigenschaft auf true gesetzt ist, wird das externe Skript nach dem Parsen des Dokuments ausgeführt, aber vor dem Auslösen des DOMContentLoaded-Ereignisses. Bei Modulscripten hat die defer-Eigenschaft keine Auswirkungen.

HTMLScriptElement.event Veraltet

Ein String; eine veraltete Methode zum Registrieren von Ereignishandlern auf Elementen in einem HTML-Dokument.

HTMLScriptElement.fetchPriority

Ein optionaler String, der dem Browser einen Hinweis darauf gibt, wie das Abrufen eines externen Skripts im Verhältnis zu anderen externen Skripten priorisiert werden soll. Wenn dieser Wert angegeben wird, muss er einer der möglichen erlaubten Werte sein: high für hohe Priorität, low für niedrige Priorität oder auto für keine Präferenz (was der Standard ist). Er spiegelt das fetchpriority-Attribut des <script>-Elements wider.

HTMLScriptElement.integrity

Ein String, der Metadaten enthält, die ein Browser verwenden kann, um zu überprüfen, ob eine abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Er spiegelt das integrity-Attribut des <script>-Elements wider.

HTMLScriptElement.noModule

Ein Boolean-Wert, der, wenn true, die Ausführung des Skripts in Browsern stoppt, die ES-Module unterstützen — verwendet, um Fallback-Skripte in älteren Browsern auszuführen, die JavaScript-Module nicht unterstützen.

HTMLScriptElement.referrerPolicy

Ein String, der das referrerPolicy HTML-Attribut widerspiegelt, das angibt, welchen Referrer beim Abrufen des Skripts und durch das Skript durchgeführte Abrufe verwendet werden soll.

HTMLScriptElement.src

Ein String, der die URL eines externen Skripts darstellt; dies kann anstelle der direkten Einbettung eines Skripts in ein Dokument verwendet werden. Er spiegelt das src-Attribut des <script>-Elements wider.

HTMLScriptElement.text

Ein String, der die Inhalte von allen Text-Knoten innerhalb des <script>-Elements in Baumreihenfolge verbindet und zurückgibt (andere Knoten wie Kommentare werden ignoriert). Bei der Einstellung wirkt es genauso wie die Node.textContent-Eigenschaft.

Hinweis: Wenn sie mit der Methode Document.write() eingefügt werden, führen sich <script>-Elemente aus (typischerweise synchron), aber wenn sie mit Element.innerHTML oder Element.outerHTML eingefügt werden, führen sie sich überhaupt nicht aus.

HTMLScriptElement.type

Ein String, der den Typ des Skripts darstellt. Er spiegelt das type-Attribut des <script>-Elements wider.

Statische Methoden

HTMLScriptElement.supports()

Gibt true zurück, wenn der Browser Skripte des angegebenen Typs unterstützt, und false andernfalls. Diese Methode bietet eine einfache und einheitliche Methode zur Feature-Erkennung in Bezug auf Skripte.

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von seinem Elternteil, HTMLElement.

Ereignisse

Keine spezifischen Ereignisse; erbt Ereignisse von seinem Elternteil, HTMLElement.

Beispiele

Dynamisches Importieren von Skripten

Lassen Sie uns eine Funktion erstellen, die neue Skripte innerhalb eines Dokuments importiert, indem ein <script>-Knoten unmittelbar vor dem <script> hinzugefügt wird, das den folgenden Code hostet (über document.currentScript). Diese Skripte werden asynchron ausgeführt. Weitere Details finden Sie in den Eigenschaften defer und async.

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

Die nächste Funktion, anstatt die neuen Skripte unmittelbar vor dem document.currentScript Element voranzustellen, hängt sie als Kinder des <head>-Tags an.

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

Beispielanwendung:

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

Überprüfen, ob ein Skripttyp unterstützt wird

HTMLScriptElement.supports() bietet einen einheitlichen Mechanismus, um zu überprüfen, ob ein Browser bestimmte Skripttypen unterstützt.

Das folgende Beispiel zeigt, wie man die Modulunterstützung überprüft, unter Verwendung der Existenz des noModule-Attributs als Fallback.

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

Es wird angenommen, dass klassische Skripte von allen Browsern unterstützt werden.

Spezifikationen

Specification
HTML
# htmlscriptelement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLScriptElement
async
attributionSrc
Experimental
blocking
charset
Deprecated
crossOrigin
defer
event
Deprecated
fetchPriority
htmlFor
Deprecated
integrity
noModule
referrerPolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
src
Can be set with a TrustedScriptURL instance
Experimental
supports() static method
text
Can be set with a TrustedScript instance
Experimental
type

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Has more compatibility info.

Siehe auch