<script>: Das Script-Element

Attribute

Dieses Element umfasst die globalen Attribute.

async

Für klassische Skripte, wenn das async-Attribut vorhanden ist, wird das klassische Skript parallel zum Parsen abgerufen und sofort ausgewertet, sobald es verfügbar ist.

Für Modul-Skripte, wenn das async-Attribut vorhanden ist, werden die Skripte und alle ihre Abhängigkeiten parallel zum Parsen abgerufen und sofort ausgewertet, sobald sie verfügbar sind.

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 müsste, 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 ob nur das async-Attribut angegeben ist.

Dies ist ein boolesches Attribut: Das Vorhandensein eines booleschen Attributs an einem Element repräsentiert den Wert „wahr“, und das Fehlen des Attributs repräsentiert den Wert „falsch“.

Siehe Browser-Kompatibilität für Hinweise zur Browser-Unterstützung. Siehe auch Async-Skripte für asm.js.

attributionsrc Experimentell

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

Hinweis: Alternativ können JavaScript-basierte Zuweisungsquellen oder -auslöser durch Senden einer fetch()-Anfrage mit der attributionReporting-Option registriert werden (entweder direkt im fetch()-Aufruf festgelegt oder auf einem Request-Objekt, das in den fetch()-Aufruf übergeben wird), oder durch Senden eines XMLHttpRequest mit setAttributionReporting(), das am Anfrageobjekt aufgerufen wird.

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

• Boolesch, d.h. nur der attributionsrc-Name. Dies gibt an, dass Sie den Attribution-Reporting-Eligible-Header an denselben Server senden möchten, auf den das src-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Zuweisungsquelle oder des Auslösers auf demselben Server behandeln. Bei der Registrierung eines Zuweisungsauslösers ist diese Eigenschaft optional, und es wird ein leerer Zeichenfolgenwert 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 sich nicht auf einem Server befindet, den Sie kontrollieren, oder Sie möchten die Registrierung der Zuweisungsquelle auf einem anderen Server handhaben. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Wenn die Ressourcenanfrage erfolgt, wird der Attribution-Reporting-Eligible-Header an die in attributionSrc angegebenen URL(s) gesendet, zusätzlich zum Ursprungsserver der Ressource. Diese URLs können dann mit einem entsprechenden Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

  Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Zuweisungsquellen auf derselben Funktion registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, die das Generieren unterschiedlicher Berichte zu unterschiedlichen Daten beinhalten.

Siehe die Attribution Reporting API für weitere Details.

blocking

Dieses Attribut gibt explizit an, dass bestimmte Operationen blockiert werden sollen, bis das Skript ausgeführt wurde. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste von Blockierungs-Token sein. Derzeit gibt es nur ein Token:

• render: Das Rendern von Inhalten auf dem Bildschirm wird blockiert.

Hinweis: Nur script-Elemente im <head> des Dokuments können möglicherweise das Rendern blockieren. Skripte blockieren das Rendern nicht standardmäßig; wenn ein script-Element nicht type="module", async oder defer enthält, blockiert es das Parsen, nicht das Rendern. Wenn ein solches script-Element dynamisch über ein Skript hinzugefügt wird, müssen Sie blocking = "render" setzen, damit es das Rendern blockiert.

crossorigin

Normale script-Elemente übergeben minimale Informationen an window.onerror für Skripte, die die standardmäßigen CORS-Prüfungen nicht bestehen. Um das Fehlerprotokoll für Websites zu ermöglichen, die eine separate Domain für statische Medien verwenden, verwenden Sie dieses Attribut. Siehe CORS-Einstellung-Attribute für eine detailliertere Erklärung seiner gültigen Argumente.

defer

Dieses boolesche Attribut wird gesetzt, um einem Browser anzuzeigen, dass das Skript nach dem Parse des Dokuments, aber vor dem Auslösen des DOMContentLoaded-Ereignisses ausgeführt werden soll.

Skripte mit dem defer-Attribut verhindern, dass das DOMContentLoaded-Ereignis ausgelöst wird, bis das Skript geladen und die Auswertung abgeschlossen ist.

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.

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 müsste, 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 ob nur das async-Attribut angegeben ist.

fetchpriority

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

high

Ruft das externe Skript mit hoher Priorität im Vergleich zu anderen externen Skripten ab.

low

Ruft das externe Skript mit niedriger Priorität im Vergleich zu anderen externen Skripten ab.

auto

Legt keine Voreinstellung für die Abrufpriorität fest. Dies ist der Standard. Es wird verwendet, wenn kein Wert oder ein ungültiger Wert festgelegt ist.

