Javascript: How to check if the user changes domain?

Question

I know I can use onunload to do something when the user exits the page, the problem is that it works whether the user leaves the page, reloads, closes the page, etc.

I need to run a script only when the user leaves my page to another domain, ex:

if the user is in www.exemple.com/here and goes to www.exemple.com/there nothing should happen, but if he goes from www.exemple.com/here to www.anotherdomain.com/ then the script should run.

What´s the best way to do that?

As for why I need that, here is the story:

I work with googleTagManager and I need to fire a tag at the end of a session. The session only ends when the user closes the window or when he leaves the site domain. If he reloads or if the stays within the site, the tag should not fire.

Hook in to all the applicable the links/forms on the page, set a global when they are clicked/submitted and examine it in onunload. — Alex K., Oct 20 '14 at 13:37

fero · Answer 1 · 2014-10-20T13:44:38.043

3

I needed something like this myself. I solved it by running a special function after the page loaded completely. This function attached a click event handler to all <a> elements that checked where the link pointed to and set a flag depending on the link target. This flag was checked in my onunload function so I could decide whether to show a warning or not.

But this was a very special implementation. This won't work for manual page changes (user enters URL) or javascript location changes.

Unfortunately I don't have the source code anymore, but it might look like this (using jQuery):

var leaving = false;

$(function() {
    $('a').click(function() {
        leaving = !$(this).attr('href').match(/regex/);
    });
});

$(window).bind('beforeunload', function () {
    return leaving ? 'Really want to leave the page?' : null;
});

(not tested!)

Edit: As Alex K. suggests in the comments, you may also hook forms, and not only links.

edited Oct 20 '14 at 13:44

answered Oct 20 '14 at 13:39

fero

6,050
1
33
56

I guess it would work with manual url change too hence +1 for this answer – Mihir Oct 20 '14 at 14:01
1

Also one thing to notice here that the message shown in beforeunload event hanler won't be displayed in firefox – Mihir Oct 20 '14 at 14:05
@Mihir Well, that's correct - unfortunately. At least Firefox shows a message that you might lose data and you can perform some clean-up tasks in the event handler. – fero Oct 20 '14 at 14:10

score 0 · Answer 2 · answered Oct 20 '14 at 13:44

It seems not possible to get the next URL external to your domain, you can check for changes in the fragment identifier parameters ex; yourpage.html#sectiona or yourpage.html#sectionb using event onhashchange on window. Try the following script. Please note this JS will work on modern browser IE8 >.

  <!DOCTYPE html>
    <html>
    <head>
    <script>
    window.start = function(){
        var url = "http://www.yoursite.com";
        if ("onhashchange" in window) {
        alert("The browser supports the hashchange event!");
        }

        function locationHashChanged() {
        if (location.hash != url) {
            alert('change url');
        }
        }

        window.onhashchange = locationHashChanged;
        }
    </script>

    </head>
    <body onload="window.start();">
    </body>
    </html>

Javascript: How to check if the user changes domain?

2 Answers2