Window: beforeunload Event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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. Sie sollten beachten, dass moderne Implementierungen:

• Sticky Activation erfordern, damit der Dialog angezeigt wird. Mit anderen Worten, der Browser zeigt das Dialogfeld nur an, wenn das Frame oder ein eingebettetes Frame eine Benutzerinteraktion erhält. Wenn der Benutzer nie mit der Seite interagiert hat, gibt es keine Benutzerdaten zu speichern, also keinen legitimen Anwendungsfall für den Dialog.
• Nur einen generischen, vom Browser festgelegten String im angezeigten Dialog zeigen. Dies kann nicht durch den Code der Webseite gesteuert werden.

Das beforeunload-Ereignis hat einige Probleme:

• Es wird nicht immer zuverlässig ausgelöst, besonders 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 Indikator für das automatische Speichern des Anwendungszustands zu verwenden, um Probleme wie das obige 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 wird keine Seiten im bfcache einfügen, wenn sie beforeunload-Listener haben, was schlecht für die Leistung ist.

Es wird daher empfohlen, dass Entwickler nur dann auf beforeunload lauschen, wenn Benutzer ungespeicherte Änderungen haben, damit der oben erwähnte Dialog verwendet werden kann, um sie vor drohendem Datenverlust zu warnen, und den Listener wieder entfernen, wenn er nicht benötigt wird. Auf beforeunload sparsam zu lauschen, kann die Auswirkungen auf die Leistung minimieren.

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

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Im folgenden Beispiel haben wir ein HTML-Text-<input>, das einige Daten darstellen könnte, die geändert und gespeichert werden müssen:

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

Unser JavaScript fügt einen input-Ereignislistener zum <input>-Element hinzu, der auf Änderungen des eingegebenen Wertes lauscht. Wenn der Wert auf einen nicht-leeren Wert geändert wird, wird ein beforeunload-Ereignislistener am Window-Objekt angefügt.

Wenn der Wert wieder zu einem leeren String wird (d.h. der Wert gelöscht wird), wird der beforeunload-Ereignislistener wieder entfernt — wie oben in den Verwendungshinweisen erwähnt, sollte der Listener entfernt werden, wenn keine ungespeicherten Daten vorhanden sind, vor denen gewarnt werden muss.

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 die Handlerfunktion aufgenommen, damit alle Browser, die den event.preventDefault()-Mechanismus nicht unterstützen, die Demo dennoch korrekt ausführen.

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

• BeforeUnloadEvent-Schnittstelle
• Verwandte Ereignisse:
  • DOMContentLoaded
  • readystatechange
  • load
  • unload
• Die Page Lifecycle API bietet nützlichere Anleitungen zum Umgang mit dem Seitenlebenszyklus in Ihren Webanwendungen.