Best way to detect when a user leaves a web page?

Best way to detect when a user leaves a web page?

What is the best way to detect if a user leaves a web page?
The onunload JavaScript event doesn’t work every time (the HTTP request takes longer than the time required to terminate the browser).
Creating one will probably be blocked by current browsers.

Solutions/Answers:

Solution 1:

Try the onbeforeunload event: It is fired just before the page is unloaded. It also allows you to ask back if the user really wants to leave. See the demo onbeforeunload Demo.

Alternatively, you can send out an Ajax request when he leaves.

Solution 2:

Mozilla Developer Network has a nice description and example of onbeforeunload.

If you want to warn the user before leaving the page if your page is dirty (i.e. if user has entered some data):

window.addEventListener('beforeunload', function(e) {
  var myPageIsDirty = ...; //you implement this logic...
  if(myPageIsDirty) {
    //following two lines will cause the browser to ask the user if they
    //want to leave. The text of this dialog is controlled by the browser.
    e.preventDefault(); //per the standard
    e.returnValue = ''; //required for Chrome
  }
  //else: user is allowed to leave without a warning dialog
});

Solution 3:

For this I am using:

window.onbeforeunload = function (e) {

}

It is fired just before the page is unloaded.

Related:  I am getting this error “No module: ngResource”

Solution 4:

Here’s an alternative solution – since in most browsers the navigation controls (the nav bar, tabs, etc.) are located above the page content area, you can detect the mouse pointer leaving the page via the top and display a “before you leave” dialog. It’s completely unobtrusive and it allows you to interact with the user before they actually perform the action to leave.

$(document).bind("mouseleave", function(e) {
    if (e.pageY - $(window).scrollTop() <= 1) {    
        $('#BeforeYouLeaveDiv').show();
    }
});

The downside is that of course it’s a guess that the user actually intends to leave, but in the vast majority of cases it’s correct.

Solution 5:

I know this question has been answered, but in case you only want something to trigger when the actual BROWSER is closed, and not just when a pageload occurs, you can use this code:

window.onbeforeunload = function (e) {
        if ((window.event.clientY < 0)) {
            //window.localStorage.clear();
            //alert("Y coords: " + window.event.clientY)
        }
};

In my example, I am clearing local storage and alerting the user with the mouses y coords, only when the browser is closed, this will be ignored on all page loads from within the program.

Related:  Fast stable sorting algorithm implementation in javascript

Solution 6:

One (slightly hacky) way to do it is replace and links that lead away from your site with an AJAX call to the server-side, indicating the user is leaving, then use that same javascript block to take the user to the external site they’ve requested.

Of course this won’t work if the user simply closes the browser window or types in a new URL.

To get around that, you’d potentially need to use Javascript’s setTimeout() on the page, making an AJAX call every few seconds (depending on how quickly you want to know if the user has left).