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-Elemente <script> legen die HTMLScriptElement-Schnittstelle offen, die spezielle Eigenschaften und Methoden zum Manipulieren des Verhaltens und der Ausführung von <script>-Elementen bietet (zusätzlich zur geerbten HTMLElement-Schnittstelle).

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 sein Element ein error-Ereignis; andernfalls erhält es ein load-Ereignis.

EventTarget Node Element HTMLElement HTMLScriptElement

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLScriptElement.attributionSrc Secure context Experimentell

Ruft das attributionsrc-Attribut eines <script>-Elements programmgesteuert ab und setzt es, wodurch der Wert dieses Attributs wiedergespiegelt wird. attributionsrc gibt an, dass Sie den Browser anweisen möchten, einen Attribution-Reporting-Eligible-Header zusammen mit der Skriptanforderung zu senden. Auf der Serverseite 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 Attribution-Trigger zu registrieren.

HTMLScriptElement.async

Ein Boolean-Wert, der steuert, wie das Skript ausgeführt werden soll. Bei klassischen Skripten, wenn die async-Eigenschaft auf true gesetzt ist, wird das externe Skript parallel zum Parsen abgerufen und ausgewertet, sobald es verfügbar ist. Bei Modulscripten, wenn die async-Eigenschaft auf true gesetzt ist, werden das Skript und alle ihre 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 das blocking-Attribut des <script>-Elements wider.

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 widerspiegelt. Bei klassischen Skripten von anderen Ursprüngen steuert dies, ob Fehlerinformationen offengelegt werden.

HTMLScriptElement.defer

Ein Boolean-Wert, der steuert, wie das Skript ausgeführt werden soll. Bei klassischen Skripten, wenn die defer-Eigenschaft auf true gesetzt ist, wird das externe Skript nach dem Parsen des Dokuments ausgeführt, aber vor dem Auslösen des DOMContentLoaded-Ereignisses. Bei Modulscripten hat die defer-Eigenschaft keine Auswirkungen.

HTMLScriptElement.event Veraltet

Ein String; eine veraltete Methode zum Registrieren von Ereignishandlern auf Elementen in einem HTML-Dokument.

HTMLScriptElement.fetchPriority

Ein optionaler String, der dem Browser einen Hinweis darauf gibt, wie das Abrufen eines externen Skripts im Verhältnis zu anderen externen Skripten priorisiert werden soll. Wenn dieser Wert angegeben wird, muss er einer der möglichen erlaubten Werte sein: high für hohe Priorität, low für niedrige Priorität oder auto für keine Präferenz (was der Standard ist). Er spiegelt das fetchpriority-Attribut des <script>-Elements wider.

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

HTMLScriptElement.noModule

Ein Boolean-Wert, der, wenn true, die Ausführung des Skripts in Browsern stoppt, 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, welchen Referrer beim Abrufen des Skripts und durch das Skript durchgeführte Abrufe verwendet werden soll.

HTMLScriptElement.src

Ein String, der die URL eines externen Skripts darstellt; dies kann anstelle der direkten Einbettung eines Skripts in ein Dokument verwendet werden. Er spiegelt das src-Attribut des <script>-Elements wider.

HTMLScriptElement.text

Ein String, der die Inhalte von allen Text-Knoten innerhalb des <script>-Elements in Baumreihenfolge verbindet und zurückgibt (andere Knoten wie Kommentare werden ignoriert). Bei der Einstellung wirkt es genauso wie die Node.textContent-Eigenschaft.

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

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 Feature-Erkennung in Bezug auf Skripte.

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 ein <script>-Knoten unmittelbar vor dem <script> hinzugefügt wird, das den folgenden Code hostet (über document.currentScript). 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;
}

Die nächste Funktion, anstatt die neuen Skripte unmittelbar vor dem document.currentScript Element voranzustellen, hängt sie als Kinder des <head>-Tags an.

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

Beispielanwendung:

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 Modulunterstützung überprüft, unter Verwendung der Existenz des noModule-Attributs als Fallback.

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

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

Spezifikationen

Specification
HTML Standard
# htmlscriptelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch