HTMLScriptElement

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLScriptElement.attributionSrc Sicherer Kontext Experimentell

Ruft das attributionsrc-Attribut eines <script>-Elements ab und setzt es programmatisch, wobei der Wert dieses Attributs widergespiegelt wird. attributionsrc gibt an, dass der Browser einen Attribution-Reporting-Eligible-Header zusammen mit der Skriptressourcenanfrage senden soll. Auf der Serverseite wird dies verwendet, um das Senden eines Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Headers in der Antwort zu initiieren, 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 geladen und ausgeführt, 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 geladen und ausgeführt, sobald sie verfügbar sind.

HTMLScriptElement.blocking

Ein String, der anzeigt, dass bestimmte Operationen beim Laden 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 repräsentiert. Es spiegelt das charset-Attribut wider.

HTMLScriptElement.crossOrigin

Ein String, der die CORS-Einstellung für das Skriptelement widergibt. Für klassische Skripte von anderen Herkünften steuert dies, ob Fehlermeldungen 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 nach dem Parsen des Dokuments, aber vor dem Auslösen des DOMContentLoaded-Ereignisses ausgeführt. Für Modulscripte hat die defer-Eigenschaft keine Wirkung.

HTMLScriptElement.event Veraltet

Ein String; eine veraltete Methode, um Ereignishandler auf Elemente in einem HTML-Dokument zu registrieren.

HTMLScriptElement.fetchPriority

Ein optionaler String, der einem Browser einen Hinweis darauf gibt, wie er das Laden eines externen Skripts im Vergleich zu anderen externen Skripten priorisieren sollte. Wenn dieser Wert bereitgestellt wird, muss er einer der möglichen erlaubten Werte sein: high, um mit hoher Priorität zu laden, low, um mit niedriger Priorität zu laden, oder auto, um keine Präferenz anzuzeigen (was der Standard ist). Es spiegelt das fetchpriority-Attribut des <script>-Elements wider.

HTMLScriptElement.integrity

Ein String, der Inline-Metadaten enthält, die ein Browser verwenden kann, um zu überprüfen, dass eine abgerufene Ressource ohne unerwartete Manipulation bereitgestellt 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 — verwendet, um Fallback-Skripte in älteren Browsern auszuführen, die keine JavaScript-Module unterstützen.

HTMLScriptElement.referrerPolicy

Ein String, der das referrerPolicy-HTML-Attribut widerspiegelt, das angibt, welchen Referrer beim Laden des Skripts und der damit durchgeführten Ladevorgänge verwendet werden soll.

HTMLScriptElement.src

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

HTMLScriptElement.text

Ein String, der den Inhalt aller Text-Knoten innerhalb des <script>-Elements (unter Ignorierung anderer Knoten wie Kommentare) in Baumreihenfolge zusammenfügt und zurückgibt. Beim Setzen verhält es sich genauso wie die Node.textContent-Eigenschaft.

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

HTMLScriptElement.type

Ein String, der den Typ des Skripts repräsentiert. Es spiegelt das type-Attribut des <script>-Elements wider.

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 skriptbezogenen Funktionsüberprüfung.

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

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

Lassen Sie uns eine Funktion erstellen, die neue Skripte innerhalb eines Dokuments importiert, indem ein <script>-Knoten unmittelbar vor dem <script>, das den folgenden Code enthält, erstellt wird (durch document.currentScript). 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 hängt die neuen Skripte nicht unmittelbar vor dem document.currentScript-Element an, sondern fügt sie 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;
}

Beispielverwendung:

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

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

Das folgende Beispiel zeigt, wie auf Modulsupport überprüft wird, unter Verwendung des Vorhandenseins des noModule-Attributs als Fallback.

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

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

• HTML <script>-Element
• HTML <noscript>-Element
• document.currentScript
• Web Workers (Codeausschnitte, die ähnlich wie Skripte ausgeführt werden, aber in einem anderen globalen Kontext)