Search code examples
javascriptjqueryonbeforeunload

Is it possible to capture the user's answer when using onbeforeunload confirmation?


I need to warn users that they will lose information when leaving a page. This is easily done using the onbeforeunload event. My problem is that I want to take some action if the user decides to leave.

Here's an example (I'm using jquery because it's loaded anyway):

$(window).on('beforeunload', function(e){
    return "Do you really want to leave?";
});

What I would like to do is something like this (this code doesn't work, I know, it's just an example to illustrate what I'm trying to do):

$(window).on('beforeunload', function(e){
    // Ask for user confirmation
    var bUserAnswer = confirm("Do you really want to leave?");

    if(bUserAnswer)
    {
        // Do something...
    }
    else
    {
        // Do something else...
    }
    // Close everything if the user decides to leave...
    return bUserAnswer;
});

I have no idea if what I'm trying to do here is even possible... Googling around didn't give me any indication one way or the other so I'm turning to my favorite group of experts!

Any idea how I could do it?

Thanks!


Solution

  • When leaving the page, the events beforeunload and unload execute, in that order. Of course, if the beforeunload event doesn't complete, the unload event won't.

    The way the beforeunload event doesn't complete is when the user clicks the "Stay on Page" button instead of "Leave Page" (if that dialog is presented to them, like in your code).

    So if you know that the possibility for them to not leave the page will always be presented to them, the only way for the unload event to execute is if the beforeunload event isn't prevented (by the user).

    Therefore, you should be able to put any code that you want to execute when the user actually chooses to leave the page in the unload event.

    As for knowing if the user decided to stay on the page, I'm not sure how to catch it :)