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 auch. attributionsrc gibt an, dass der Browser einen Attribution-Reporting-Eligible-Header zusammen mit der Skriptressourcenanforderung senden soll. Serverseitig 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 Attributionstrigger zu registrieren.

HTMLScriptElement.async

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte, wenn die async-Eigenschaft auf true gesetzt ist, wird das externe Skript parallel zum Parsen abgerufen und ausgewertet, sobald es verfügbar ist. Für Modulscripte, wenn die async-Eigenschaft auf true 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. Es spiegelt das blocking-Attribut des <script>-Elements wider.

HTMLScriptElement.charset Veraltet

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

HTMLScriptElement.crossOrigin

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

HTMLScriptElement.defer

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte, wenn die defer-Eigenschaft auf true gesetzt ist, wird das externe Skript ausgeführt, nachdem das Dokument geparst wurde, aber bevor das DOMContentLoaded-Ereignis ausgelöst wird. Für Modulscripte hat die defer-Eigenschaft keine Wirkung.

HTMLScriptElement.event Veraltet

Ein String; eine veraltete Methode zum Registrieren von Ereignishandlern für Elemente in einem HTML-Dokument.

HTMLScriptElement.fetchPriority

Ein optionaler String, der dem Browser einen Hinweis gibt, wie das Abrufen eines externen Skripts im Vergleich zu anderen externen Skripten priorisiert werden soll. Wenn dieser Wert angegeben wird, muss er einer der möglichen zulässigen Werte sein: high, um mit hoher Priorität abzurufen, low, um mit niedriger Priorität abzurufen, oder auto, um keine Präferenz anzugeben (was der Standard ist). Es widerspiegelt das fetchpriority-Attribut des <script>-Elements.

HTMLScriptElement.innerText

Eine Eigenschaft, die den eingebetteten Textinhalt des <script>-Elements darstellt, als ob es gerenderter Text wäre. Die Eigenschaft akzeptiert entweder ein TrustedScript-Objekt oder einen String.

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. Es spiegelt das integrity-Attribut des <script>-Elements wider.

HTMLScriptElement.noModule

Ein boolescher Wert, der, wenn er auf true gesetzt ist, die Ausführung des Skripts in Browsern stoppt, die ES-Module unterstützen — wird 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 bei Abrufen, die durch dieses Skript vorgenommen werden, verwendet werden soll.

HTMLScriptElement.src

Ein String, der die URL eines externen Skripts darstellt; dies kann verwendet werden als Alternative zum direkten Einbetten eines Skripts in ein Dokument. Es spiegelt das src-Attribut des <script>-Elements wider.

HTMLScriptElement.text

Eine Eigenschaft, die den eingebetteten Textinhalt des <script>-Elements darstellt. Die Eigenschaft akzeptiert entweder ein TrustedScript-Objekt oder einen String. Sie verhält sich genauso wie die textContent-Eigenschaft.

HTMLScriptElement.textContent

Eine Eigenschaft, die den eingebetteten Textinhalt des <script>-Elements darstellt. Die Eigenschaft ist von Node neu definiert, um TrustedScript als Eingabe zu unterstützen. Auf diesem Element verhält sie sich exakt wie die text-Eigenschaft.

HTMLScriptElement.type

Ein String, der den Typ des Skripts darstellt. Es widerspiegelt das type-Attribut des <script>-Elements.

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 Skript-bezogenen Funktionalitätsprüfung.

Instanzmethoden

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

Ereignisse

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

Beispiele

Dynamisches Importieren von Skripten

Erstellen wir eine Funktion, die neue Skripte in ein Dokument importiert, indem ein <script>-Knoten unmittelbar vor dem <script>, das den folgenden Code enthält, erstellt wird (über document.currentScript). Diese Skripte werden asynchron ausgeführt. Für weitere Details siehe die defer- und async-Eigenschaften.

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 die neuen Skripte, anstatt sie unmittelbar vor dem document.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;
}

Beispielverwendung:

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

Das folgende Beispiel zeigt, wie auf Modulunterstützung geprüft wird, indem die Existenz des noModule-Attributs als Fallback verwendet wird.

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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