Find browser close/refresh using javascript/jquery

Question

Could someone explain if there is a way to differentiate between browser close and refresh events using javascript/jquery.
Basically, I need to log-out the user if he is closes the tab.

I tried using jQuery .unload(). But that is firing for Refresh and Form Submit. I tried assigning a global variable and avoided .unload() during Form Submit. But how this can be avoided for Refresh, or if there is any other work-around to achieve this..
I wonder if the same can be done only if the window is closed(instead of tab).

you might have to try and find out who is aksing the window to close. if source is button submit then dont log out..?! or some logic to log straight back in if the page relaods?? But the best thing is to keep some sort of httpSession — Piotr Kula, May 13 '11 at 16:29
This might be better implemented with cookies: refresh will keep the cookie, close will end the session. Then use the cookie var to determine what you want to do. — kei, May 13 '11 at 16:29
you can detect the users F5 button, that about it, but use serverside to pass to js referer url, and see if it was your domain or not — Val, May 13 '11 at 16:30
Hope this helps http://www.codingforums.com/archive/index.php/t-76592.html mate — Val, May 13 '11 at 16:35
@Val: Thanks for the link. The logic uses the onbeforeunload event which is same as .unload() and it boils down to the same problem. It was a parent thread to this problem. :) And yes we can catch F5 but not the refresh button click. A solution which addresses both would be helpful — Raghav, May 13 '11 at 16:56
@ppumkin and kei : will the thread/process for the tab be killed instantly? my concern is before you set the cookie that he logged out, if the process/thread is killed, it might not work. I dint try that, if some one is aware this, please explain, if not let me give a try and learn. — Raghav, May 13 '11 at 16:58
ok this is your last resource, on db, put a last_loggedin, then when a users leaves a page, if he is not back within lets say 10 seconds, on you login function consider him/her as a logged out pers, set cookie time to 0, so it expires when its closed the window,don't worry about tabs much, otherwise check out natwest.com as they have that system I dont know how they have done it but worth checking it out :) — Val, May 14 '11 at 11:27

score 2 · Answer 1 · answered May 13 '11 at 16:30

2

You could try using an instance cookie, ie one that is delete once the browser is closed, you could then check for the cookies existence from JavaScript. otherwise I don't think there is a way to tell the difference your looking for with just javascript.

answered May 13 '11 at 16:30

Robert Beuligmann

1,434
10
13

I don't think I follow. How will cookies help to log someone out on page close? If the cookie is set when they unload the page obviously you can check if it's there when they reload but if they've closed the browser/tab then there's no JS to tell the system to logout? Am I missing something? – Dormouse May 13 '11 at 16:35
one doubt on this, will the thread/process for the tab be killed instantly? my concern is before you set the cookie that he logged out, if the process/thread is killed, it might not work. – Raghav May 13 '11 at 16:50
1

The idea is to set the original login cookie with no expiration. That cookie (which authenticates the user) will be destroyed when they close the tab, causing them to no longer be logged in when they view the page again. – Paul Rosania May 13 '11 at 17:27

score 2 · Answer 2 · answered May 13 '11 at 16:37

Unfortunately, JavaScript only provides onunload, which will fire whenever the user navigates away from, closes or reloads the current page.

Robert is correct, this is a good situation for session cookie: if you create a cookie without specifying an Expiration, it will expire when the tab/window is closed by the user.

score 1 · Accepted Answer · edited May 23 '17 at 12:31

You might not be able to do that other than some cookie based methods like non persistent cookies which is a work around. Second, it is not that easy to differentiate a page refresh, form based page redirect unload, or browser close. Its difficult to identify as far as I know.

you can do some small things before the customer closes the tab. javascript detect browser close tab/close browser but if your list of actions are big and the tab closes before it is finished you are helpless. You can try it but with my experience donot depend on it.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  /* Do you small action code here */
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM/Mozilla_event_reference/beforeunload

score 0 · Answer 4 · answered May 13 '11 at 16:37

Sadly, the implementation of onunload or onbeforeunload isn't that great between browsers and in cases of a crash the unload event will never be fired. You're best bet is to not worry about catching the unload events and just have sensible session expiration times.

If you didn't have to worry about distinguish between form submits and refreshes you could could get pretty good coverage with onunload, but it still wouldn't be 100%.

Find browser close/refresh using javascript/jquery

4 Answers4