The onbeforeunload
property of the WindowEventHandlers
mixin is the EventHandler
for processing beforeunload
events. These events fire when a window is about to unload
its resources. At this point, the document is still visible and the event is still cancelable.
Note: To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload
event handlers unless the page has been interacted with. Moreover, some don't display them at all.
Note: You shouldn't use the beforeunload
event with sendBeacon()
. See the Navigator.sendBeacon()
page for more details and best practices.
Syntax
window.addEventListener("beforeunload", function(event) { ... }); window.onbeforeunload = function(event) { ... };
Typically, it is better to use window.addEventListener()
and the beforeunload
event, instead of onbeforeunload
.
Example
This example prompts the user before unloading.
The HTML specification states that authors should use the Event.preventDefault()
method instead of using Event.returnValue
to prompt the user.
window.addEventListener('beforeunload', function (e) { // Cancel the event e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown // Chrome requires returnValue to be set e.returnValue = ''; });
Guarantee the browser unload by removing the returnValue property of the event
window.addEventListener('beforeunload', function (e) { // the absence of a returnValue property on the event will guarantee the browser unload happens delete e['returnValue']; });
Notes
When your page uses JavaScript to render content, the JavaScript may stop when leaving and then navigating back to the page. You can bind to window.onbeforeunload
to prevent the browser from fully caching the page. If you do so, JavaScript in the page will be triggered on the subsequent return visit and update the content as desired.
Specifications
The event was originally introduced by Microsoft in Internet Explorer 4 and standardized in the HTML5 specification.
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of 'onbeforeunload' in that specification. | Living Standard | |
HTML 5.1The definition of 'GlobalEventHandlers' in that specification. | Recommendation | |
HTML5The definition of 'GlobalEventHandlers' in that specification. | Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onbeforeunload
|
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 |
Legend
- Full support
- Full support
- No support
- No support
- 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.
The HTML specification states that authors should use the Event.preventDefault()
method instead of using Event.returnValue
to prompt the user. However, this is not yet supported by all browsers.
When this event returns (or sets the returnValue
property to) a value other than null
or undefined
, the user will be prompted to confirm the page unload. In older browsers, the return value of the event is displayed in this dialog. Starting with Firefox 44, Chrome 51, Opera 38, and Safari 9.1, a generic string not under the control of the webpage will be shown instead of the returned string. For example:
- 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).
- Chrome displays the string, "Do you want to leave this site? Changes you made may not be saved." (see Chrome Platform Status).
Internet Explorer does not respect the null
return value and will display this to users as "null" text. You have to use undefined
to skip the prompt.
In some browsers, calls to window.alert()
, window.confirm()
, and window.prompt()
may be ignored during this event. See the HTML specification for more details.
Note also, that various browsers ignore the result of the event and do not ask the user for confirmation at all. In such cases, the document will always be unloaded automatically. Firefox has a switch named dom.disable_beforeunload
in about:config to enable this behaviour. As of Chrome 60, the confirmation will be skipped if the user has not performed a gesture in the frame or page since it was loaded. Pressing F5 in the page seems to count as user interaction, whereas mouse-clicking the refresh arrow or pressing F5 with Chrome DevTools focused does not count as user interaction (as of Chrome 81).
WindowEventHandlers.onbeforeunload by Mozilla Contributors is licensed under CC-BY-SA 2.5.