HTMLScriptElement

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLScriptElement.attributionSrc Sicherer Kontext 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.

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.

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

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.

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:

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 Skripttypen unterstützt.

Das folgende Beispiel zeigt, wie man die Modulunterstützung überprüft, unter Verwendung der Existenz 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 von allen Browsern unterstützt werden.

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