Start · Sprachen · JavaScript · Referenz · Window.alert()

Window.alert()

Methode

<code>window.alert()</code> zeigt einen modalen Dialog mit einer optionalen Nachricht und einem OK-Button an und blockiert das Skript, bis der Nutzer ihn schließt.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

window.alert(message)

Beschreibung

window.alert() weist den Browser an, einen einfachen, modalen Hinweisdialog mit einer optionalen Textnachricht und einer einzigen Schaltfläche („OK“) anzuzeigen. Solange der Dialog offen ist, ist die Ausführung von JavaScript im aktuellen Kontext angehalten. Der Aufruf ist synchron und kehrt erst zurück, wenn der Nutzer den Dialog schließt.

Da alert eine Methode des globalen window-Objekts ist, reicht meist der Kurzaufruf alert("…"). Der übergebene Wert wird in einen String umgewandelt. Objekte erscheinen deshalb als [object Object], außer man serialisiert sie vorher, etwa mit JSON.stringify().

Gut geeignet ist alert() für schnelle Prototypen, Lernbeispiele und einfache Debug-Ausgaben. In produktiven Anwendungen sollte man darauf verzichten: Der Dialog lässt sich nicht gestalten, blockiert die ganze Seite und unterbricht den Nutzer. Besser sind eigene Hinweise im Seiteninhalt oder das HTML-Element <dialog>.

Unter bestimmten Umständen zeigt der Browser den Dialog nicht an oder wartet nicht auf den Nutzer. Das passiert zum Beispiel in Hintergrund-Tabs, wenn der Nutzer weitere Dialoge unterdrückt hat, oder in Iframes ohne die Sandbox-Berechtigung allow-modals.

Parameter

Name Typ Default Beschreibung
$message string | any "" Text, der im Dialog angezeigt wird. Andere Werte werden in einen String umgewandelt. Zeilenumbrüche mit \n sind möglich, HTML wird nicht ausgewertet.

Rückgabewert

Typ
void
Beschreibung
Kein Rückgabewert (undefined). Die Methode kehrt erst zurück, wenn der Dialog geschlossen wurde.

Beispiele

Einfacher Hinweis

// Kurzform ohne window.
alert("Willkommen auf programmierung.net!");
console.log("Dialog wurde geschlossen");
Dialog wurde geschlossen

Formularvalidierung mit mehrzeiliger Meldung

const form = document.querySelector("#anmeldung");

form.addEventListener("submit", (event) => {
  const fehler = [];
  if (!form.elements.email.value.includes("@")) fehler.push("- E-Mail ist ungültig");
  if (form.elements.passwort.value.length < 8) fehler.push("- Passwort zu kurz (min. 8 Zeichen)");

  if (fehler.length > 0) {
    event.preventDefault();
    window.alert(`Bitte korrigieren:\n${fehler.join("\n")}`);
  }
});

Objekte lesbar ausgeben

const nutzer = { name: "Anna", rolle: "Admin" };

alert(nutzer);                          // zeigt: [object Object]
alert(JSON.stringify(nutzer, null, 2)); // zeigt formatiertes JSON

Blockierendes Verhalten sichtbar machen

const start = performance.now();
alert("Klicke auf OK, wenn du bereit bist.");
const dauer = Math.round(performance.now() - start);
console.log(`Dialog war ${dauer} ms geöffnet`);
Dialog war 2345 ms geöffnet

// Wichtig · Fallstricke

  • Blockierend: Solange der Dialog offen ist, laufen im aktuellen Tab keine Timer, Event-Handler oder Animationen weiter. Für Debugging ist console.log() meist die bessere Wahl.
  • Keine Gestaltung: Aussehen, Titel und Schaltfläche legt der Browser fest. Für eigene Dialoge eignet sich <dialog> mit showModal().
  • Unterdrückung: Browser können wiederholte Dialoge blockieren („Weitere Dialoge verhindern“). In Iframes mit sandbox ohne allow-modals wird der Aufruf ignoriert. Chrome blockiert alert() außerdem in ursprungsfremden (cross-origin) Iframes.
  • Keine Unterstützung in Workern und Node.js: In Web Workern und Service Workern gibt es alert nicht, ebenso wenig in Node.js. Deno stellt dagegen eine Konsolen-Variante bereit.
  • Sicherheit: Die Nachricht wird als reiner Text dargestellt, HTML wird nicht ausgewertet. Trotzdem ist alert(1) ein klassischer Nachweis für XSS-Lücken. Browser kennzeichnen den Ursprung im Dialog, damit Seiten keine Systemmeldungen vortäuschen können.
  • Barrierefreiheit und Nutzerführung: Häufige Unterbrechungen stören. Nicht-blockierende Hinweise im Seiteninhalt (z. B. mit role="alert") sind meist nutzerfreundlicher.