Javascript Confirmation Box on Exit

Question

Hi there,

I got strange problem with setting up a confirmation box on user exit.

Here's the code:

    function closeIt() {
    var message = "Click 'Cancel' right now!";

    evt=(typeof evt == 'undefined') ? window.event:evt;
    evt ? evt.returnValue = message:null;
    return message;
    }   
    window.onbeforeunload = closeIt;

What functionality I'd like to implement? When user clicks Cancel, I'd like to redirect page.

I trie milions of ideas, non of them was working. Any ideas?

Edit This is what I'd like to have: Users tries to close his browser tab, I'd like to display small confirmation box, if he clicks OK -> then close the tab, if he clicks Cancel -> do not close the tab and redirect user to save page.

I tried milions of methods, faced hunderds of problems.

Answer 1

Works for me usign confirm. I sincerely didn't understand how you tried to solve it, given no confirm is issued.

window.onbeforeunload = function(){
  return confirm("Click 'Cancel' right now!");
}

Answer 2

I'm working with the same type of problem (with Dojo v1.3) (see http://jsfiddle.net/ZPxtj/19/).

It looks like:

---

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

Is working well.

Answer 3

So... how to get user action then?

You actually can't, directly. The browser takes charge of showing the confirmation, and either continuing the navigation if OK, or doing nothing if Cancel. You don't get to find out whether the user clicked OK until you get the final unload, by which point it's too late.

One strategy is to guess that, if the user is still around on the page a short while after the beforeunload, they probably clicked Cancel:

var redirecting= false;
window.onbeforeunload = function() {
    if (redirecting) return;
    setTimeout(function() {
        setTimeout(function() {
            redirecting= true;
            location.href= 'http://www.example.com/';
        }, 2000);
    }, 0);
    return 'Boo hoo, please stay with me';
};

(The redirecting flag is to stop our own navigation also causing a beforeunload warning; the double-timeout is to ensure that the timeout occurs one second after the confirmation box is closed, rather than a second after it has opened.)

Unfortunately this is still highly unreliable, as it will perform the redirect even if the user clicked OK, but the page to which they're navigating is taking more than two seconds to start loading.

Another way would be to always return nothing from beforeunload prompt, and then set up your own explicit confirm() on a 0-timeout. But this is unreliable cross-browser, as understandably browsers don't really want to let pages do potentially obnoxious stuff like this. It kind of works on IE and almost works on Firefox, as long as you break the back/forward cache (as this hides the page before the confirm can happen).

In summary there's not really a good solution. What's the use case for redirecting the user? Perhaps you could try replacing the content of the current page rather than doing a redirect?

Answer 4

Have you tried starting a timer event in the onbeforeUnload event handler? They usually don't fire as long as there is a modal dialog on the screen like the confirm. (This could be platform dependent!)

The timer may get killed automatically when the user presses OK. If not, you need to stop it in onunload.

If your timer does go off, you redirect the page in the timer event handler.

Answer 5

is this what you want?

<script type="text/javascript">
window.onbeforeunload = function (evt) {
var message = 'Are you sure you want to leave?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
window.location = "http://www.google.com/";
}
return message;
}
</script>

you can simply replace google.com with your url. i used google.com for testing :)
Cheers !