I want to make sure the user gets a warning when closing the window on some occasions (unsaved data, for example). Works well.
BUT: I also need to do some clean up work BEFORE the window closes but AFTER I asked whether the user really wants to close it.
So I have two callback functions, one for onbeforeunload that will throw the confirmation dialog, and one for onunload that should do the cleanup.
Unfortunately, in Safari, the onunload callback does not seem to be called.
Why?
$(window).on('beforeunload',function() {
if (connected)
return "Are you sure you want to close the window!";
});
$(window).on('unload',function() {
localStorage.removeItem("someItem"); // never executed in Safari
});
Unfortunately, this event is not supported in some of the browsers. You can try using pagehide event instead of onunload.
Good Luck!
Related
I would like to display a confirm box and warn the user, before he leaves the page, especially during an HTTP request. To this end, I added an event listener to the window object within my react component.
componentWillMount() {
window.addEventListener('beforeunload', this.handleBeforeUnload);
}
componentWillUnmount() {
window.addEventListener('beforeunload', this.handleBeforeUnload);
}
handleBeforeUnload(e) {
e.returnValue = 'You sure you want to leave?';
}
This snippet works and makes our life easier but there's one thing that piqued my curiosity.
I see the confirm box, only if I click onto the page after loading.
It does not display the browsers native confirm box, although it triggers the handleBeforeUnload method.
Could someone explain, why window.onbeforeunload works only if I focus into the page?
This is an intentional limitation. From MDN:
Note: 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.
See: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
window.onunload = function()
{
confirm("close the window?")
}
Why don't I have the confirm window coming out when closing a window?
Presumably it is to prevent pages from repeatedly preventing you from closing a page. With the beforeunload event, you can, however, get what is, in most modern browsers, a non-customizable or only partly customizable dialog prompting the user whether to leave or not.
Many browsers not support window.unload.
Please view this link.
window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?
Most browsers prevent the use of alert/confirm in onunload.
Instead use an onbeforeunload handler that returns a string:
window.onbeforeunload = function() {
return "Don't go!";
};
This will then be presented to the user in a dialogue box.
See also: window.unload() won't work in jQuery
What are the differences between onbeforeunload and onunload ?
Also I have a specific question related to it's use on the iPad...I have a page (myPage.html) where I am trying to show an alert when the page is closed (i.e. X is pressed to close the tab on iPad)
Now I tried using both window.onunload and window.onbeforeunload
Below are my findings on the iPad;
Using window.onunload , I am able to get an alert when user navigates to a different page from myPage.html (either by clicking on some link or doing a Google search while on myPage.html) . However nothing happens when the tab is closed from the minimized view (X)
Using window.onbeforeunload, I neither get an alert even if the user navigates to a different page from myPage.html OR if he closes the tab (X) from the minimized view.
I wanted to know if there is any alternate way to fix this issue ?
Thank you.
onunload is responsible for executing an instruction when the page is closed. It also causes issue with IE and AJAX.
onbeforeunload is more efficient because it does not run in competition with the actual closing of the window and is triggered before onunload
I know Opera used to not acknowledge onbeforeunload - not sure if they've fixed that, but I always register the listener for both to be safe:
window.onunload = window.onbeforeunload = (function(){...
Adding with AlienWebguy's ans, to avoid dual calls at the browsers that support both events,
var onBeforeUnLoadEvent = false;
window.onunload = window.onbeforeunload= function(){
if(!onBeforeUnLoadEvent){
onBeforeUnLoadEvent = true;
//your code here
}
};
onbeforeunload:
Called before unloading begins
MDN tells me you can cancel the closing of the page using event.preventDefault();
or by returning a non-void value (ie a value != 0), the page will pop up a confirmation dialog that allows the user to choose to cancel the close
MDN also says Opera 12 and up support onbeforeunload - looks like its supported it for a while now
onunload:
Called after unloading has begun, but before any resource deallocation (its not clear to me what exactly is done during this period)
Its too late to cancel the page close at this point
The only reason I can think of why you would want to use onunload over onbeforeunload would be where your onunload code could take some significant time, and don't want the user to see a window that hangs while closing.
One significant difference (other than cancelability) between the onbeforeunload and onunload is that the former is triggered for download links and the latter is not. Example: download will trigger the onbeforeunload handler, but not the onunload.
closing window
refreshing page
clicking on a link
??
It seems to be inconsistent. (I'm shocked!) Is there a list somewhere? I'm particularly interested in Firefox, but am curious about others, as well. The Mozilla docs are vague:
window.onbeforeunload
An event that fires before the unload event when the page is unloaded.
window.onunload
The unload event is raised when the document is unloaded.
Gee, thanks.
window.onbeforeunload will trigger before you navigate to away from current page (from URL address, BACK button, close browser, etc.)
The event will not fire in Opera. But all the other browsers seem to respect it OK.
I have used this in the past for AJAX-intensive sites, mostly as a way to avoid having to support the BACK button.
It also works well as a confirmation dialog to prevent you from accidentally losing your work. But users might get annoyed by the confirmation. So this might not be a good enough reason to use it.
I want to post an message to the server when user navigate off from the current page, I am using .unload right now but the result is unreliable, even in its document is said true:
The exact handling of the unload event
has varied from version to version of
browsers. For example, some versions
of Firefox trigger the event when a
link is followed, but not when the
window is closed. In practical usage,
behavior should be tested on all
supported browsers, and contrasted
with the proprietary beforeunload
event.
Should I use beforeunload event? Is it reliable?
Yes, beforeunload is more reliable, but be sure to assign it directly (not bound through jQuery), like this:
window.onbeforeunload = function() { /* do stuff */ };
The unload event itself wasn't meant for work to be done, only cleanup of objects...as garbage collectors get better and better, there's less reason for the browser to even fire the unload event.
Also be aware that for your specific case you'd have to make a synchronous request to the server...otherwise the browser still won't wait for the AJAX call to complete.