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() auf dem Ereignisobjekt aufrufen. Sie sollten beachten, dass moderne Implementierungen:

• Eine sticky activation erfordern, damit der Dialog angezeigt wird. Das bedeutet, der Browser zeigt das Dialogfeld nur an, wenn das Fenster oder ein eingebettetes Fenster eine Benutzergeste oder 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 eine vom Browser vorgegebene Zeichenfolge im angezeigten Dialog zeigen. Dies kann nicht durch den Code der Webseite gesteuert werden.

Das beforeunload-Ereignis weist einige Probleme auf:

• Es wird nicht zuverlässig ausgelöst, insbesondere auf mobilen Plattformen. Beispielsweise 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 das automatische Speichern des Anwendungszustands zu verwenden, das Probleme wie das oben genannte umgeht. 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 Seiten nicht im bfcache, wenn sie beforeunload-Listener haben, was schlecht für die Leistung ist.

Es wird daher empfohlen, dass Entwickler nur dann auf beforeunload hören, wenn Benutzer ungespeicherte Änderungen haben, damit der oben genannte Dialog verwendet werden kann, um sie vor drohendem Datenverlust zu warnen. Der Listener sollte wieder entfernt werden, wenn er nicht benötigt wird. Ein sparsames Abhören von beforeunload kann die Auswirkungen auf die Leistung minimieren.

Zusätzlich zur Window-Schnittstelle ist die Ereignis-Handler-Eigenschaft onbeforeunload auch bei den folgenden Zielen verfügbar:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

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

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

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

Wenn der Wert wieder ein leerer String wird (d.h. der Wert wird gelöscht), wird der beforeunload-Ereignislistener wieder entfernt – wie oben in den Nutzungshinweisen 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 Warnhinweis-Dialog auszulösen, wenn der Benutzer den Tab schließt oder navigiert. Wir haben auch event.returnValue = true in die Handlerfunktion aufgenommen, sodass 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 und Sie versuchen, die Seite zu schließen, zu navigieren oder neu zu laden, zeigt der Browser den Warnhinweis-Dialog an. 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.