<script>: Das Script-Element

Dieses Element enthält die globalen Attribute.

async

Für klassische Skripte, wenn das async-Attribut vorhanden ist, wird das klassische Skript parallel zum Parsen abgerufen und sofort nach dessen Verfügbarkeit ausgewertet.

Für Modul-Skripte, wenn das async-Attribut vorhanden ist, werden die Skripte und all ihre Abhängigkeiten parallel zum Parsen abgerufen und sofort nach deren Verfügbarkeit ausgewertet.

Warnung: Dieses Attribut darf nicht verwendet werden, wenn das src-Attribut fehlt (d.h. für Inline-Skripte) bei klassischen Skripten, da es in diesem Fall keine Wirkung hätte.

Dieses Attribut ermöglicht die Beseitigung von Parser-blockierendem JavaScript, bei dem der Browser Skripte laden und auswerten muss, bevor er mit dem Parsen fortfahren kann. defer hat in diesem Fall eine ähnliche Wirkung.

Wenn das Attribut zusammen mit dem defer-Attribut angegeben wird, verhält sich das Element so, als wäre nur das async-Attribut angegeben.

Dies ist ein boolesches Attribut: Die Anwesenheit eines booleschen Attributs auf einem Element repräsentiert den Wert wahr, und das Fehlen des Attributs repräsentiert den Wert falsch.

Siehe Browser-Kompatibilität für Anmerkungen zur Browserunterstützung. Siehe auch Asynchrone Skripte für asm.js.

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header zusammen mit der Skriptressourcenanforderung 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 Attribution-Trigger zu registrieren. Welcher Antwort-Header zurückgesendet werden sollte, hängt vom Wert des Headers Attribution-Reporting-Eligible ab, der die Registrierung ausgelöst hat.

Hinweis: Alternativ können JavaScript-basierte Attributionsquellen oder -Trigger registriert werden, indem eine fetch()-Anfrage mit der Option attributionReporting gesendet wird (entweder direkt im fetch()-Aufruf festgelegt oder auf einem Request-Objekt angegeben, das in den fetch()-Aufruf übergeben wird), oder indem eine XMLHttpRequest mit einem Aufruf von setAttributionReporting() am Anforderungsobjekt gesendet wird.

Es gibt zwei Versionen dieses Attributs, die Sie festlegen können:

• Boolesch, d.h. nur der Name attributionsrc. Dies gibt an, dass Sie möchten, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet wird, auf den das src-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung von Attributionsquellen oder -Triggern auf demselben Server durchführen. Beim Registrieren eines Attribution-Triggers ist diese Eigenschaft optional, und ein leerer Zeichenfolgenwert wird verwendet, wenn sie weggelassen wird.

• Wert, der eine oder mehrere URLs enthält, zum Beispiel:

  html

  <script
    src="myscript.js"
    attributionsrc="https://a.example/register-source https://b.example/register-source"></script>
  

  Dies ist nützlich in Fällen, in denen die angeforderte Ressource nicht auf einem Server liegt, den Sie kontrollieren, oder Sie einfach die Registrierung der Attributionsquelle auf einem anderen Server verwalten möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Wenn die Ressourcenanforderung erfolgt, wird der Attribution-Reporting-Eligible-Header an die in attributionSrc angegebenen URL(s) zusätzlich zum Ursprungsserver gesendet. Diese URLs können dann mit einem Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header entsprechend antworten, um die Registrierung abzuschließen.

  Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen für dieselbe Funktion registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was verschiedene Berichte über verschiedene Daten involviert.

Siehe die Attribution Reporting API für weitere Details.

blocking

Dieses Attribut gibt explizit an, dass bestimmte Vorgänge beim Abrufen des Skripts blockiert werden sollen. Die Vorgänge, die blockiert werden sollen, müssen eine durch Leerzeichen getrennte Liste von Blockierungs-Token gemäß untenstehender Liste sein.

• render: Die Darstellung des Inhalts auf dem Bildschirm wird blockiert.

crossorigin

Normale script-Elemente übermitteln minimale Informationen an window.onerror für Skripte, die die standardmäßigen CORS-Prüfungen nicht bestehen. Um Fehlerprotokollierung für Websites zu ermöglichen, die eine separate Domäne für statische Medien nutzen, verwenden Sie dieses Attribut. Siehe CORS-Einstellungen für Attribute für eine genauere Erklärung der gültigen Argumente.

defer

Dieses boolesche Attribut ist gesetzt, um dem Browser anzuzeigen, dass das Skript nach dem Parsen des Dokuments ausgeführt werden soll, aber bevor das DOMContentLoaded-Ereignis ausgelöst wird.

