Window: beforeunload-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("beforeunload", (event) => { })

Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onbeforeunload = (event) => { }

Ereignistyp

Ein BeforeUnloadEvent. Es erbt von Event.

Hinweise zur Verwendung

Damit der Dialog angezeigt wird, wenn Benutzer den Tab schließen oder von ihm weg navigieren, sollte eine beforeunload-Event-Handler-Funktion preventDefault() auf dem Ereignisobjekt aufrufen. Beachten Sie, dass aktuelle Implementierungen:

• eine sticky activation voraussetzen, damit der Dialog angezeigt wird. Anders gesagt: Der Browser zeigt den Dialog nur an, wenn im Frame oder in einem eingebetteten Frame eine Benutzergeste oder -interaktion stattgefunden hat. Wenn Benutzer noch nie mit der Seite interagiert haben, gibt es keine Benutzerdaten zu speichern und damit keinen berechtigten Anwendungsfall für den Dialog.
• im angezeigten Dialog nur einen allgemeinen, vom Browser vorgegebenen Text anzeigen. Dieser kann nicht durch den Code der Webseite beeinflusst werden.

Das beforeunload-Ereignis wird nicht zuverlässig ausgelöst, insbesondere auf mobilen Plattformen. Im folgenden Szenario wird das Ereignis beispielsweise nicht ausgelöst:

1. Ein mobiler Benutzer besucht Ihre Seite.
2. Der Benutzer wechselt anschließend zu einer anderen App.
3. Später schließt der Benutzer den Browser über den App-Manager.

Wir empfehlen, nur dann auf beforeunload zu lauschen, wenn Benutzer nicht gespeicherte Änderungen haben. So kann der Bestätigungsdialog vor einem drohenden Datenverlust warnen. Entfernen Sie den Listener, sobald er nicht mehr benötigt wird.

Event-Handler-Aliasse

Neben der Schnittstelle Window ist die Event-Handler-Eigenschaft onbeforeunload auch für die folgenden Ziele verfügbar:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Beispiele

Im folgenden Beispiel verwenden wir ein HTML-Textfeld vom Typ <input>, um Daten darzustellen, die geändert werden können und dann gespeichert werden müssen:

<input type="text" name="name" id="name" />

Unser JavaScript fügt dem <input>-Element einen Event-Listener für input hinzu, der auf Änderungen des eingegebenen Werts reagiert. Wenn der Wert auf einen nicht leeren Wert geändert wird, wird dem Window-Objekt ein Event-Listener für beforeunload hinzugefügt.

Wird der Wert wieder zu einer leeren Zeichenfolge (d.h. der Inhalt wird gelöscht), wird der Event-Listener für beforeunload wieder entfernt. Wie oben unter Hinweise zur Verwendung erwähnt, sollte der Listener entfernt werden, wenn keine nicht gespeicherten Daten vorhanden sind, vor deren Verlust gewarnt werden muss.

Die Event-Handler-Funktion für beforeunload ruft event.preventDefault() auf, um den Warndialog auszulösen, wenn Benutzer den Tab schließen oder von ihm weg navigieren. Wir haben außerdem event.returnValue = true in die Handler-Funktion aufgenommen, damit die Demo auch in Browsern korrekt funktioniert, die den Mechanismus mit event.preventDefault() nicht unterstützen.

const beforeUnloadHandler = (event) => {
  // Recommended
  event.preventDefault();

  // Included for legacy support, e.g. Chrome/Edge < 119
  event.returnValue = true;
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    window.addEventListener("beforeunload", beforeUnloadHandler);
  } else {
    window.removeEventListener("beforeunload", beforeUnloadHandler);
  }
});

Wenn der Wert des <input>-Elements nicht leer ist, zeigt der Browser einen Warndialog an, sobald Sie versuchen, die Seite zu schließen, zu einer anderen Seite zu navigieren oder die Seite neu zu laden. Probieren Sie es aus:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Schnittstelle BeforeUnloadEvent
• Verwandte Ereignisse:
  • DOMContentLoaded
  • readystatechange
  • load
  • unload
• Die Page Lifecycle API bietet weitere hilfreiche Hinweise zum Umgang mit dem Lebenszyklus von Seiten in Ihren Web-Apps.