HTML-<script>-Elemente geben dieHTMLScriptElement-Schnittstelle frei, die spezielle Eigenschaften und Methoden zum Manipulieren des Verhaltens und der Ausführung von<script>-Elementen bereitstellt (über die vomHTMLElement geerbte Schnittstelle hinaus).

JavaScript-Dateien sollten mit demtext/javascriptMIME-Typ bereitgestellt werden. Browser sind jedoch nachsichtig und blockieren sie nur, wenn das Skript mit einem Bildtyp (image/*), Videotyp (video/*), Audiotyp (audio/*) odertext/csv bereitgestellt 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 KontextExperimentell

Stellt dasattributionsrc-Attribut auf einem<script>-Element programmatisch ein und ab, wobei der Wert dieses Attributs widergespiegelt wird.attributionsrc gibt an, dass der Browser einenAttribution-Reporting-Eligible-Header mit der Skriptressourcenanforderung senden soll. Serverseitig wird dies verwendet, um das Senden einesAttribution-Reporting-Register-Source- oderAttribution-Reporting-Register-Trigger-Headers in der Antwort auszulösen, um eine JavaScript-basierteAttributionsquelle oder einenAttributionstrigger zu registrieren.

HTMLScriptElement.async

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Bei klassischen Skripten, wenn dieasync-Eigenschaft auftrue gesetzt ist, wird das externe Skript parallel zum Parsen abgerufen und so schnell wie möglich ausgewertet. BeiModul-Skripten, wenn dieasync-Eigenschaft auftrue gesetzt ist, werden das Skript und alle seine 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 dasblocking-Attribut des<script>-Elements wider.

HTMLScriptElement.charsetVeraltet

Ein String, der die Zeichencodierung eines externen Skripts darstellt. Er spiegelt dascharset-Attribut wider.

HTMLScriptElement.crossOrigin

Ein String, der dieCORS-Einstellung für das Skript-Element widerspiegelt. Für klassische Skripte aus anderenHerkünften wird damit gesteuert, ob Fehlermeldungen offengelegt werden.

HTMLScriptElement.defer

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

HTMLScriptElement.eventVeraltet

Ein String; eine veraltete Methode zur Registrierung von Ereignishandlern an Elementen in einem HTML-Dokument.

HTMLScriptElement.fetchPriority

Ein optionaler String, der dem Browser einen Hinweis darauf gibt, wie er das Abrufen eines externen Skripts im Vergleich zu anderen externen Skripten priorisieren soll. Wenn dieser Wert angegeben ist, muss er einer der zulässigen 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). Er spiegelt dasfetchpriority-Attribut des<script>-Elements wider.

HTMLScriptElement.innerText

Eine Eigenschaft, die den Inline-Textinhalt des<script>-Elements so darstellt, als wäre er gerenderten Text.Die Eigenschaft akzeptiert entweder einTrustedScript-Objekt oder einen String.

HTMLScriptElement.integrity

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

HTMLScriptElement.noModule

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

HTMLScriptElement.referrerPolicy

Ein String, der dasreferrerPolicy-HTML-Attribut widerspiegelt, das angibt, welcher Referrer beim Abrufen des Skripts und von diesem Skript ausgeführten Abrufen verwendet werden soll.

HTMLScriptElement.src

EinTrustedScriptURL oder String, der die URL eines externen Skripts darstellt; dies kann als Alternative zur direkten Einbettung eines Skripts in ein Dokument verwendet werden.Er 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 einen String.Sie verhält sich genauso wie dietextContent-Eigenschaft.

HTMLScriptElement.textContent

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

HTMLScriptElement.type

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

Statische Methoden

HTMLScriptElement.supports()

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

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 sie einen<script>-Knotenunmittelbar vor dem<script>, das den folgenden Code (durchdocument.currentScript) hostet, erstellt.Diese Skripte werdenasynchron ausgeführt.Für weitere Details siehe die 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 hängt neue Skripte, anstatt sie unmittelbar vor demdocument.currentScript-Element einzufügen, als Kinder des<head>-Tags an.

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

Beispielhafte Nutzung:

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 die Modulsupport überprüft wird, 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 in allen Browsern als unterstützt angenommen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML<script>-Element
• HTML<noscript>-Element
• document.currentScript
• Web Workers (Code-Snippets ähnlich zu Skripten, jedoch ineinem anderen globalen Kontext ausgeführt)