Skripte mit dem Attribut defer verhindern, dass das DOMContentLoaded-Ereignis ausgelöst wird, bis das Skript geladen und ausgewertet wurde.

Warnung: Dieses Attribut darf nicht verwendet werden, wenn das src-Attribut fehlt (d.h. für Inline-Skripte), da es in diesem Fall keine Wirkung hätte.

Das defer-Attribut hat keine Wirkung auf Modul-Skripte — sie werden standardmäßig verzögert ausgeführt.

Skripte mit dem defer-Attribut werden in der Reihenfolge ausgeführt, in der sie im Dokument erscheinen.

Dieses Attribut ermöglicht die Beseitigung von Parser-blockierendem JavaScript, bei dem der Browser Skripte laden und auswerten muss, bevor er mit dem Parsen fortfahren kann. async hat in diesem Fall eine ähnliche Wirkung.

Wenn das Attribut zusammen mit dem async-Attribut angegeben wird, verhält sich das Element so, als wäre nur das async-Attribut angegeben.

fetchpriority

Gibt einen Hinweis auf die relative Priorität, die beim Abrufen eines externen Skripts verwendet werden soll. Erlaubte Werte:

high

Abrufen des externen Skripts mit hoher Priorität im Vergleich zu anderen externen Skripten.

low

Abrufen des externen Skripts mit niedriger Priorität im Vergleich zu anderen externen Skripten.

auto

Keine Präferenz für die Abrufpriorität festlegen. Dies ist der Standardwert. Er wird verwendet, wenn kein Wert oder ein ungültiger Wert festgelegt ist.

Siehe HTMLScriptElement.fetchPriority für weitere Informationen.

integrity

Dieses Attribut enthält Metadaten, die ein Benutzeragent verwenden kann, um sicherzustellen, dass eine abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Das Attribut darf nicht spezifiziert werden, wenn das src-Attribut nicht angegeben ist. Siehe Subresource Integrity.

nomodule

Dieses boolesche Attribut ist gesetzt, um anzuzeigen, dass das Skript nicht in Browsern ausgeführt werden soll, die ES-Module unterstützen — effektiv kann es verwendet werden, um Fallback-Skripte für ältere Browser bereitzustellen, die kein modulares JavaScript unterstützen.

nonce

Eine kryptographische Einmalzahl (nonce), um Skripte in einer script-src Content-Security-Policy zu erlauben. Der Server muss bei jeder Übermittlung einer Richtlinie einen eindeutigen Nonce-Wert generieren. Es ist entscheidend, einen Nonce bereitzustellen, der nicht erraten werden kann, da das Umgehen der Richtlinien einer Ressource ansonsten trivial ist.

referrerpolicy

Gibt an, welchen Referrer beim Abrufen des Skripts oder von Ressourcen, die vom Skript abgerufen werden, gesendet werden soll:

• no-referrer: Der Referer-Header wird nicht gesendet.
• no-referrer-when-downgrade: Der Referer-Header wird nicht an Ursprünge ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: ihr Schema, Host und Port.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer wird auf das Schema, den Host und den Port beschränkt. Navigationen im selben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für den gleichen Ursprung gesendet, aber grenzüberschreitende Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Nur den Ursprung des Dokuments als Referrer senden, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel senden (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Eine volle URL senden, wenn eine Anfrage im selben Ursprung erfolgt, nur den Ursprung senden, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und keinen Header an ein weniger sicheres Ziel senden (HTTPS→HTTP).
• unsafe-url: Der Referrer wird den Ursprung und den Pfad enthalten (aber nicht das Fragment, Passwort oder Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge leakt.

Hinweis: Ein leerer Zeichenfolgenwert ("") ist sowohl der Standardwert als auch ein Fallbackwert, wenn referrerpolicy nicht unterstützt wird. Wenn referrerpolicy nicht explizit auf dem <script>-Element angegeben ist, wird es eine höherstufige Referrer-Policy übernehmen, d.h. eine, die auf dem gesamten Dokument oder der Domäne festgelegt ist. Wenn keine höherstufige Richtlinie verfügbar ist, wird der leere Zeichenfolgenwert als gleichbedeutend mit strict-origin-when-cross-origin behandelt.

src

Dieses Attribut gibt die URI eines externen Skripts an; dies kann als Alternative zum direkten Einbetten eines Skripts innerhalb eines Dokuments verwendet werden.

type

Dieses Attribut gibt den Typ des repräsentierten Skripts an. Der Wert dieses Attributs wird einer der folgenden sein:

Attribut ist nicht gesetzt (Standard), ein leerer Zeichenfolgenwert oder ein JavaScript-MIME-Typ

Gibt an, dass das Skript ein "klassisches Skript" ist, das JavaScript-Code enthält. Autoren werden ermutigt, das Attribut wegzulassen, wenn das Skript JavaScript-Code referenziert, anstatt einen MIME-Typ anzugeben. JavaScript-MIME-Typen sind in der IANA-Media-Typen-Spezifikation aufgeführt.

importmap

Dieser Wert gibt an, dass der Körper des Elements eine Importmap enthält. Die Importmap ist ein JSON-Objekt, das Entwickler verwenden können, um zu steuern, wie der Browser Modulspezifikatoren auflöst, wenn JavaScript-Module importiert werden.

module

Dieser Wert bewirkt, dass der Code als ein JavaScript-Modul behandelt wird. Die Verarbeitung der Skriptinhalte wird verzögert. Die Attribute charset und defer haben keine Wirkung. Informationen zur Verwendung von module finden Sie in unserem JavaScript-Module-Leitfaden. Anders als klassische Skripte erfordern Modul-Skripte die Verwendung des CORS-Protokolls für das grenzübergreifende Abrufen.

speculationrules Experimentell

Dieser Wert gibt an, dass der Körper des Elements Spekulationsregeln enthält. Spekulationsregeln haben die Form eines JSON-Objekts, das bestimmt, welche Ressourcen der Browser vorab laden oder vorab rendern soll. Dies gehört zur Speculation Rules API.

Jeder andere Wert

Der eingebettete Inhalt wird als Datenblock behandelt und nicht vom Browser verarbeitet. Entwickler müssen einen gültigen MIME-Typ verwenden, der kein JavaScript-MIME-Typ ist, um Datenblöcke zu kennzeichnen. Alle anderen Attribute werden ignoriert, einschließlich des src-Attributs.

charset Veraltet

Wenn vorhanden, muss sein Wert in einer ASCII-Falluntersensitiven Übereinstimmung mit utf-8 stehen. Es ist nicht notwendig, das charset-Attribut anzugeben, da Dokumente UTF-8 verwenden müssen und das script-Element die Zeichenkodierung vom Dokument erbt.

language Veraltet Nicht standardisiert

Wie das type-Attribut identifiziert dieses Attribut die verwendete Skriptsprache. Im Gegensatz zum type-Attribut wurden die möglichen Werte dieses Attributs jedoch nie standardisiert. Stattdessen sollte das type-Attribut verwendet werden.

Skripte ohne async, defer- oder type="module"-Attribute sowie Inline-Skripte ohne das type="module"-Attribut werden sofort abgerufen und ausgeführt, bevor der Browser mit dem Parsen der Seite fortfährt.

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

Diese Beispiele zeigen, wie man ein (externes) Skript mit dem <script>-Element importiert.

<script src="javascript.js"></script>

Und die folgenden Beispiele zeigen, wie man ein (Inline-)Skript innerhalb des <script>-Elements platziert.

<script>
  alert("Hello World!");
</script>

Skripte, die mit dem async-Attribut geladen werden, laden das Skript, ohne während des Abrufs die Seite zu blockieren. Sobald der Download abgeschlossen ist, wird das Skript jedoch ausgeführt, was das Rendern der Seite blockiert. Das bedeutet, dass der Rest der Inhalte auf der Webseite nicht verarbeitet und dem Benutzer angezeigt werden kann, bis das Skript fertiggestellt ist. Es gibt keine Garantie dafür, dass Skripte in einer bestimmten Reihenfolge ausgeführt werden. Es ist am besten, async zu verwenden, wenn die Skripte auf der Seite unabhängig voneinander laufen und nicht von anderen Skripten auf der Seite abhängen.

Skripte, die mit dem defer-Attribut geladen werden, werden in der Reihenfolge geladen, in der sie auf der Seite erscheinen. Sie werden nicht ausgeführt, bis alle Seitenelemente geladen sind, was nützlich ist, wenn Ihre Skripte davon abhängen, dass das DOM vorhanden ist (z.B. ändern sie ein oder mehrere Elemente auf der Seite).

Hier ist eine visuelle Darstellung der verschiedenen Skriptlade-Methoden und deren Auswirkungen auf Ihre Seite:

Dieses Bild stammt aus der HTML-Spezifikation, kopiert und auf eine reduzierte Version zugeschnitten, gemäß den Lizenzbedingungen von CC BY 4.0.

Wenn Sie beispielsweise die folgenden Skriptelemente haben:

<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>

Sie können sich nicht auf die Reihenfolge verlassen, in der die Skripte geladen werden. jquery.js kann vor oder nach script2.js und script3.js geladen werden, und wenn dies der Fall ist, führen alle Funktionen in diesen Skripten, die von jquery abhängen, zu einem Fehler, da jquery zum Zeitpunkt des Skriptlaufs nicht definiert ist.

async sollte verwendet werden, wenn Sie eine Reihe von Hintergrundskripten laden müssen und diese so schnell wie möglich in Position bringen wollen. Zum Beispiel, vielleicht haben Sie Spieledateien, die geladen werden müssen, wenn das Spiel tatsächlich beginnt, aber momentan möchten Sie nur die Spielintro, Titel und Lobby anzeigen, ohne dass diese durch das Laden des Skripts blockiert werden.

Skripte, die mit dem defer-Attribut geladen werden (siehe unten), werden in der Reihenfolge ausgeführt, in der sie auf der Seite erscheinen, und sie werden ausgeführt, sobald das Skript und der Inhalt heruntergeladen sind:

<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>

Im zweiten Beispiel können wir sicher sein, dass jquery.js vor script2.js und script3.js geladen wird und dass script2.js vor script3.js geladen wird. Sie werden nicht ausgeführt, bis alle Seitenelemente geladen sind, was nützlich ist, wenn Ihre Skripte davon abhängen, dass das DOM vorhanden ist (z.B. ändern sie ein oder mehrere Elemente auf der Seite).

Zusammengefasst:

• async und defer weisen den Browser beide an, das/die Skript(e) in einem separaten Thread zu laden, während der Rest der Seite (das DOM usw.) heruntergeladen wird, sodass der Seitenladevorgang während des Abrufprozesses nicht blockiert wird.
• Skripte mit einem async-Attribut werden ausgeführt, sobald der Download abgeschlossen ist. Dies blockiert die Seite und garantiert keine spezifische Ausführungsreihenfolge.
• Skripte mit einem defer-Attribut werden in der Reihenfolge geladen, in der sie erscheinen, und werden nur ausgeführt, wenn alles vollständig geladen ist.
• Wenn Ihre Skripte sofort ausgeführt werden sollen und keine Abhängigkeiten haben, verwenden Sie async.
• Wenn Ihre Skripte darauf warten müssen, dass das Parsen abgeschlossen ist und von anderen Skripten und/oder dem DOM abhängig sind, laden Sie sie mit defer und platzieren Sie ihre entsprechenden <script>-Elemente in der Reihenfolge, in der Sie möchten, dass der Browser sie ausführt.

Browser, die den module-Wert für das type-Attribut unterstützen, ignorieren jedes Skript mit einem nomodule-Attribut. Dies ermöglicht es, Modul-Skripte zu verwenden, während nomodule-markierte Fallback-Skripte für nicht unterstützende Browser bereitgestellt werden.

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

Beim Importieren von Modulen in Skripten, wenn Sie nicht die type=importmap-Funktion verwenden, muss jedes Modul mit einem Modulspezifikator importiert werden, der entweder eine absolute oder relative URL ist. Im folgenden Beispiel löst sich der erste Modulspezifikator ("./shapes/square.js") relativ zur Basis-URL des Dokuments, während der zweite eine absolute URL ist.

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

Eine Importmap ermöglicht es Ihnen, eine Zuordnung bereitzustellen, die, falls sie übereinstimmt, den Text im Modulspezifikator ersetzen kann. Die Importmap unten definiert Schlüssel square und circle, die als Aliase für die oben gezeigten Modulspezifikatoren verwendet werden können.

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

Dadurch können wir Module mit Namen im Modulspezifikator (anstelle von absoluten oder relativen URLs) importieren.

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

Für weitere Beispiele, was Sie mit Importmaps machen können, siehe den Abschnitt Module mit Importmaps importieren im JavaScript-Module-Leitfaden.

Sie können das <script>-Element auch verwenden, um Daten in HTML mit serverseitigem Rendering einzubetten, indem Sie einen gültigen Nicht-JavaScript-MIME-Typ im type-Attribut angeben.

<!-- Generated by the server -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

Sie können ein render-Token innerhalb eines blocking-Attributs einfügen; das Rendern der Seite wird blockiert, bis das Skript abgerufen und ausgeführt wurde. Im folgenden Beispiel blockieren wir das Rendern bei einem asynchronen Skript, sodass das Skript das Parsen nicht blockiert, aber garantiert ausgewertet wird, bevor das Rendern beginnt.

<script blocking="render" async src="async-script.js"></script>

• document.currentScript
• Flavio Copes’ Artikel zum effizienten Laden von JavaScript und Erklärung der Unterschiede zwischen async und defer
• JavaScript-Module Leitfaden