<script>: Das Script-Element

Attribute

Dieses Element beinhaltet die globalen Attribute.

async

Bei klassischen Skripten, wenn das async-Attribut vorhanden ist, wird das klassische Skript parallel zum Parsen geladen und ausgewertet, sobald es verfügbar ist.

Bei Modul-Skripten, wenn das async-Attribut vorhanden ist, werden die Skripte und all ihre Abhängigkeiten parallel zum Parsen geladen und ausgewertet, sobald sie verfügbar sind.

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

Dieses Attribut ermöglicht die Beseitigung von parsersperrendem JavaScript, bei dem der Browser Skripte laden und auswerten müsste, bevor er mit dem Parsen fortfahren kann. defer hat in diesem Fall einen ähnlichen Effekt.

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

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

Siehe Browser-Kompatibilität für Anmerkungen zur Browserunterstützung. Siehe auch Async scripts for asm.js.

attributionsrc Veraltet

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

Hinweis: Alternativ können JavaScript-basierte Attributionsquellen oder -triggers registriert werden, indem eine fetch()-Anfrage mit der Option attributionReporting gesendet wird (entweder direkt im fetch()-Aufruf eingestellt oder auf einem Request-Objekt, das im fetch()-Aufruf übergeben wird), oder indem eine XMLHttpRequest mit setAttributionReporting() aufgerufen wird.

Es gibt zwei Versionen dieses Attributs, die Sie einstellen 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 der Attributionsquelle oder des Triggers auf demselben Server durchführen. Beim Registrieren eines Attributionstriggers ist diese Eigenschaft optional, und es wird ein leerer Zeichenfolgenwert verwendet, wenn sie weggelassen wird.

• Wert mit einer oder mehreren URLs, 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 wenn Sie die Registrierung der Attributionsquelle auf einem anderen Server durchführen möchten. 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 zusätzlich zur Herkunft der Ressource an die in attributionSrc angegebenen URL(s) gesendet. Diese URLs können dann mit einem Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

  Hinweis: Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf derselben Funktion registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was das Generieren verschiedener Berichte auf verschiedenen Daten umfasst.

Siehe die Attribution Reporting API für weitere Details.

blocking

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

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

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

crossorigin

Normale script-Elemente geben minimale Informationen an die window.onerror weiter für Skripte, die die standardmäßigen CORS-Prüfungen nicht bestehen. Um die Fehlerprotokollierung für Sites zu erlauben, die eine separate Domäne für statische Medien verwenden, verwenden Sie dieses Attribut. Siehe CORS-Einstellungen Attribute für eine ausführlichere Erklärung der gültigen Argumente.

defer

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

Skripte mit dem defer-Attribut verhindern das Auslösen des DOMContentLoaded-Events, 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), in diesem Fall hätte es keine Wirkung.

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 parsersperrendem JavaScript, bei dem der Browser Skripte laden und auswerten müsste, bevor er mit dem Parsen fortfahren kann. async hat in diesem Fall einen ähnlichen Effekt.

Wenn das Attribut zusammen mit dem async-Attribut angegeben wird, verhält sich das Element, 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. 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 bereitgestellt 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 soll — dies kann verwendet werden, um Fallback-Skripte für ältere Browser bereitzustellen, die keinen modularen JavaScript-Code unterstützen.

nonce

Ein kryptografischer Wert (Nummer, die einmal verwendet wird), um Skripte in einer script-src Content-Security-Policy zu erlauben. Der Server muss bei jeder Übertragung einer Richtlinie einen einzigartigen Nonce-Wert generieren. Es ist wichtig, einen Nonce bereitzustellen, der nicht erraten werden kann, da das Umgehen der Richtlinie einer Ressource ansonsten trivial ist.

referrerpolicy

Gibt an, welchen Referrer beim Abrufen des Skripts oder der vom Skript abgerufenen Ressourcen 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: 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 same origin gesendet, aber für Überquellungsanforderungen wird keine Referrer-Information enthalten sein.
• 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 vollständige URL senden, wenn eine gleiche Ursprungsanforderung ausgeführt wird, 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 (aber nicht das fragment, password oder username) enthalten. Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergibt.

Hinweis: Ein leerer Zeichenfolgenwert ("") ist sowohl der Standardwert als auch ein Fallback-Wert, wenn referrerpolicy nicht unterstützt wird. Wenn referrerpolicy nicht explizit am <script>-Element angegeben ist, wird es eine höherstufige Referrer-Richtlinie übernehmen, d.h. eine, die auf das gesamte Dokument oder die ganze Domain angewendet wird. Wenn keine höherstufige Richtlinie verfügbar ist, wird der leere Zeichenfolgenwert als äquivalent zu 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 Skripttyp an, der dargestellt wird. Der Wert dieses Attributs wird einer der folgenden sein:

Attribut ist nicht gesetzt (Standard), eine leere Zeichenfolge 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 sich das Skript auf JavaScript-Code bezieht, anstatt einen MIME-Typ anzugeben. JavaScript-MIME-Typen sind in der IANA-Mediendefinition aufgelistet.

importmap

Dieser Wert gibt an, dass der Inhalt des Elements eine Importkarte enthält. Die Importkarte ist ein JSON-Objekt, mit dem Entwickler steuern können, wie der Browser Modulspezifikatoren beim Importieren von JavaScript-Modulen aufgelöst.

module

Dieser Wert führt dazu, dass der Code als JavaScript-Modul behandelt wird. Die Verarbeitung der Skriptinhalte wird verzögert. Die charset- und defer-Attribute haben keine Wirkung. 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 das Abrufen über Kreuz.

speculationrules Experimentell

Dieser Wert gibt an, dass der Inhalt des Elements Vermutungsregeln enthält. Vermutungsregeln nehmen die Form eines JSON-Objekts an, das bestimmt, welche Ressourcen vom Browser vorab geladen 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 klein-unempfindliche Übereinstimmung für utf-8 sein. Es ist nicht erforderlich, das charset-Attribut anzugeben, da Dokumente UTF-8 verwenden müssen und das script-Element seine Zeichencodierung 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. Das type-Attribut sollte stattdessen 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 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-Event an das Element gesendet; andernfalls wird ein load-Event gesendet.

Beispiele

Grundlegende Verwendung

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

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

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

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

async und defer

Mit dem async-Attribut geladene Skripte laden das Skript, ohne die Seite zu blockieren, während das Skript abgefragt wird. Sobald der Download jedoch abgeschlossen ist, wird das Skript ausgeführt, was die Seite vom Rendern abhält. Dies bedeutet, dass der restliche Inhalt der Webseite daran gehindert wird, vom Benutzer verarbeitet und angezeigt zu werden, bis das Skript fertig ausgeführt ist. Sie erhalten 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 ausgeführt werden und nicht von einem anderen Skript auf der Seite abhängig sind.

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

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

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

Beispielsweise, 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 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, werden Funktionen in diesen Skripten, die von jquery abhängen, einen Fehler erzeugen, weil jquery zum Zeitpunkt der Skriptausführung nicht definiert sein wird.

async sollte verwendet werden, wenn Sie eine Reihe von Hintergrundskripten laden müssen und Sie sie so schnell wie möglich an Ort und Stelle haben möchten. Zum Beispiel, vielleicht haben Sie einige Spieldateien zum Laden, die beim tatsächlichen Beginn des Spiels benötigt werden, aber fürs Erste wollen Sie nur mit dem Anzeigen des Spieleintros, der Titel und der Lobby fortfahren, ohne dass sie durch das Skriptladen blockiert werden.

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

<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, bevor der gesamte Seiteninhalt geladen ist, was nützlich ist, wenn Ihre Skripte darauf angewiesen sind, dass das DOM vorhanden ist (z.B. wenn sie ein oder mehrere Elemente auf der Seite ändern).

Zusammenfassend:

• async und defer weisen den Browser an, das Skript in einem separaten Thread herunterzuladen, während der Rest der Seite (das DOM usw.) heruntergeladen wird, sodass das Laden der Seite während des Abrufvorgangs 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, die sie haben, und werden nur ausgeführt, wenn alles 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 sie von anderen Skripten und/oder dem DOM abhängig sind, laden Sie sie mit defer und platzieren Sie die entsprechenden <script>-Elemente in der Reihenfolge, in der Sie möchten, dass der Browser sie ausführt.

Modul-Backup

Browser, die den module-Wert für das type-Attribut unterstützen, ignorieren alle Skripte mit einem nomodule-Attribut. Dadurch können Sie Modul-Skripte verwenden und gleichzeitig nomodule-markierte Backup-Skripte für nicht unterstützende Browser bereitstellen.

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

Importieren von Modulen mit Importmap

Beim Importieren von Modulen in Skripten, falls Sie nicht die type=importmap-Funktion verwenden, muss jedes Modul unter Verwendung eines Modulspezifikators importiert werden, der entweder eine absolute oder relative URL ist. Im folgenden Beispiel 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, falls sie übereinstimmt, den Text im Modulspezifikator ersetzen kann. Die folgende Importkarte definiert die Schlüssel circle und square, die als Aliase für die oben gezeigten Modulspezifikatoren 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 Importieren von Modulen unter Verwendung von Importkarten im JavaScript-Module-Leitfaden.

Einbetten von Daten in HTML

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

Rendering blockieren, bis ein Skript abgefragt und ausgeführt wurde

Sie können das render-Token innerhalb eines blocking-Attributs einfügen; das Rendering der Seite wird blockiert, bis das Skript abgefragt und ausgeführt wurde. Im folgenden Beispiel blockieren wir das Rendering eines asynchronen Skripts, so dass das Skript das Parsen nicht blockiert, aber garantiert vor Beginn des Renderings ausgewertet wird.

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• document.currentScript
• Flavio Copes' Artikel über das effiziente Laden von JavaScript und die Erklärung der Unterschiede zwischen async und defer
• JavaScript-Module Leitfaden