HTML-<script>-Elemente stellen dieHTMLScriptElement-Schnittstelle bereit, die spezielle Eigenschaften und Methoden zum Manipulieren des Verhaltens und der Ausführung von<script>-Elementen bietet (über die geerbteHTMLElement-Schnittstelle hinaus).

JavaScript-Dateien sollten mit demtext/javascript-MIME-Typ bedient werden, aber Browser sind nachsichtig und blockieren sie nur, wenn das Skript mit einem Bildtyp (image/*), Videotyp (video/*), Audiotyp (audio/*) odertext/csv geliefert wird. Wenn das Skript blockiert wird, erhält sein Element einerror-Ereignis; andernfalls erhält es einload-Ereignis.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil,HTMLElement.

HTMLScriptElement.attributionSrcSicherer KontextVeraltet

Ruft das Attributattributionsrc auf einem<script>-Element programmgesteuert ab und setzt es, was den Wert dieses Attributs widerspiegelt.attributionsrc gibt an, dass Sie möchten, dass der Browser einenAttribution-Reporting-Eligible-Header zusammen mit der Skriptressourcenanforderung sendet. Auf der Serverseite wird dies verwendet, um das Senden einesAttribution-Reporting-Register-Source- oderAttribution-Reporting-Register-Trigger-Headers in der Antwort auszulösen, um eine JavaScript-basierteAttributionsquelle bzw. einenAttributionstrigger zu registrieren.

HTMLScriptElement.async

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte, wenn dieasync-Eigenschaft auftrue gesetzt ist, wird das externe Skript parallel zum Parsen abgerufen und ausgeführt, sobald es verfügbar ist. FürModulskripte, wenn dieasync-Eigenschaft auftrue gesetzt ist, werden das Skript und alle seine Abhängigkeiten parallel zum Parsen abgerufen und ausgeführt, sobald sie verfügbar sind.

HTMLScriptElement.blocking

Eine Zeichenfolge, die angibt, dass bestimmte Vorgänge beim Abrufen des Skripts blockiert werden sollen. Sie spiegelt dasblocking-Attribut des<script>-Elements wider.

HTMLScriptElement.charsetVeraltet

Eine Zeichenfolge, die die Zeichenkodierung eines externen Skripts darstellt. Sie spiegelt dascharset-Attribut wider.

HTMLScriptElement.crossOrigin

Eine Zeichenfolge, die dieCORS-Einstellung für das Skriptelement widerspiegelt. Für klassische Skripte von anderenUrsprüngen steuert dies, ob Fehlerinformationen angezeigt werden.

HTMLScriptElement.defer

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte, wenn diedefer-Eigenschaft auftrue gesetzt ist, wird das externe Skript ausgeführt, nachdem das Dokument geparst wurde, aber bevor dasDOMContentLoaded-Ereignis ausgelöst wird. FürModulskripte hat diedefer-Eigenschaft keine Wirkung.

HTMLScriptElement.eventVeraltet

Eine Zeichenfolge; eine veraltete Methode zur Registrierung von Ereignishandlern auf Elementen in einem HTML-Dokument.

HTMLScriptElement.fetchPriority

Eine optionale Zeichenfolge, die dem Browser einen Hinweis gibt, wie er die Priorisierung des Abrufs eines externen Skripts im Verhältnis zu anderen externen Skripten handhaben sollte. Wenn dieser Wert angegeben wird, muss er einer der möglichen erlaubten Werte sein:high, um mit hoher Priorität abzurufen,low, um mit niedriger Priorität abzurufen, oderauto, um keine Präferenz anzugeben (was der Standard ist). Sie spiegelt dasfetchpriority-Attribut des<script>-Elements wider.

HTMLScriptElement.innerText

Eine Eigenschaft, die den Inline-Textinhalt des<script>-Elements als gerenderten Text darstellt. Die Eigenschaft akzeptiert entweder einTrustedScript-Objekt oder eine Zeichenfolge.

HTMLScriptElement.integrity

Eine Zeichenfolge, die Metadaten enthält, die ein Browser verwenden kann, um zu überprüfen, ob eine abgerufene Ressource ohne unerwartete Manipulation bereitgestellt wurde. Sie spiegelt dasintegrity-Attribut des<script>-Elements wider.

HTMLScriptElement.noModule

Ein boolescher Wert, der, wenn er auf true gesetzt ist, die Ausführung des Skripts in Browsern, dieES-Module unterstützen, stoppt — verwendet, um Fallback-Skripte in älteren Browsern auszuführen, dienicht JavaScript-Module unterstützen.

HTMLScriptElement.referrerPolicy

Eine Zeichenfolge, die dasreferrerPolicy-HTML-Attribut widerspiegelt und angibt, welcher Referer beim Abrufen des Skripts verwendet werden soll und bei Abrufen, die durch dieses Skript ausgeführt werden.

HTMLScriptElement.src

EinTrustedScriptURL oder eine Zeichenfolge, die die URL eines externen Skripts darstellt; dies kann als Alternative zur direkten Einbettung eines Skripts in ein Dokument verwendet werden. Sie spiegelt dassrc-Attribut des<script>-Elements wider.

HTMLScriptElement.text

Eine Eigenschaft, die den Inline-Textinhalt des<script>-Elements darstellt. Die Eigenschaft akzeptiert entweder einTrustedScript-Objekt oder eine Zeichenfolge. Sie funktioniert genauso wie dietextContent-Eigenschaft.

HTMLScriptElement.textContent

Eine Eigenschaft, die den Inline-Textinhalt des<script>-Elements darstellt. Die Eigenschaft wird vonNode neu definiert, umTrustedScript als Eingabe zu unterstützen. Auf diesem Element verhält sie sich genau wie dietext-Eigenschaft.

HTMLScriptElement.type

Eine Zeichenfolge, die den Typ des Skripts darstellt. Sie spiegelt dastype-Attribut des<script>-Elements wider.

Statische Methoden

HTMLScriptElement.supports()

Gibttrue zurück, wenn der Browser Skripte des angegebenen Typs unterstützt, undfalse, andernfalls. Diese Methode bietet eine einfache und einheitliche Methode zur skriptbezogenen Feature-Erkennung.

Instanz-Methoden

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

Ereignisse

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

Beispiele

Dynamisches Importieren von Skripten

Lassen Sie uns eine Funktion erstellen, die neue Skripte in einem Dokument importiert, indem ein<script>-Knotenunmittelbar vor dem<script> erstellt wird, das den folgenden Code (überdocument.currentScript) enthält. Diese Skripte werdenasynchron ausgeführt. Weitere Details finden Sie in den Eigenschaftendefer undasync.

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

Diese nächste Funktion fügt, anstatt die neuen Skripte unmittelbar vor demdocument.currentScript-Element hinzuzufügen, diese als Kinder des<head>-Tags hinzu.

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

Beispiel zur Verwendung:

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 zur Überprüfung, ob ein Browser bestimmte Skripttypen unterstützt.

Das folgende Beispiel zeigt, wie man die Unterstützung für Module überprüft, indem die Existenz desnoModule-Attributs als Fallback verwendet wird.

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

Klassische Skripte werden auf allen Browsern als unterstützt angesehen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-<script>-Element
• HTML-<noscript>-Element
• document.currentScript
• Web Workers (Code Ausschnitte, die Skripten ähnlich sind, aber ineinem anderen globalen Kontext ausgeführt werden)