Window: beforeunload-Ereignis

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandlereigenschaft.

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

Ein BeforeUnloadEvent. Erbt von Event.

Um den Dialog anzuzeigen, wenn der Benutzer den Tab schließt oder navigiert, sollte eine beforeunload-Ereignishandlerfunktion preventDefault() am Ereignisobjekt aufrufen. Beachten Sie, dass moderne Implementierungen:

• Sticky-Aktivierung erfordern, damit der Dialog angezeigt wird. Mit anderen Worten: Der Browser zeigt das Dialogfeld nur an, wenn der Frame oder ein eingebetteter Frame eine Benutzeraktion oder Benutzerinteraktion erhält. Wenn der Benutzer nie mit der Seite interagiert hat, gibt es keine zu speichernden Benutzerdaten und somit keinen legitimen Anwendungsfall für den Dialog.
• Nur eine generische, vom Browser angegebene Zeichenfolge im angezeigten Dialog zeigen. Dies kann nicht durch den Webseiten-Code gesteuert werden.

Das beforeunload-Ereignis weist einige Probleme auf:

• Es wird nicht zuverlässig ausgelöst, insbesondere auf mobilen Plattformen. Zum Beispiel wird das beforeunload-Ereignis in folgendem Szenario überhaupt nicht ausgelöst:

  1. Ein mobiler Benutzer besucht Ihre Seite.

  2. Der Benutzer wechselt dann zu einer anderen App.

  3. Später schließt der Benutzer den Browser über den App-Manager.

  Hinweis: Es wird empfohlen, das visibilitychange-Ereignis als zuverlässigeren Hinweis für das automatische Speichern des App-Zustands zu verwenden, um Probleme wie das oben genannte zu umgehen. Weitere Details finden Sie unter Don't lose user and app state, use Page Visibility.

• In Firefox ist beforeunload nicht mit dem back/forward cache (bfcache) kompatibel: Das heißt, Firefox speichert keine Seiten im bfcache, wenn sie beforeunload-Listener haben, und dies ist schlecht für die Leistung.

Es wird daher empfohlen, dass Entwickler nur dann auf beforeunload hören, wenn Benutzer nicht gespeicherte Änderungen haben, sodass der oben erwähnte Dialog verwendet werden kann, um auf drohenden Datenverlust hinzuweisen, und den Listener wieder entfernen, wenn er nicht benötigt wird. Das sparsame Lauschen auf beforeunload kann die Auswirkungen auf die Leistung minimieren.

Zusätzlich zur Window-Schnittstelle ist die Ereignishandlereigenschaft onbeforeunload auch auf den folgenden Zielen verfügbar:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Im folgenden Beispiel haben wir ein HTML-Text-<input>, um einige Daten darzustellen, die geändert und gespeichert werden könnten:

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

Unser JavaScript hängt einen input-Ereignislistener an das <input>-Element an, der auf Änderungen des eingegebenen Wertes hört. Wenn der Wert auf einen nicht leeren Wert aktualisiert wird, wird ein beforeunload-Ereignislistener an das Window-Objekt angehängt.

Wenn der Wert wieder eine leere Zeichenkette wird (d. h. der Wert gelöscht wird), wird der beforeunload-Ereignislistener wieder entfernt — wie oben in den Hinweisen zur Verwendung erwähnt, sollte der Listener entfernt werden, wenn es keine nicht gespeicherten Daten gibt, um darauf hinzuweisen.

Die beforeunload-Ereignishandlerfunktion ruft event.preventDefault() auf, um den Warnungsdialog auszulösen, wenn der Benutzer den Tab schließt oder navigiert. Wir haben auch event.returnValue = true in der Handlerfunktion aufgenommen, damit der Demo auch auf Browsern, die den event.preventDefault()-Mechanismus nicht unterstützen, korrekt ausgeführt wird.

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 <input>-Wert nicht leer ist und Sie versuchen, die Seite zu schließen, zu navigieren oder neu zu laden, zeigt der Browser den Warnungsdialog an. Probieren Sie es aus:

• BeforeUnloadEvent-Schnittstelle
• Verwandte Ereignisse:
  • DOMContentLoaded
  • readystatechange
  • load
  • unload
• Die Page Lifecycle API bietet eine nützlichere Anleitung zur Handhabung des Seitenlebenszyklus in Ihren Webanwendungen.