Prevent user from accidentally navigating away

Question

My problem is a bit more complex than using the following simple JavaScript code

window.onbeforeunload = function (e) {      
  return 'Are You Sure?';
};

On an e-commerce web page I would like to remind the user that he has items in the shopping cart so that he can change his mind before

1. closing the browser tab/window
2. navigating to another domain

The JavaScript method above does not solve my problem because it is evoked even when the user navigates within the domain.

Short:

1. User tries to close window -> Show dialog
2. User changes www.mydomain.com/shoppingcart url to www.google.com in the browser's address bar -> Show dialog
3. User navigates to www.mydomain.com/checkout with the checkout button or presses the back button in the browser -> Do NOT show the dialog

Answer 1

Since the beforeUnload-event object does NOT contain the location the user is trying to go to, one "hack" to do this would be to add click listeners to all links on your site, and disable the unload-listener in that handler. It's not very pretty, and it will probably not work if the user navigates with the keyboard, but it's my best guess at the moment.

Answer 2

It sounds like you'd need to use an onbeforeunload and then modify all your internal links to disable it. Probably the thing to do for the latter would be a jQuery event; making the actual hrefs run through JS would be terrible, not least because it'd defeat search engine crawling.

Answer 3

It's not possible to tell if a user is pressing the back-button or closing the tab and you don't have access to their intended location.

It is possible to stop the dialog from showing if an internal link is clicked though:

(function(){

    function isExternal( href ) {
        return RegExp('https?:\\/\\/(?!' + window.location.hostname + ')').test(href);
    }

    var returnValue = 'Are you sure?';

    document.documentElement.onclick = function(e){
        var target = e ? e.target : window.event.srcElement;
        if (target.href && !isExternal(target.href)) {
            returnValue = undefined;
        }
    };

    window.onbeforeunload = function(){
        return returnValue;
    };

})();

Answer 4

Sorry there's no technical solution to your "problem."

It's not an accident when a user decides to leave your site, i.e. by typing a new URL, so stopping them to say "Hey, you haven't checked out yet" is kind of pointless.

Answer 5

I would suggest letting the visitor leave your website freely and simply remembering their information (DB, Sessions vars, etc). In terms of eCommerce that is the polite way of keeping customers.

If someone wants to leave your website, they will. Double-checking beforehand will likely only irritate the customer and lessen your chance of their return.

Answer 6

I was looking into this too, reason being we have some really stupid end users who fill out a whole web form then don't press the save button.

I found this is u r interested, seems like a good solution: http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm