Das<script>HTML-Element wird verwendet, um führbaren Code oder Daten einzubetten; üblicherweise wird es zum Einbetten oder Verweisen auf JavaScript-Code verwendet. Das<script>-Element kann auch mit anderen Sprachen verwendet werden, wie der GLSL-Shader-Programmiersprache vonWebGL undJSON.

Attribute

Dieses Element enthält dieglobalen Attribute.

async

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

FürModulscripte, wenn dasasync-Attribut vorhanden ist, werden die Skripte und alle ihre Abhängigkeiten parallel zum Parsen abgerufen und ausgeführt, sobald sie verfügbar sind.

Warnung:Dieses Attribut darf nicht verwendet werden, wenn dassrc-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 vonparser-blockierendem JavaScript, wo der Browser Skripte laden und ausführen müsste, bevor das Parsen fortgesetzt wird.defer hat in diesem Fall einen ähnlichen Effekt.

Wenn das Attribut zusammen mit demdefer-Attribut angegeben wird, verhält sich das Element, als ob nur dasasync-Attribut angegeben wäre.

Dies ist ein boolesches Attribut: das Vorhandensein eines booleschen Attributs auf einem Element stellt den Wert "wahr" dar, und das Fehlen des Attributs stellt den Wert "falsch" dar.

SieheBrowser-Kompatibilität für Hinweise zur Browserunterstützung. Siehe auchAsync scripts für asm.js.

attributionsrcExperimentell

Gibt an, dass Sie möchten, dass der Browser einAttribution-Reporting-Eligible-Header zusammen mit der Skript-Ressourcenanforderung sendet. Serverseitig wird dies verwendet, um das Senden einesAttribution-Reporting-Register-Source- oderAttribution-Reporting-Register-Trigger-Headers in der Antwort auszulösen, um eine JavaScript-basierteZuweisungsquelle oder einenZuweisungsauslöser zu registrieren. Welcher Antwort-Header zurückgesendet werden soll, hängt vom Wert des AttributsAttribution-Reporting-Eligible ab, der die Registrierung ausgelöst hat.

Hinweis:Alternativ können JavaScript-basierte Zuweisungsquellen oder -auslöser registriert werden, indem einefetch()-Anfrage gesendet wird, die dieattributionReporting-Option enthält (entweder direkt imfetch()-Aufruf oder in einemRequest-Objekt, das imfetch()-Aufruf übergeben wird), oder durch Senden einesXMLHttpRequest mitsetAttributionReporting(), das beim Anforderungsobjekt aufgerufen wird.

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

• Boolean, d.h. nur derattributionsrc-Name. Dies gibt an, dass Sie möchten, dass derAttribution-Reporting-Eligible-Header zum gleichen Server gesendet wird, auf den dassrc-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Zuweisungsquelle oder des Auslösers auf demselben Server verwalten. Bei der Registrierung eines Zuweisungsauslösers ist diese Eigenschaft optional, und ein Leerwert wird verwendet, wenn sie weggelassen wird.

• Wert, der eine oder mehrere URLs enthält, z. B.:

  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 unter Ihrer Kontrolle liegt oder Sie die Zuweisungsquelle auf einem anderen Server registrieren möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert vonattributionsrc angeben. Wenn die Ressourcenanforderung erfolgt, wird derAttribution-Reporting-Eligible-Header an die inattributionSrc angegebenen URL(s) zusätzlich zum Ursprungsserver gesendet. Diese URLs können dann mit einem passendenAttribution-Reporting-Register-Source- oderAttribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

  Hinweis:Das Angeben mehrerer URLs bedeutet, dass mehrere Zuweisungsquellen für dasselbe Feature registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, für die Sie den Erfolg messen möchten, die das Erstellen verschiedener Berichte über verschiedene Daten umfassen.

Siehe dieAttribution Reporting API für weitere Details.

blocking

Dieses Attribut zeigt 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 Blockierungstoken sein. Derzeit gibt es nur ein Token:

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

Hinweis:Nurscript-Elemente im<head> des Dokuments können möglicherweise das Rendering blockieren. Skripte blockieren standardmäßig nicht das Rendering; wenn einscript-Element nichttype="module",async oderdefer enthält, blockiert esparsing, nichtrendering. Wenn ein solchesscript-Element dynamisch über ein Skript hinzugefügt wird, müssen Sieblocking = "render" setzen, damit es das Rendering blockiert.

crossorigin

Normalescript-Elemente übergeben minimale Informationen anwindow.onerror für Skripte, die die Standard-CORS-Prüfungen nicht bestehen. Verwenden Sie dieses Attribut, um Fehlerprotokollierung für Websites zuzulassen, die eine separate Domain für statische Medien verwenden. SieheCORS-Einstellungen Attribute für eine ausführlichere Erklärung der gültigen Argumente.

defer

Dieses boolesche Attribut wird gesetzt, um einem Browser anzuzeigen, dass das Skript ausgeführt werden soll, nachdem das Dokument analysiert wurde, aber bevor dasDOMContentLoaded-Ereignis ausgelöst wird.

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

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

