Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 226
Gabriel Avatar asked Apr 08 '13 15:04

Gabriel


People also ask

What does Window Onbeforeunload do?

The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point. This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page.

What is the difference between Onbeforeunload and Onunload?

onunload is responsible for executing an instruction when the page is closed. It also causes issue with IE and AJAX. I know Opera used to not acknowledge onbeforeunload - not sure if they've fixed that, but I always register the listener for both to be safe: window.

Is it possible to display a custom message in the Beforeunload popup?

7 Answers. Show activity on this post. A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this.

How do I cancel Onbeforeunload?

Cancelable: The beforeunload event can be canceled by user interaction: // by https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Example window. addEventListener("beforeunload", function(event) { event. preventDefault(); // Cancel the event as stated by the standard.


1 Answers

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

like image 159
Ian Avatar answered Nov 14 '22 22:11

Ian