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.
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.
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.
Related Topics
How to Access the Matched Groups in a JavaScript Regular Expression
What Is the 'New' Keyword in JavaScript
What Characters Are Valid For JavaScript Variable Names
Jquery: Return Data After Ajax Call Success
How to Access React Instance (This) Inside Event Handler
Do You Recommend Using Semicolons After Every Statement in JavaScript
Why Does Changing an Array in JavaScript Affect Copies of the Array
Large Numbers Erroneously Rounded in JavaScript
JavaScript Open in a New Window, Not Tab
How to Disable Right Click on My Web Page
When Should I Use a Return Statement in Es6 Arrow Functions
Why Is Extending Native Objects a Bad Practice
JavaScript Function Scoping and Hoisting
Client on Node.Js: Uncaught Referenceerror: Require Is Not Defined
Facebook Js Sdk'S Fb.API('/Me') Method Doesn't Return the Fields I Expect in Graph API V2.4+
Location of Parenthesis For Auto-Executing Anonymous JavaScript Functions
How to Loop Through a Plain JavaScript Object With the Objects as Members