The onbeforeunload
property of the WindowEventHandlers
mixin is the event handler 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.
window.addEventListener("beforeunload", function(event) { ... }); window.onbeforeunload = function(event) { ... };
Typically, it is better to use window.addEventListener()
and the beforeunload
event, instead of onbeforeunload
.
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']; });
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.
Specification |
---|
HTML Standard (HTML) # handler-window-onbeforeunload |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
onbeforeunload |
1 |
12 |
1 |
4 |
12 |
3 |
1 |
18 |
4 |
12 |
1 |
1.0 |
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:
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 behavior. 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).
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload