We Keep Coding

Best way to detect browser window changes like go back, url change, reload, close event

So I am working on a testing application and I need to call a finsihTheTest() function (i.e. this function finishes the test by saving answers, time and other information) whenever following conditions occur:
User tries to reload page.
User tries to go back from the page.
User tries to close the tab.
User tries to close the browser window.
User goes to another url.
If anything happens that closes the page like laptop/PC shutdown, internet lost or anything else.
What I exactly want to do is, if once a user starts the test and by any mean he attempts to leave I want to save his state. Which is being done by the function finishTheTest().
I got a clue but it didn't work:
function UnLoadWindow() {
return 'We strongly recommends NOT closing this window yet.'
}
window.onbeforeunload = UnLoadWindow;

To get the full results for your cases there's many things you should now on how browsers react on many scenarios.
To understand more please read this section :
Especially on mobile, the unload event is not reliably fired. For example, the unload event is not fired at all in the following scenario:
A mobile user visits your page.
The user then switches to a different app.
Later, the user closes the browser from the app manager.
Also, the unload event is not compatible with the back/forward cache (bfcache), because many pages using this event assume that the page will not continue to exist after the event is fired. To combat this, some browsers (such as Firefox) will not place pages in the bfcache if they have unload listeners, and this is bad for performance. Others, such as Chrome, will not fire the unload when a user navigates away.
If you're specifically trying to detect page unload events, it's best to listen for the pagehide event.
window.addEventListener('pagehide', function(event) {
document.cookie = "saveData=test"
},false)
This way you can save your user current data and reload it on next page window load event

find tab close , browser close and back event for mozilla firefox in MVC3 framework

Please help me to find event for mozilla firefox. I want to show alert message and remove session from server side when I close browser by click cross button , when close tab and when click back button.
I find event such as "onbeforeunload". But there is problem like this event also run when I refresh page also.

window.onbeforeunload
How to detect the window(new tab) close event?
Hope this helps.

You might not be able to do that other than some cookie based methods which is development work arounds like non persistent cookies. You might not know correctly any time whether it is a back button, next page redirect, form based redirect action, or browser close. Even the implementation might not direct.
you can do some small things before the customer closes the tab. javascript detect browser close tab/close browser but if your list of actions are big and the tab closes before it is finished you are helpless. You can try it but with my experience donot depend on it. Yes, you cannot at this time differentiate back and refresh and close.
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
/* Do you small action code here */
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM/Mozilla_event_reference/beforeunload

How do I attach a Javascript event to the mobile Safari back button?

I need to show a confirm dialog box when the user clicks the back button in mobile Safari. I have a long application, and I want to alert users that their application has not been filled out/completed before they leave the page. I have everything set up for when the user clicks a link and tries to leave the page, but I can not for the life of me figure out how to attach an event to the browser's back button. onbeforeunload does not work in iOS. Any tips would be much appreciated.
NOTE: I realize alert boxes are the spawn of satan, but that's what I was told to do.

You can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache (user navigates back with back button) it is set to true.
window.onpageshow = function(event) {
if (event.persisted) {
alert("From back / forward cache.");
}
};
For some reason jQuery does not have this property in the event. You can find it from original event though.
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
alert("From back / forward cache.");
}
};

In desktop browsers like Chrome you can intercept the leaving of a page and show a message.
And you can't do anything, except for showing the message. The browser is doing the rest, for obvious reasons.
Dunno if this also works on iOS.
window.onbeforeunload = function () {
return 'do you really wanna do that?'
}
http://jsfiddle.net/JAAZ5/

Control over the back button has never been allowed in any browser. I suspect mobile Safari is no different.

Difference between onbeforeunload and onunload

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.

What user actions trigger beforeunload in which browsers?

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.