How can I detect when the user is leaving my site, not just going to a different page?

Question

I have a handler for onbeforeunload

window.onbeforeunload = unloadMess;
function unloadMess(){
  var conf = confirm(\"Wait! Before you go, please share your          


        

Answer 1

If you are having issues because your website may have both absolute and relative local links, I have another solution (using jQuery):

Demo

/* EXTERNAL LINK WARNING
=========================================*/
$('a').on('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href'),
        host = location.host;       
    if (url.indexOf(host) > -1 || url.indexOf('http','https') == -1){
        /* If we find the host name within the URL,
               OR if we do not find http or https, 
               meaning it is a relative internal link
            */
        window.location.href = url;
    } else {
        var warn = confirm('You\'re leaving the domain.\n\nAre you sure?');
        if(warn == true) {
            window.location.href = url,'_blank';
        } else {
            e.preventDefault;
        }
    }
});

Answer 2

There is a good solution to this which I implemented in my website recently. Just imagine this, everything thats going to be in your website that navigates the user is either going to be a link (anchor tag), button, clickable image or something on these lines. Its definitely not going to be the body element.

Now what happens when a user leaves the website, he/she can either type in a url and press enter, click a bookmark or press the back/forward buttons.

When a user does do that, do this:

$(window).on('beforeunload', function(e)){
    if(e.target.activeElement.nodeName.toLowerCase() == 'body'){
       yourFunction();
});

What happens is that the body becomes the active element in the target in these cases (when user leaves the website) and this is not the case when the user clicks on internal website navigable elements.

This is a clean, easy solution. Let me know if you face any issues.

Answer 3

I've got one idea, but I don't know if it's work. My suggestion is, add each link an onClick event with a function call. That function reads just the href attribute and store into a variable with global scope.

var clickedHrefAttrValue = "";
function getClickUrl(currentLink)
{
   clickedHrefAttrValue = $(currentLink).attr("href");
   return true;
}

The html for the a tags must be looks like following:

<a href="<url>" onClick="getClickUrl(this)">Linktext</a>

and in your given function:

function getClickUrl()
{
   if (clickedHrefAttrValue.indexOf("<your condition>" > -1)
   {
     //what ever you want do to
   }
}

It is just an idea, but I think it is worth to try it.

Answer 4

So I needed to do this so I could log a user out if they left the site from any page, but not if they navigate within the site. Here is my solution using JS and PHP

On every page where they need to remain logged in, set a session variable:

<?php
    session_start();
    $_SESSION["isInSession"] = true;
?>

Now create two scripts:

clear-in-session.php

<?php
    session_start();
    unset($_SESSION["isInSession"]);
?>

logout.php

<?php
    session_start();
    if(isset($_SESSION["isInSession"]) exit();
    //do logout code here
?>

Now we set 2 events in JS:

window.addEventListener('beforeunload', function(event) {
    $.ajax({
        type: 'POST',
        async: false,
        url: 'clear-in-session.php'
    });
});
window.addEventListener('unload', function(event) {
    $.ajax({
        type: 'POST',
        async: false,
        url: 'logout.php'
    });
});

To explain the order of events when the user navigates to another page in the same site:

1. The user navigates away
2. beforeunload is triggered, calling clear-in-session.php which removes the isInSession variable
3. The new page is loaded, setting isInSession to true
4. unload is triggered, calling logout.php, but because isInSession has been set back to true, the logout code is never called

When the user navigates to a page outside of the site (or to any page on the site that doesn't set isInSession):

1. The user navigates away
2. beforeunload is triggered, calling clear-in-session.php which removes the isInSession variable
3. The new page is loaded
4. unload is triggered, calling logout.php, isInSession has been deleted, so the logout code is called

Sorry for necro but this thread still comes up when searching for the answer to this question

Note: This answer uses jQuery for post calls to the php. It is entirely possible to do this in pure JS, but it was easier to illustrate in jQuery

Answer 5

It's not possible to do this 100% reliably, but if you detect when the user has clicked on a link on your page, you could use that as a mostly-correct signal. Something like this:

window.localLinkClicked = false;

$("a").live("click", function() {
    var url = $(this).attr("href");

    // check if the link is relative or to your domain
    if (! /^https?:\/\/./.test(url) || /https?:\/\/yourdomain\.com/.test(url)) {
        window.localLinkClicked = true;
    }
});

window.onbeforeunload = function() {
    if (window.localLinkClicked) {
        // do stuff
    } else {
        // don't
    }
}