Fenster: beforeunload-Ereignis

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 die Registerkarte schließt oder navigiert, sollte eine beforeunload-Ereignishandlerfunktion preventDefault() auf dem Ereignisobjekt aufrufen. Beachten Sie, dass moderne Implementierungen:

• Sticky activation für die Anzeige des Dialogs erfordern. Mit anderen Worten, der Browser zeigt das Dialogfeld nur dann an, wenn das Frame oder ein eingebettetes Frame eine Benutzeraktion oder Benutzerinteraktion empfängt. 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 in dem angezeigten Dialog zeigen. Dies kann nicht von der Webseite gesteuert werden.

Das beforeunload-Ereignis hat einige Probleme:

• Es wird nicht 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 aus dem App-Manager.

  Hinweis: Es wird empfohlen, das visibilitychange-Ereignis als ein zuverlässigeres Signal für die automatische Speicherung des Anwendungszustands zu verwenden, um Probleme wie das oben genannte zu umgehen. Siehe Verlieren Sie nicht den Benutzer- und Anwendungszustand, verwenden Sie die Seiten-Sichtbarkeit für mehr Details.

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

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

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

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

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

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

Unser JavaScript bindet einen input-Ereignislistener an das <input>-Element, das auf Änderungen im eingegebenen Wert 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 ein leerer String wird (d.h. der Wert gelöscht wird), wird der beforeunload-Ereignislistener wieder entfernt – wie oben unter Nutzungshinweise erwähnt, sollte der Listener entfernt werden, wenn keine nicht gespeicherten Daten vorhanden sind, vor denen gewarnt werden muss.

Die beforeunload-Ereignishandlerfunktion ruft event.preventDefault() auf, um den Warnhinweis-Dialog auszulösen, wenn der Benutzer die Registerkarte 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, das Demo trotzdem 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 Warnhinweis-Dialog 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
• Page Lifecycle API bietet nützlichere Hinweise zum Umgang mit dem Seitenlebenszyklusverhalten in Ihren Webanwendungen.