Dasdefer-Attribut hat keine Wirkung aufModulscripte — sie werden standardmäßig verzögert.

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

Dieses Attribut ermöglicht die Beseitigung vonparser-blockierendem JavaScript, wo der Browser Skripte laden und ausführen müsste, bevor er mit dem Parsen fortfahren kann.async hat in diesem Fall einen ähnlichen Effekt.

Wird das Attribut zusammen mit demasync-Attribut angegeben, verhält sich das Element, als ob nur dasasync-Attribut angegeben wäre.

fetchpriority

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

high

Das externe Skript mit hoher Priorität im Verhältnis zu anderen externen Skripten abrufen.

low

Das externe Skript mit niedriger Priorität im Verhältnis zu anderen externen Skripten abrufen.

auto

Keine Präferenz für die Abrufpriorität festlegen.Dies ist die Standardeinstellung.Sie 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 dassrc-Attribut fehlt. SieheSubresource Integrity.

nomodule

Dieses boolesche Attribut wurde gesetzt, um anzuzeigen, dass das Skript in Browsern, dieES-Module unterstützen, nicht ausgeführt werden sollte — effektiv kann dies verwendet werden, um Fallback-Skripte für ältere Browser bereitzustellen, die modularen JavaScript-Code nicht unterstützen.

nonce

Eine kryptografische Zufallsnummer (number used once), um Skripte in einerscript-src Content-Security-Policy zuzulassen. Der Server muss bei jeder Übermittlung einer Richtlinie einen eindeutigen Nonce-Wert generieren. Es ist entscheidend, einen Nonce zu bieten, der nicht erraten werden kann, da es sonst trivial wäre, die Richtlinie einer Ressource zu umgehen.

referrerpolicy

Gibt an, welcherReferrer beim Abrufen des Skripts oder der vom Skript abgerufenen Ressourcen gesendet werden soll:

• no-referrer: DerReferer-Header wird nicht gesendet.
• no-referrer-when-downgrade: DerReferer-Header wird nicht anUrsprünge ohneTLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: ihrSchema,Host undPort.
• 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ürden gleichen Ursprung gesendet, aber Anfragen an andere Ursprünge enthalten keine Referrerinformationen.
• strict-origin: Nur den Ursprung des Dokuments als Referrer senden, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), aber nicht an eine weniger sichere Zieladresse senden (HTTPS→HTTP).
• strict-origin-when-cross-origin (standardmäßig): Eine vollständige URL senden, wenn eine Anfrage im selben Ursprung ausgeführt wird, nur den Ursprung senden, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und keinen Header an eine weniger sichere Zieladresse senden (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Ursprungund den Pfad (aber nicht dasFragment, dasPasswort oder denBenutzernamen).Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge preisgibt.

Hinweis:Ein leerer Zeichenfolgenwert ("") ist sowohl der Standardwert als auch ein Fallback-Wert, wennreferrerpolicy nicht unterstützt wird. Wennreferrerpolicy nicht explizit im<script>-Element angegeben ist, übernimmt es eine höherstufige Referrer-Richtlinie, d.h. eine, die auf das gesamte Dokument oder die Domain angewendet wird. Wenn keine höherstufige Richtlinie verfügbar ist, wird die leere Zeichenfolge als gleichwertig zustrict-origin-when-cross-origin behandelt.

src

Dieses Attribut gibt die URI eines externen Skripts an; dies kann als Alternative zur direkten Einbettung eines Skripts in ein Dokument 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), eine leere Zeichenfolge 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 sich das Skript auf JavaScript-Code bezieht, anstatt einen MIME-Typ anzugeben.JavaScript-MIME-Typen sindin der IANA-Medientypen-Spezifikation aufgeführt.

importmap

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

module

Dieser Wert führt dazu, dass der Code als JavaScript-Modul behandelt wird.Die Verarbeitung des Skriptinhalts wird verzögert.Die Attributecharset unddefer haben keine Wirkung.Für Informationen zur Verwendung vonmodule sehen Sie sich unserenJavaScript-Module Leitfaden an.Im Gegensatz zu klassischen Skripten erfordern Modulscripte das CORS-Protokoll für das Cross-Origin-Fetching.

speculationrulesExperimentell

Dieser Wert gibt an, dass der Körper des Elements Spekulationsregeln enthält.Spekulationsregeln nehmen die Form eines JSON-Objekts an, das bestimmt, welche Ressourcen vom Browser vorab abgerufen oder vorgeladen werden sollen. Dies ist Teil derSpeculation 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 dessrc-Attributs.

Veraltete Attribute

charsetVeraltet

Falls vorhanden, muss sein Wert einASCII-insensitives Übereinstimmung fürutf-8 sein. Es ist nicht notwendig, dascharset-Attribut anzugeben, da Dokumente UTF-8 verwenden müssen und dasscript-Element seine Zeichencodierung vom Dokument erbt.

languageVeraltetNicht standardisiert

Wie dastype-Attribut identifiziert dieses Attribut die verwendete Skriptsprache. Im Gegensatz zumtype-Attribut waren die möglichen Werte dieses Attributs jedoch nie standardisiert. Stattdessen sollte dastype-Attribut verwendet werden.

Anmerkungen

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

Das Skript sollte mit demtext/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/*) odertext/csv bereitgestellt wird. Wenn das Skript blockiert wird, wird einerror Ereignis an das Element gesendet; andernfalls wird einload 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 demasync-Attribut geladen werden, laden das Skript herunter, ohne die Seite zu blockieren, während das Skript abgerufen wird. Sobald der Download abgeschlossen ist, wird das Skript jedoch ausgeführt, was die Seite blockiert. Das bedeutet, dass der Rest des Inhalts auf der Webseite verhindert wird, bis das Skript fertig ausgeführt ist. 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 ausgeführt werden und nicht von anderen Skripten auf der Seite abhängen.

Skripte, die mit demdefer-Attribut geladen werden, laden in der Reihenfolge, in der sie auf der Seite erscheinen. Sie werden erst ausgeführt, wenn der komplette Seiteninhalt geladen wurde, 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 modifizieren).

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

Dieses Bild stammt aus derHTML-Spezifikation, kopiert und zugeschnitten auf eine reduzierte Version, unterCC BY 4.0 Lizenzbedingungen.

Wenn Sie zum Beispiel 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 könnte vor oder nachscript2.js undscript3.js geladen werden und wenn dies der Fall ist, werden alle Funktionen in diesen Skripten, die vonjquery abhängen, einen Fehler erzeugen, weiljquery zum Zeitpunkt der Ausführung des Skripts nicht definiert sein wird.

async sollte verwendet werden, wenn Sie eine Menge Hintergrundskripte laden müssen und Sie möchten einfach, dass sie so schnell wie möglich an Ort und Stelle gelangen. Vielleicht haben Sie zum Beispiel einige Spieldateien zu laden, die benötigt werden, wenn das Spiel tatsächlich beginnt, aber vorerst möchten Sie nur das Spielintro, die Titel und die Lobby anzeigen, ohne dass diese durch das Laden der Skripte blockiert werden.

Skripte, die mit demdefer-Attribut (siehe unten) geladen werden, laufen in der Reihenfolge, in der sie auf der Seite erscheinen und 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, dassjquery.js vorscript2.js undscript3.js geladen wird undscript2.js vorscript3.js geladen wird. Sie werden erst ausgeführt, nachdem der komplette 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 modifizieren).

Zusammenfassend:

• async unddefer weisen beide den Browser an, die Skripte in einem separaten Thread herunterzuladen, während der Rest der Seite (das DOM usw.) herunterlädt, sodass das Laden der Seite während des Abrufvorgangs nicht blockiert wird.
• Skripte mit einemasync-Attribut werden ausgeführt, sobald der Download abgeschlossen ist. Dies blockiert die Seite und garantiert keine spezifische Ausführungsreihenfolge.
• Skripte mit einemdefer-Attribut werden in der Reihenfolge geladen, in der sie sich befinden, und werden erst ausgeführt, wenn alles geladen ist.
• Wenn Ihre Skripte sofort ausgeführt werden sollen und keine Abhängigkeiten haben, sollten Sieasync verwenden.
• Wenn Ihre Skripte darauf warten müssen, dass das Parsen abgeschlossen ist und sie von anderen Skripten und/oder vom DOM abhängen, laden Sie sie mitdefer und ordnen Sie die entsprechenden<script>-Elemente in der Reihenfolge an, in der der Browser sie ausführen soll.

Modul-Fallback

Browser, die denmodule-Wert für dastype-Attribut unterstützen, ignorieren jedes Skript mit einemnomodule-Attribut. Dies ermöglicht es Ihnen, Modulscripte zu verwenden und gleichzeitignomodule-markierte Fallback-Skripte für nicht unterstützende Browser bereitzustellen.

<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 dietype=importmap-Funktion nicht verwenden, muss jedes Modul mit einem Modulspezifikator importiert werden, der entweder eine absolute oder relative URL ist. Im Beispiel unten ist der erste Modulspezifikator eine absolute URL, während der 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 sie übereinstimmt wird, den Text im Modulspezifikator ersetzen kann. Die Importkarte unten definiert die Schlüsselcircle undsquare, die als Aliasse 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>

Dies ermöglicht es uns, Module mit Namen in den Modulspezifikatoren zu 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 machen können, sehen Sie sich denImportieren von Modulen mit Importkarten Abschnitt im JavaScript-Module-Leitfaden an.

Daten in HTML einbetten

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 imtype-Attribut angeben.

<!-- Generated by the server --><script 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 abgerufen und ausgeführt ist

Sie können einrender-Token in dasblocking-Attribut einfügen; das Rendering der Seite wird blockiert, bis das Skript abgerufen und ausgeführt ist. Im folgenden Beispiel blockieren wir das Rendering bei einem asynchronen Skript, sodass das Skript nicht das Parsen blockiert, aber garantiert vor dem Start 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 Unterschiede zwischenasync unddefer erklären
• JavaScript-Module Leitfaden