-2

The most popular question for this has many answers, but sadly I can't find one that works properly. Most responses are from 10 years ago, some don't even work:

Detect browser or tab closing

There are also many variations of the same bit of code (for example, some add "e.returnValue='';" to the code, while many others don't.

What is the best way to do this detection? Is it beforeunload still? How would the code look like in 2021 to cover modern browsers/behaviors?

(To avoid an XY problem, I want to show a confirmation popup if the user tries to close the page. The popup is easy, the detection is not.)

Tank
  • 1
  • 3
  • 1
    Does this answer your question? [Detect browser or tab closing](https://stackoverflow.com/questions/3888902/detect-browser-or-tab-closing) – mmdts Jul 31 '21 at 01:51

1 Answers1

0

This is a duplicate. Answers on the other question specify onunload and beforeunload events, both of which have very good browser compatibility (onunload and beforeunload).

I tried this solution (randomly picked) in my browser console and it just worked out of the box:

window.addEventListener("beforeunload", function (e) {
 var confirmationMessage = "tab close";

 (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
 sendkeylog(confirmationMessage);
 return confirmationMessage;                                //Webkit, Safari, Chrome etc.
});

Also, 3~4 of the answers to that question are after 2018! How can they be old?!

I'll eventually edit the answer to include details on how that specific page does it.

Edit: I checked the page, the only check that was made was this:

$(window).unbind().bind('beforeunload', function(){
  return 'You are about to disconnect from this chat, are you sure you want to leave?';
});

This code is verbatim, and is bad. As mentioned by @charlietfl, bind() and unbind() are deprecated methods. From the documentation:

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

So please use on() instead.

mmdts
  • 757
  • 6
  • 16
  • 1
    `bind()` and `unbind()` are deprecated methods – charlietfl Jul 31 '21 at 01:54
  • I'm not sure how to separate behavior based on whether the client accepts the prompt and leaves, or cancels and stays, based on your code. If(confirmationMessage)? – Tank Jul 31 '21 at 01:59
  • 1
    And fyi, custom text for prompts is disabled in all major browsers to avoid scams. – Tank Jul 31 '21 at 02:04
  • 1
    Moreover, you're apparently using legacy code: Mozilla specifies you should use "preventDefault()" instead of returnValue property. https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event – Tank Jul 31 '21 at 02:08
  • Yes, there's no way to figure out if the user decides to stay or leave. Some people recommend using the `focus` event, and others recommend firing a timeout, but neither is really reliable. Again, the code is copied from the other solution / from the website as-is, it has bad practices but changing it = lying about what they wrote. This should be closed as duplicate of the question referenced by OP. – mmdts Jul 31 '21 at 02:12
  • 1
    “*This is a duplicate.*” True - you should flag it as such (and optionally leave a comment) instead of answering, in the interest of not fragmenting the pertinent information and decreasing overall content quality. – esqew Jul 31 '21 at 02:37