How to Detect Browser Window /Tab Close Event

Detect browser or tab closing

If I get you correctly, you want to know when a tab/window is effectively closed. Well, AFAIK the only way in JavaScript to detect that is to use either onunload or onbeforeunload events.

Unfortunately (or fortunately?), those events are also fired when you leave a site over a link or your browsers back button. So this is the best answer I can give, I don't think you can natively detect a pure close in JavaScript. Correct me if I'm wrong here.

Trying to detect browser close event

Have you tried this code?

window.onbeforeunload = function (event) {
    var message = 'Important: Please click on \'Save\' button to leave this page.';
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }
    return message;
};

$(function () {
    $("a").not('#lnkLogOut').click(function () {
        window.onbeforeunload = null;
    });
    $(".btn").click(function () {
        window.onbeforeunload = null;
});
});

The second function is optional to avoid prompting while clicking on #lnkLogOut and .btn elements.

One more thing, The custom Prompt will not work in Firefox (even in latest version also). For more details about it, please go to this thread.

How can I detect closing whole browser using javascript?

This is not an answer to the question in the title but solves the problem at hand (deleting a cookie on browser close) possibly in the most reliable way.

Use a session cookie!

They are deleted as the last browser window is closed. From MDN on document.cookie:

If neither expires nor max-age specified it will expire at the end of session.

Now what does "end of session" mean? This answer holds the... answer:

the cookie will then expire at the end of session (ie, when you close the browser)

There seem to have been some differences between browsers 5 years ago following this answer, however I am unsure about the current status of that. Depending on your usecase, this is still likely to suffice.

Detecting the browser closing through a JS event would be very unreliable due to conerns raised in @deceze's comment:

if you force-quit the browser or it crashes, the event won't fire either

Further than that, I don't think (although I don't have proof from any docs) that there is a respective DOM event for that to occur.

How to detect tab closing with javascript in 2021?

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.

---

Related Topics