HTMLScriptElement

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLScriptElement.attributionSrc Sicherer Kontext Experimentell

Ruft das attributionsrc-Attribut eines <script>-Elements ab und legt es programmgesteuert fest, wodurch der Wert dieses Attributs widergespiegelt wird. attributionsrc gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header zusammen mit der Skriptressourcenanfrage sendet. 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 entsprechend zu registrieren.

HTMLScriptElement.async

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte wird das externe Skript parallel zum Parsen abgerufen und so schnell wie möglich ausgeführt, wenn die async-Eigenschaft auf true gesetzt ist. Für Modulskripte werden das Skript und alle seine Abhängigkeiten parallel zum Parsen abgerufen und so schnell wie möglich ausgeführt, wenn die async-Eigenschaft auf true gesetzt ist.

HTMLScriptElement.blocking

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

HTMLScriptElement.charset Veraltet

Eine Zeichenfolge, die die Zeichenkodierung eines externen Skripts darstellt. Sie spiegelt das charset-Attribut wider.

HTMLScriptElement.crossOrigin

Eine Zeichenfolge, die die CORS-Einstellung für das Skriptelement widergibt. Für klassische Skripte aus anderen Ursprüngen wird dadurch gesteuert, ob Fehlerinformationen offengelegt werden.

HTMLScriptElement.defer

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte wird das externe Skript ausgeführt, nachdem das Dokument analysiert wurde, aber vor dem Auslösen des DOMContentLoaded-Ereignisses, wenn die defer-Eigenschaft auf true gesetzt ist. Für Modulskripte hat die defer-Eigenschaft keine Wirkung.

HTMLScriptElement.event Veraltet

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

HTMLScriptElement.fetchPriority

Eine optionale Zeichenfolge, die dem Browser einen Hinweis darauf gibt, wie das Abrufen eines externen Skripts im Vergleich zu anderen externen Skripten priorisiert werden soll. Wenn dieser Wert bereitgestellt wird, muss er einer der 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). Sie spiegelt das fetchpriority-Attribut des <script>-Elements wider.

HTMLScriptElement.integrity

Eine Zeichenfolge, die Inline-Metadaten enthält, die ein Browser verwenden kann, um zu überprüfen, ob eine abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Sie 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 stoppt, die ES-Module unterstützen — verwendet, um Fallback-Skripte in älteren Browsern ohne JavaScript-Modulunterstützung zu starten.

HTMLScriptElement.referrerPolicy

Eine Zeichenfolge, die das referrerPolicy-HTML-Attribut widerspiegelt. Dieses gibt an, welcher Referrer beim Abrufen des Skripts und von diesem Skript durchgeführten Abrufen verwendet werden soll.

HTMLScriptElement.src

Eine Zeichenfolge, die die URL eines externen Skripts darstellt; dies kann als Alternative zur direkten Einbettung eines Skripts in ein Dokument verwendet werden. Sie spiegelt das src-Attribut des <script>-Elements wider.

HTMLScriptElement.text

Eine Zeichenfolge, die den Inhalt aller Text-Knoten innerhalb des <script>-Elements (ignorierend andere Knoten wie Kommentare) in Baumreihenfolge verbindet und zurückgibt. Beim Setzen verhält sie sich genauso wie die Node.textContent-Eigenschaft.

Hinweis: Wenn durch die Document.write()-Methode eingefügt, werden <script>-Elemente (typischerweise synchron) ausgeführt, jedoch nicht, wenn sie durch Element.innerHTML oder Element.outerHTML eingefügt werden.

HTMLScriptElement.type

Eine Zeichenfolge, die den Typ des Skripts darstellt. Sie 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 Funktionsprü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 in ein Dokument importiert, indem ein <script>-Knoten unmittelbar vor dem <script>, das den folgenden Code hostet (durch document.currentScript), erzeugt wird. Diese Skripte werden asynchron ausgeführt. Weitere Details finden Sie in den 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, anstatt die neuen Skripte direkt vor dem document.currentScript-Element einzufügen, diese 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.');
});

HTMLScriptElement.supports() bietet einen einheitlichen Mechanismus zur Überprüfung, ob ein Browser bestimmte Skripttypen unterstützt.

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

Klassische Skripte werden auf allen Browsern als unterstützt angesehen.

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