HTMLScriptElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <script> Elemente stellen das HTMLScriptElement Interface bereit, welches spezielle Eigenschaften und Methoden zur Verfügung stellt, um das Verhalten und die Ausführung von <script> Elementen zu manipulieren (zusätzlich zu den geerbten Eigenschaften des HTMLElement Interface).

JavaScript-Dateien sollten mit dem text/javascript MIME-Typ bereitgestellt werden, aber Browser sind nachsichtig und blockieren sie nur, wenn das Skript mit einem Bildtyp (image/*), Videotyp (video/*), Audiotyp (audio/*) oder text/csv bereitgestellt wird. Wenn das Skript blockiert wird, erhält das Element ein error Ereignis; andernfalls erhält es ein load Ereignis.

EventTarget Node Element HTMLElement HTMLScriptElement

Instanz-Eigenschaften

Übernimmt Eigenschaften von seinem übergeordneten Objekt, HTMLElement.

HTMLScriptElement.attributionSrc Secure context Experimentell

Erhält und setzt das attributionsrc Attribut auf einem <script> Element programmatisch und spiegelt den Wert dieses Attributs wider. attributionsrc gibt an, dass der Browser einen Attribution-Reporting-Eligible Header zusammen mit der Skript-Ressourcenanfrage 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 Attributionstrigger entsprechend 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 bewertet, sobald es verfügbar ist. Für Modul-Skripte wird das Skript und alle seine Abhängigkeiten parallel zum Parsen abgerufen und bewertet, sobald sie verfügbar sind.

HTMLScriptElement.blocking Experimentell

Ein String, der anzeigt, dass bestimmte Operationen beim Abrufen des Skripts blockiert werden sollten. Er reflektiert das blocking Attribut des <script> Elements.

HTMLScriptElement.charset Veraltet

Ein String, der die Zeichenkodierung eines externen Skripts darstellt. Er spiegelt das charset Attribut wider.

HTMLScriptElement.crossOrigin

Ein String, der die CORS-Einstellung für das Skriptelement reflektiert. Für klassische Skripte aus anderen Ursprüngen 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 ausgeführt, aber bevor das DOMContentLoaded Ereignis ausgelöst wird. Für Modul-Skripte hat die defer Eigenschaft keine Auswirkung.

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 er das Abrufen eines externen Skripts im Vergleich zu anderen externen Skripten priorisieren 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). Er reflektiert das fetchpriority Attribut des <script> Elements.

HTMLScriptElement.integrity

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

HTMLScriptElement.noModule

Ein boolescher Wert, der, wenn er wahr ist, die Ausführung des Skripts in Browsern, die ES-Module unterstützen, stoppt — dient dazu, Ersatzskripte in älteren Browsern auszuführen, die keine JavaScript-Module unterstützen.

HTMLScriptElement.referrerPolicy

Ein String, der das referrerPolicy HTML-Attribut reflektiert, das angibt, welcher Referrer beim Abrufen des Skripts und der von diesem Skript durchgeführten Abrufe verwendet werden soll.

HTMLScriptElement.src

Ein String, der die URL eines externen Skripts darstellt; dies kann als Alternative zur direkten Einbettung eines Skripts innerhalb eines Dokuments verwendet werden. Er spiegelt das src Attribut des <script> Elements wider.

HTMLScriptElement.text

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

Hinweis: Wenn einfügt über die Document.write() Methode, werden <script> Elemente (typischerweise synchron) ausgeführt, aber wenn sie mit Element.innerHTML oder Element.outerHTML eingefügt werden, werden sie überhaupt nicht ausgeführt.

HTMLScriptElement.type

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

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 skriptbezogenen Feature-Erkennung.

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von seiner übergeordneten Klasse, HTMLElement.

Ereignisse

Keine spezifischen Ereignisse; erbt Ereignisse von seiner übergeordneten Klasse, HTMLElement.

Beispiele

Dynamisches Importieren von Skripten

Lassen Sie uns eine Funktion erstellen, die neue Skripte in ein Dokument importiert, indem unmittelbar vor dem <script>, das den folgenden Code hostet (durch document.currentScript), ein <script>-Knoten erstellt wird. Diese Skripte werden asynchron ausgeführt. Weitere Details finden Sie in den Eigenschaften defer und async.

js
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 als Kinder des <head> Tags an, anstatt sie unmittelbar vor dem document.currentScript Element vorzusetzen.

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

Beispielnutzung:

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

Das folgende Beispiel zeigt, wie man die Unterstützung von Modulen überprüfen kann, indem das Vorhandensein des noModule Attributs als Fallback verwendet wird.

js
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 angenommen.

Spezifikationen

Specification
HTML Standard
# htmlscriptelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch