Window: beforeunload Ereignis

Syntax

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

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

onbeforeunload = (event) => { }

Ereignistyp

Ein BeforeUnloadEvent. Erbt von Event.

Verwendungshinweise

Um den Dialog anzuzeigen, wenn der Benutzer den Tab schließt oder navigiert, sollte eine beforeunload Ereignis-Handler-Funktion preventDefault() auf dem Ereignisobjekt aufrufen. Sie sollten beachten, dass moderne Implementierungen:

• sticky activation für das Anzeigen des Dialogs erfordern. Das bedeutet, dass der Browser das Dialogfeld nur dann anzeigt, wenn der Frame oder ein eingebetteter Frame eine Benutzeraktion oder Benutzerinteraktion erhält. Wenn der Benutzer niemals mit der Seite interagiert hat, gibt es keine Benutzerdaten zu speichern, daher keinen legitimen Anwendungsfall für den Dialog.
• Nur einen generischen, vom Browser spezifizierten String im angezeigten Dialog anzeigen. Dies kann nicht durch Webseiten-Code gesteuert werden.

Das beforeunload Ereignis hat einige Probleme:

• 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 ein zuverlässigeres Signal für das automatische Speichern des App-Zustands zu verwenden, das Probleme wie die oben genannten umgeht. Weitere Details finden Sie unter Don't lose user and app state, use Page Visibility.

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

Es wird daher empfohlen, dass Entwickler beforeunload nur dann überwachen, wenn Benutzer ungespeicherte Änderungen haben, sodass der oben erwähnte Dialog verwendet werden kann, um sie über drohenden Datenverlust zu warnen, und den Listener wieder entfernen, wenn er nicht benötigt wird. Das sparsame Überwachen von beforeunload kann den Einfluss auf die Leistung minimieren.

Ereignishandler-Aliasse

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

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Beispiele

Im folgenden Beispiel haben wir ein HTML-Text-<input>, 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 fügt einen input Ereignis-Listener zum <input> Element hinzu, der auf Änderungen im eingegebenen Wert hört. Wenn der Wert auf einen nicht-leeren Wert aktualisiert wird, wird ein beforeunload Ereignis-Listener zum Window Objekt hinzugefügt.

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

Die beforeunload Ereignis-Handler-Funktion 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 Handler-Funktion 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 beim Versuch, die Seite zu schließen, zu navigieren oder zu aktualisieren, den Warnungsdialog an. Probieren Sie es aus:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• BeforeUnloadEvent Interface
• Verwandte Ereignisse:
  • DOMContentLoaded
  • readystatechange
  • load
  • unload
• Page Lifecycle API bietet nützlichere Leitlinien zum Umgang mit dem Seitenlebenszyklusverhalten in Ihren Web-Apps.