integrity

Dieses Attribut enthält Inline-Metadaten, die ein Benutzeragent verwenden kann, um zu überprüfen, ob eine abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Das Attribut darf nicht angegeben werden, wenn das src-Attribut fehlt. Siehe Subresource Integrity.

nomodule

Dieses boolesche Attribut wird gesetzt, um anzuzeigen, dass das Skript in Browsern, die ES-Module unterstützen, nicht ausgeführt werden sollte — tatsächlich kann dies verwendet werden, um Fallback-Skripte an ältere Browser zu liefern, die keinen modularen JavaScript-Code unterstützen.

nonce

Ein kryptografischer Zufallswert (nur einmal verwendete Nummer), um Skripte in einer script-src Content-Security-Policy zuzulassen. Der Server muss jedes Mal einen eindeutigen Zufallswert generieren, wenn er eine Richtlinie überträgt. Es ist entscheidend, einen Zufallswert bereitzustellen, der nicht erraten werden kann, da das Umgehen der Richtlinie einer Ressource sonst 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 Origins ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: sein Scheme, Host und Port.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer wird auf das Scheme, den Host und den Port beschränkt. Navigationen im selben Ursprung enthalten immer noch den Pfad.
• same-origin: Ein Referrer wird für gleichen Ursprung gesendet, aber bei Anfragen über Ursprungsgrenzen hinweg wird kein Referrer gesendet.
• strict-origin: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), sendet ihn aber nicht an eine weniger sichere Zieladresse (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL, wenn eine Anfrage im gleichen Ursprung ausgeführt wird; sendet nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS); und sendet keinen Header an eine weniger sichere Zieladresse (HTTPS→HTTP).
• unsafe-url: Der Referrer wird den Ursprung und den Pfad enthalten (aber nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge durchleitet.

Hinweis: Ein leerer Zeichenfolgenwert ("") ist sowohl der Standardwert als auch ein Fallback-Wert, falls referrerpolicy nicht unterstützt wird. Wenn referrerpolicy nicht explizit am <script>-Element angegeben wird, übernimmt es eine höhere Referrer-Richtlinie, d.h. eine auf dem gesamten Dokument oder der Domain festgelegte. Wenn keine höhere Richtlinie verfügbar ist, wird der leere String so behandelt, als wäre er gleichwertig mit strict-origin-when-cross-origin.

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 dargestellten Skripts an. Der Wert dieses Attributs wird einer der folgenden sein:

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

Gibt an, dass das Skript ein "klassisches Skript" ist, das JavaScript-Code enthält. Autoren wird empfohlen, das Attribut wegzulassen, wenn es sich bei dem Skript um JavaScript-Code handelt, anstatt einen MIME-Typ anzugeben. JavaScript-MIME-Typen sind in der IANA-Medientypen-Spezifikation aufgelistet.

importmap

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

module

Dieser Wert bewirkt, dass der Code als JavaScript-Modul behandelt wird. Die Verarbeitung des Skriptinhalts wird verzögert. Die charset und defer Attribute wirken sich nicht aus. Für Informationen zur Verwendung von module, siehe unseren JavaScript-Module-Leitfaden. Im Gegensatz zu klassischen Skripten erfordern Modulscripte die Verwendung des CORS-Protokolls für abruferübergreifendes Fetching.

speculationrules Experimentell

Dieser Wert gibt an, dass der Body des Elements Spekulationsregeln enthält. Spekulationsregeln nehmen die Form eines JSON-Objekts an, das bestimmt, welche Ressourcen vom Browser vorgeholt oder vorgerendert werden sollen. Dies ist Teil der 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.

Veraltete Attribute

charset Veraltet

Wenn vorhanden, muss sein Wert eine ASCII-fallunempfindliche Übereinstimmung mit utf-8 sein. Es ist nicht notwendig, das charset-Attribut zu spezifizieren, da Dokumente UTF-8 verwenden müssen und das script-Element seine 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.

Hinweise

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 serviert 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 serviert wird. Wenn das Skript blockiert wird, wird ein error-Ereignis an das Element gesendet; andernfalls wird ein load-Ereignis gesendet.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie man ein (externes) Skript mit dem <script>-Element importiert:

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

Das folgende Beispiel zeigt, wie man ein (Inline-)Skript innerhalb des <script>-Elements platziert:

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

async und defer

Skripte, die mit dem async-Attribut geladen werden, laden das Skript, ohne die Seite zu blockieren, während das Skript abgerufen wird. Sobald der Download jedoch abgeschlossen ist, wird das Skript ausgeführt, was die Seite davon abhält, gerendert zu werden. Dies bedeutet, dass der Rest des Inhalts auf der Webseite daran gehindert wird, verarbeitet und dem Benutzer angezeigt zu werden, bis das Skript das Ausführen beendet hat. Es gibt keine Garantie, 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 erst ausgeführt, nachdem der gesamte Seiteninhalt geladen ist, was nützlich ist, wenn Ihre Skripte davon abhängen, dass das DOM in Ordnung ist (z. B. wenn sie ein oder mehrere Elemente auf der Seite ändern).

Hier ist eine visuelle Darstellung der verschiedenen Skriptlade-Methoden und was das für Ihre Seite bedeutet:

Dieses Bild stammt aus der HTML-Spezifikation, kopiert und auf eine reduzierte Version beschnitten, unter den Lizenzbedingungen von CC BY 4.0.

Zum Beispiel, wenn Sie 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 darauf verlassen, in welcher Reihenfolge die Skripte geladen werden. jquery.js könnte vor oder nach script2.js und script3.js laden, und falls dies der Fall ist, führen Funktionen in diesen Skripten, die von jquery abhängen, zu einem Fehler, da jquery zum Zeitpunkt der Skriptausführung nicht definiert ist.

async sollte verwendet werden, wenn Sie eine Reihe von Hintergrund-Skripten zu laden haben und diese so schnell wie möglich bereitstellen wollen. Zum Beispiel, vielleicht haben Sie einige Spieldateien zu laden, die nötig sind, wenn das Spiel tatsächlich beginnt, aber vorerst möchten Sie einfach mit dem Anzeigen des Spiel-Intros, der Titel und der Lobby fortfahren, ohne dass diese vom Laden der Skripte blockiert werden.

Skripte, die mit dem defer-Attribut geladen werden (siehe unten), werden in der Reihenfolge, in der sie sich auf der Seite befinden, geladen und 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 erst ausgeführt, nachdem der gesamte Seiteninhalt geladen ist, was nützlich ist, wenn Ihre Skripte davon abhängen, dass das DOM in Ordnung ist (z. B. wenn sie ein oder mehrere Elemente auf der Seite ändern).

Zusammenfassend:

• async und defer weisen den Browser beide an, das/die Skript(e) in einem separaten Thread herunterzuladen, während der Rest der Seite (das DOM, etc.) heruntergeladen wird, so dass 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 bestimmte Ausführungsreihenfolge.
• Skripte mit einem defer-Attribut werden in der Reihenfolge geladen, in der sie im HTML stehen, und werden nur ausgeführt, sobald alles geladen ist.
• Wenn Ihre Skripte sofort ausgeführt werden sollen und keine Abhängigkeiten haben, verwenden Sie async.
• Wenn Ihre Skripte auf das Parsen warten müssen und von anderen Skripten und/oder dem DOM abhängen, laden Sie sie mit defer und setzen Sie deren entsprechende <script>-Elemente in der Reihenfolge, in der der Browser sie ausführen soll.

Modul-Fallback

Browser, die den module-Wert für das type-Attribut unterstützen, ignorieren jedes Skript mit einem nomodule-Attribut. Das ermöglicht Ihnen die Verwendung von Modul-Skripten, während Sie nomodule-markierte Fallback-Skripte für nicht unterstützende Browser bereitstellen.

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

Module mit importmap importieren

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

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

Eine Importkarte ermöglicht es Ihnen, eine Zuordnung bereitzustellen, die, wenn übereinstimmend, den Text im Modulspezifikator ersetzen kann. Die untenstehende Importkarte definiert die Schlüssel circle und square, die als Aliase für die in den Modulspezifikatoren gezeigten Module verwendet werden können.

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

Damit können wir Module mit Namen im Modulspezifikator importieren (anstatt mit absoluten oder relativen URLs).

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

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

Einbetten von Daten in HTML

Sie können das <script>-Element auch verwenden, um Daten in HTML mit serverseitigem Rendern 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>

Blockieren des Renderns bis ein Skript abgerufen und ausgeführt ist

Sie können das render-Token innerhalb eines blocking-Attributes einschließen; das Rendern der Seite wird blockiert, bis das Skript abgerufen und ausgeführt ist. Im untenstehenden Beispiel blockieren wir das Rendern eines asynchronen Skripts, so dass das Skript nicht das Parsen blockiert, aber garantiert vor dem Start des Renderings ausgeführt wird.

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• document.currentScript
• Flavio Copes' Artikel über effizientes Laden von JavaScript und die Unterschiede zwischen async und defer erklären
• JavaScript-Module Leitfaden