beforeunload

The beforeunload event is fired when the window, the document and its resources are about to be unloaded.

When a string is assigned to the returnValue Event property, a dialog box appears, asking the users for confirmation to leave the page (see example below). When no value is provided, the event is processed silently.

Bubbles	No
Cancelable	Yes
Target objects	defaultView
Interface	Event

Properties

Property	Type	Description
target Read only	EventTarget	The event target (the topmost target in the DOM tree).
type Read only	DOMString	The type of event.
bubbles Read only	Boolean	Does the event normally bubble?
cancelable Read only	Boolean	Is it possible to cancel the event?
returnValue	DOMString	The current return value of the event (the message to show the user).

Examples

window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\o/";
});

// is equivalent to
window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
});

WebKit-based browsers don't follow the spec for the dialog box. An almost cross-browser working example would be close to the following:

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

Notes

When this event returns a non-void value, the user is prompted to confirm the page unload. In most browsers, the return value of the event is displayed in this dialog. In Firefox 4 and later the returned string is not displayed to the user. Instead, Firefox displays the string "This page is asking you to confirm that you want to leave - data you have entered may not be saved." See bug 588292.

Since 25 May 2011, the HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML5 specification for more details.

Note also that various mobile browsers ignore the result of the event (that is, they do not ask the user for confirmation). Firefox has a hidden preference in about:config to do the same. In essence this means the user always confirms that the document may be unloaded.

Note that using this event handler in your page prevents Firefox from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.

Specifications

Specification	Status	Comment
WHATWG HTML Living Standard The definition of 'beforeunload' in that specification.	Living Standard
HTML5 The definition of 'beforeunload' in that specification.	Recommendation	Initial definition

See also

• DOMContentLoaded
• readystatechange
• load
• unload
• Unloading Documents — Prompt to unload a document
• Remove Custom Messages in onbeforeload Dialogs after Chrome 51