29

Obviously, window.onbeforeunload has encountered its fair share of problems with Chrome as I've seen from all the problems I've encountered. What's the most recent work around?

The only thing I've got even close to working is this:

window.onbeforeunload = function () { return "alert" };

However, if I substitute return "alert" with something like alert("blah"), I get nothing from Chrome.

I saw in this question that Google purposefully blocks this. Good for them... but what if I want to make an AJAX call when someone closes the window? In my case, I want to know when someone has left the chatroom on my website, signalled by the window closing.

I want to know if there's a way to either
(a): fix the window.onbeforeunload call so that I can put AJAX in there
or
(b): get some other way of determining that a window has closed in Chrome

Community
  • 1
  • 1
varatis
  • 14,494
  • 23
  • 71
  • 114

5 Answers5

15

Answer:

$(window).on('beforeunload', function() {
    var x =logout();
    return x;
});
function logout(){
        jQuery.ajax({
        });
        return 1+3;
}

A little mix and match, but it worked for me. The 1+3 makes sure that the logout function is being called (you'll see 4 if it's successful on the popup when you try to leave).

varatis
  • 14,494
  • 23
  • 71
  • 114
  • 2
    This does not work in chrome and it will also pop up an alert. Is there a way to ignore the alert in chrome? – angelokh Nov 01 '12 at 08:29
  • 4
    @varatis "4 --- Are you sure you want to leave this page?" is the confirm dialog I get. But the workaround I've found is to `return null`. – K3---rnc Dec 06 '12 at 04:40
  • 3
    Hii,This code is not working for me. Do i need to add some jQuery js file or something else ? – Vishu Singhvi Jan 24 '14 at 13:53
  • Well, you do need to have jQuery. What's the problem you're getting? – varatis Jan 24 '14 at 16:52
  • Why not just return 4 instead of 1+3? – Lior Jun 26 '14 at 15:20
  • 2
    @Lior It's just an example.. it doesn't matter at all. – varatis Jun 26 '14 at 16:12
  • 3
    This does not work, it doesn't output the custom message. – elvismdev Jun 25 '16 at 03:50
  • Does setTimeout() work in the logout method. It's not working for anything more than 1 Sec. – Nayeem May 10 '18 at 12:25
  • 2
    For anyone that turns up here, custom message are deprecated by most browsers, reason being that they were abused by some sites, confusing users. So now the message is a generic string which is not controllable by the web page itself. regardless of what string you return. Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) for more detailed information and specific browser behaviours – OJay Jun 19 '18 at 04:05
10

As of Chrome 114.0.5735.198 and Edge 100.0.1185.29, Chromium has not met the standard. There is a bug report filed, but the review is abandoned.

Test with StackBlitz!

  • Chrome requires returnValue to be a non-null value whether set as the return value from the handler or by reference on the event object.
  • The standard states that prompting can be controlled by canceling the event or setting the return value to a non-null value.
  • The standard states that authors should use Event.preventDefault() instead of returnValue.
  • The standard states that the message shown to the user is not customizable.

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';
Trevor Karjanis
  • 1,485
  • 14
  • 25
4

Here's a more straightforward approach.

$(window).on('beforeunload', function() {
    return "You should keep this page open.";
});

The returned message can be anything you want, including the empty string if you have nothing to add to the message that Chrome already shows. The result looks like this:

enter image description here

Keith
  • 20,636
  • 11
  • 84
  • 125
  • 6
    I tried the same thing and it does not work. The alert shows up correctly but without my custom message. – c4k Jun 17 '16 at 01:45
  • 3
    @c4k i think something in the latest chrome update broke this. In my case, the returned custom message was working a week ago but after a chrome patch got installed it no longer does. – Chronozoa Jun 17 '16 at 18:12
  • 5
    @Chronozoa, you are correct: https://www.chromestatus.com/feature/5349061406228480 – Bobort Dec 01 '16 at 19:32
3

According to MDN,

The function should assign a string value to the returnValue property of the Event object and return the same string.

This is the following

window.addEventListener( 'beforeunload', function(ev) { 
    return ev.returnValue = 'My reason';
})
kisp
  • 6,402
  • 3
  • 21
  • 19
  • This is kind of the right idea, but you forgot to add the 'beforeunload' event to the listener. – zenw0lf Feb 10 '17 at 15:44
  • Thanks very much! This worked on Chrome 63; returning the string without assigning `returnValue` was not enough. – cxw Dec 18 '17 at 16:06
  • doesn't seem to entirely work for me on Chrome version " 64.0.3282.186 (Official Build) (64-bit)" or Firefox 58.0.2 (64-bit) - asks for confirm but not with custom message. I tried the example from the page cited directly and got the same results. –  Feb 23 '18 at 17:45
  • @BeepBop custom messages are prevented for security reason – Giulio Caccin May 19 '23 at 13:04
3

This solved my problem why it wasn't working in my app:

Note that the user must interact with the page somehow (clicking somewhere) before closing its window, otherwise beforeunload is ignored in order not prevent abuse.

Nate Babbel
  • 69
  • 3