The beforeunload
event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.
Bubbles | No |
---|---|
Cancelable | Yes |
Interface | Event |
Event handler property | onbeforeunload |
This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page. If the user confirms, the browser navigates to the new page, otherwise it cancels the navigation.
According to the specification, to show the confirmation dialog an event handler should call preventDefault()
on the event.
However note that not all browsers support this method, and some instead require the event handler to implement one of two legacy methods:
- assigning a string to the event's
returnValue
property - returning a string from the event handler.
Some browsers used to display the returned string in the confirmation dialog, enabling the event handler to display a custom message to the user. However, this is deprecated and no longer supported in most browsers.
To combat unwanted pop-ups, browsers may not display prompts created in beforeunload
event handlers unless the page has been interacted with, or may even not display them at all.
Attaching an event handler/listener to window
or document
's beforeunload
event prevents browsers from using in-memory page navigation caches, like Firefox's Back-Forward cache or WebKit's Page Cache.
The HTML specification states that calls to window.alert()
, window.confirm()
, and window.prompt()
methods may be ignored during this event. See the HTML specification for more details.
Examples
The HTML specification states that authors should use the Event.preventDefault()
method instead of using Event.returnValue
. However, this is not supported by all browsers.
window.addEventListener('beforeunload', (event) => { // Cancel the event as stated by the standard. event.preventDefault(); // Chrome requires returnValue to be set. event.returnValue = ''; });
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'beforeunload' in that specification. |
Living Standard | |
HTML5 The definition of 'beforeunload' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
beforeunload event | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 12 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Custom text support | Chrome No support ? — 51 | Edge No support No | Firefox No support ? — 44 | IE Full support Yes | Opera No support ? — 38 | Safari No support ? — 9 | WebView Android No support ? — 51 | Chrome Android No support ? — 51 | Firefox Android No support ? — 44 | Opera Android No support ? — 41 | Safari iOS No support No | Samsung Internet Android No support ? — 5.0 |
Activation using event.returnValue = "string"; | Chrome Full support 30 | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera ? | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
Activation using event.preventDefault() | Chrome No support No | Edge No support 12 — 79 | Firefox Full support Yes | IE Full support 9 | Opera No support No | Safari Full support 11 | WebView Android No support No | Chrome Android No support No | Firefox Android Full support Yes | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Activation using return "string"; | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support 12 | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
See WindowEventHandlers/onbeforeunload for more details on how various browsers handle this event.