7

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!

Gabriel
  • 2,720
  • 4
  • 28
  • 36
  • duplicate: http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own – hereandnow78 Apr 08 '13 at 15:33
  • Please read my question correctly. I'm not asking on how to do a "leave page confirmation" but how to do some action according to the result of the "leave page confirmation"... – Gabriel Apr 08 '13 at 15:36
  • your question is somewhat answered in that thread. what you want to do is not possible, because of security reasons... – hereandnow78 Apr 08 '13 at 15:43
  • 2
    Just execute whatever you want to do in the `unload` event. It will only be fired if the `beforeunload` event doesn't stop the page from leaving (the user clicking that "Leave Page" button) – Ian Apr 08 '13 at 15:44

2 Answers2

15

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 :)

Ian
  • 50,146
  • 13
  • 101
  • 111
0
window.addEventListener('beforeunload', this.handleUnload);
window.addEventListener("unload", function(event) {
    //calling ajax or do something here
});

handleUnload (e) {
     var message = "your custom message here";
     (e || window.event).returnValue = message; //Gecko + IE
    return message;
}
Praveen Patel
  • 199
  • 1
  • 8
  • 1
    You can't call ajax request on unload event anymore. Only Beacon Request (request without waiting for response) – Michalis Jul 15 '21 at 09:50