HTMLScriptElement

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLScriptElement.attributionSrc Sicherer Kontext Experimentell

Ruft das attributionsrc-Attribut eines <script>-Elements ab und setzt es programmgesteuert und spiegelt den Wert dieses Attributs wider. attributionsrc gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header zusammen mit der Skript-Ressourcenanforderung 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 zu registrieren.

HTMLScriptElement.async

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte, wenn die Eigenschaft async auf true gesetzt ist, wird das externe Skript parallel zum Parsen geladen und ausgewertet, sobald es verfügbar ist. Für Modulskripte, wenn die Eigenschaft async auf true gesetzt ist, werden das Skript und alle seine Abhängigkeiten parallel zum Parsen geladen und ausgewertet, sobald sie verfügbar sind.

HTMLScriptElement.blocking

Ein String, der angibt, 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 Zeichenkodierung eines externen Skripts darstellt. Es spiegelt das charset-Attribut wider.

HTMLScriptElement.crossOrigin

Ein String, der die CORS-Einstellung für das Skriptelement widerspiegelt. Für klassische Skripte aus anderen Ursprüngen steuert dies, ob Fehlerinformationen offengelegt werden.

HTMLScriptElement.defer

Ein boolescher Wert, der steuert, wie das Skript ausgeführt werden soll. Für klassische Skripte, wenn die Eigenschaft defer auf true gesetzt ist, wird das externe Skript nach dem Parsen des Dokuments, aber vor dem Auslösen des DOMContentLoaded-Events ausgeführt. Für Modulskripte hat die Eigenschaft defer keine Auswirkung.

HTMLScriptElement.event Veraltet

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

HTMLScriptElement.fetchPriority

Ein optionaler String, der dem Browser einen Hinweis darauf gibt, wie das Laden eines externen Skripts im Verhältnis zu anderen externen Skripten priorisiert werden soll. Wenn dieser Wert angegeben ist, muss er einer der zulässigen Werte sein: high, um die Priorität hoch zu setzen, low, um die Priorität niedrig zu setzen, oder auto, um keine Präferenz anzugeben (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, ob eine abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Es 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 — wird verwendet, um Fallback-Skripte in älteren Browsern auszuführen, die nicht JavaScript-Module unterstützen.

HTMLScriptElement.referrerPolicy

Ein String, der das referrerPolicy-HTML-Attribut widerspiegelt, das angibt, welcher Referrer beim Laden des Skripts und bei vom Skript durchgeführten Laden 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. Es spiegelt das src-Attribut des <script>-Elements wider.

HTMLScriptElement.text

Ein String, der den Inhalt aller Text-Knoten im <script>-Element in Baumreihenfolge zusammenführt und zurückgibt. Beim Setzen verhält er sich genauso wie die Node.textContent-Eigenschaft.

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

HTMLScriptElement.type

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

HTMLScriptElement.supports()

Gibt true zurück, wenn der Browser Skripte des angegebenen Typs unterstützt, andernfalls false. Diese Methode bietet eine einfache und einheitliche Methode zur Skript-bezogenen Feature-Erkennung.

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

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

Erstellen wir eine Funktion, die neue Skripte in einem Dokument importiert, indem sie einen <script>-Knoten unmittelbar vor dem <script> erstellt, der den folgenden Code beherbergt (durch 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;
}

Diese nächste Funktion fügt, anstatt die neuen Skripte unmittelbar vor dem document.currentScript-Element hinzuzufügen, diese 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;
}

Beispiel zur Nutzung:

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 Unterstützung für Module überprüft, 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 von allen Browsern als unterstützt angenommen.

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