'beforeunload' Chrome Issue

Question

I have this simple piece of code -

$(window).bind('beforeunload', function(){
    alert("Good Bye")
});

Works great with Firefox, IE8 but not in Chrome. Is it a known problem or is there any alternative for that ?

Actually what I am trying to do is to log details whenever user tries to close the browser.

function LogTime()
{
    jQuery.ajax({
      type: "POST",
      url: "log.php",
      data: "",
      cache: false,
      success: function(response)
      {
      }
    );
}

$(window).bind('beforeunload', function(){
    LogTime();
});

This works well in Firefox, but not in Chrome

Dialogs are blocked for `onbeforeunload` in Chrome because Chrome chose to do so. — Joseph, May 21 '12 at 06:46
The Google Chromium team highly recommends that you **not** use JavaScript dialogs (`alert()`, `confirm()`, and `prompt()`) since they state they harm users, so thats probably why they block it without first a user interaction: https://developers.google.com/web/updates/2017/03/dialogs-policy They recommend to use the Notification API: https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API — Jonathan Marzullo, Jan 30 '18 at 17:40
So why Gmail shows a warning dialog before quit site and HOW was it accomplished? — Adriano G. V. Esposito, Sep 02 '20 at 17:30
This is highly annoying, as I allow the user to upload files, and if they navigate away before the upload is complete, I wish to ask them if they would like to abort the upload. Google is becoming like Microsoft in that they make lots of assumptions on what they think your code will do, but can't cater for all scenarios and so force you to write hacks. — run_the_race, Oct 12 '21 at 10:34

score 17 · Answer 1 · answered May 21 '12 at 06:45

17

Return a string instead:

$(window).on('beforeunload', function(){
    return "Good bye";
});

answered May 21 '12 at 06:45

Sampson

265,109
74
539
565

I have edited my question, Please check if a solution is possible – skos May 21 '12 at 07:16
1

@Sachyn I know of no solution. I just tried a few attempts to send asynchronous data, but the traffic is blocked by Chrome. – Sampson May 21 '12 at 07:23
Right. Even I cant get this working in Chrome. Thanks for your efforts though. – skos May 21 '12 at 07:27
Because Chrome and Firefox requires some user action in order to notice the beforeunload. – Shiv Kumar Ganesh Jul 24 '18 at 09:52
Hello @Sampson, 10 years fast-forward, would you have a solution to recommend regarding the asynchronous data send? – jumping_monkey Jul 05 '22 at 09:50
1

@jumping_monkey Sounds like you might want https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API. Though be warned, some security-oriented browsers may block that API by default. – Sampson Oct 12 '22 at 13:29

score 7 · Answer 2 · edited Nov 28 '17 at 10:19

7

Try this for all Browsers:-

window.addEventListener("beforeunload", function (e) {

  var confirmationMessage = "\o/";     
  e.returnValue = confirmationMessage;           
  return confirmationMessage;       

});

edited Nov 28 '17 at 10:19

Liam

27,717
28
128
190

answered Nov 28 '17 at 10:00

Abhishek Salgaonkar

146
1
6

The message does not appear, but this seems to at least spawn the confirmation window, thanks – Matteo Nov 14 '19 at 08:50
4

This doesn't work in 2021. – MD SHAYON Oct 21 '21 at 09:49

score 6 · Answer 3 · answered May 21 '12 at 06:45

6

Try below:

$(window).on('beforeunload', function(){
  return "Good Bye";
});

answered May 21 '12 at 06:45

xdazz

158,678
38
247
274

2

i dont understand. where is the "Good Bye" used. – Abhi Nov 05 '16 at 08:30
1

As at 09/10/17 , Chrome Version 61.0.3163.100 (Official Build) (32-bit), it doesn't seem to be :/ – user1063287 Oct 09 '17 at 03:01

score 6 · Answer 4 · edited Sep 27 '12 at 15:38

6

I had to include it in a jQuery(document).ready to get it working in chrome

<script>
  jQuery(document).ready( 
    function () { 
      jQuery(window).bind('beforeunload',  
        function (e) {  

          [code here]

        } 
      );

    } 
  );
</script>

edited Sep 27 '12 at 15:38

khr055

28,690
16
36
48

answered Sep 27 '12 at 15:20

user1703776

61
1
1

Finally found the solution. Thanks for the solution – Mannya Feb 16 '21 at 06:22

score 2 · Answer 5 · answered Nov 13 '13 at 08:37

Try this:

function LogTime(){

jQuery.ajax({
  type: "POST",
  url: "log.php",
  data: "",
  cache: false,
  success: function(response){

  }
});

}

 $(window).bind('beforeunload', function(){
     LogTime();
     return "You're leaving?";
 });

It seems that as long as you return a string for this event at the end of function body, you can run code before that string.

score 1 · Answer 6 · answered Dec 17 '17 at 14:48

If you need to send some analytical data just before unloading the document, choose navigator.sendBeacon() method instead of XMLHttpRequest.

sendBeacon() method is designed to perform non-blocking sending of a small amount of data.

But check canIuse report first, since the method is not supported globally yet.

'beforeunload' Chrome Issue

6 Answers6

Linked