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 stories or experiences on the message forum.");
    if(conf){
    window.location.href = "http://www.domain.com/message-forum";
    }
}

but I'm not sure how to know if the url they clicked on the page is within the site.

I just want them to alert them if they will leave the site.

Answer 1

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
    }
}

Answer 2

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.