HTMLScriptElement

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Eltern-Interface, HTMLElement.

HTMLScriptElement.attributionSrc Sicherer Kontext

Ruft das attributionsrc-Attribut eines <script>-Elements programmgesteuert ab und setzt es. attributionsrc gibt an, dass der Browser einen Attribution-Reporting-Eligible-Header zusammen mit der Skriptressourcenanforderung senden soll. Serverseitig dient dies dazu, das Senden eines Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Headers in der Antwort auszulösen, um eine JavaScript-basierte Attributionsquelle bzw. 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 so bald wie möglich ausgewertet. Für Modulskripte, wenn die async-Eigenschaft auf true gesetzt ist, werden das Skript und alle seine Abhängigkeiten parallel zum Parsen abgerufen und so bald wie möglich ausgewertet.

HTMLScriptElement.blocking

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

HTMLScriptElement.charset

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

HTMLScriptElement.crossOrigin

Ein String, der die CORS-Einstellung für das Skriptelement widerspiegelt. Für klassische Skripte von anderen Herkünften 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 die defer-Eigenschaft auf true gesetzt ist, wird das externe Skript nach dem Parsen des Dokuments, aber vor dem Auslösen des DOMContentLoaded-Ereignisses ausgeführt. Für Modulskripte hat die defer-Eigenschaft keine Auswirkung.

HTMLScriptElement.event

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

HTMLScriptElement.fetchPriority

Ein optionales String, das dem Browser einen Hinweis gibt, wie das Abrufen eines externen Skripts im Verhältnis zu anderen externen Skripten priorisiert werden sollte. Wenn dieser Wert angegeben wird, muss er einer der erlaubten 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). Er widerspiegelt das fetchpriority-Attribut des <script>-Elements.

HTMLScriptElement.innerText

Eine Eigenschaft, die den Inline-Textinhalt des <script>-Elements als gerenderten Text darstellt. 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, dass eine abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Er widerspiegelt das integrity-Attribut des <script>-Elements.

HTMLScriptElement.noModule

Ein boolescher Wert, der, wenn er auf true gesetzt ist, die Ausführung des Skripts in Browsern verhindert, 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, welcher Referrer beim Abrufen des Skripts und der von diesem Skript durchgeführten Abrufe verwendet werden soll.

HTMLScriptElement.src

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

HTMLScriptElement.text

Eine Eigenschaft, die den Inline-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 Inline-Textinhalt des <script>-Elements darstellt. Die Eigenschaft wird von Node neu definiert, um TrustedScript als Eingabe zu unterstützen. Auf diesem Element verhält sie sich genau wie die text-Eigenschaft.

HTMLScriptElement.type

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

Statische Methoden

HTMLScriptElement.supports()

Gibt true zurück, wenn der Browser Skripte des angegebenen Typs unterstützt, andernfalls false. Diese Methode bietet eine einfache und einheitliche Methode zur Erkennung von Skript-bezogenen Funktionen.

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von seinem Eltern-Interface, HTMLElement.

Ereignisse

Keine spezifischen Ereignisse; erbt Ereignisse von seinem Eltern-Interface, 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 hostet (durch document.currentScript), erstellt wird. Diese Skripte werden asynchron ausgeführt. Für weitere Details siehe die Eigenschaften defer und async.

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 stattdessen die neuen Skripte als Kinder des <head>-Tags hinzu, anstatt sie unmittelbar vor dem document.currentScript-Element einzufügen.

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

Das folgende Beispiel zeigt, wie man die Unterstützung von Modulen überprüft, wobei 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");
}

Klassische Skripte werden von allen Browsern angenommen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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