How can I detect browser tab refresh or close using javascript

Question

I have one problem, I have a javascript function which I want to use when the browser is closed, How can I detect that a browser is being closed?

I have made some research on that I got solution like onunload or beforeunload but both the functions are being executed when I am reloading the page, Is there any solution that I can differentiate reload and browser/tab close.

perhaps if you explain what your function will do when the browser is closed then someone could provide a better alternative solution? — David 'the bald ginger', Feb 08 '13 at 07:23
actually I have a javascript function which is called when a user click on logout action which delets some row from the database after the user log out, I want to call the same function when the user close the browser too — Rohitashv Singhal, Feb 08 '13 at 07:26
What data in this row would you want to delete from the database if a user logs our? Usually one simply adds a record or amends an existing one to track user activity on a site. — David 'the bald ginger', Feb 08 '13 at 08:01
That seems counterproductive. By deleting user activity you will not have the ability to track that activity later on. Usually one simple adds and/or updates existing rows in a database. I would suggest re-looking at how you want to maintain your data before building a hack which would lead to garbage in your data. — David 'the bald ginger', Feb 08 '13 at 08:12

score 4 · Answer 1 · answered Feb 08 '13 at 06:45

4

No, you can't know that, the HTML page isn't the "owner" of the browser, you have only limited access to information, and this info isn't inside it.

You can know when the user leaves your page, but you can't know why, as it's none of your business...

answered Feb 08 '13 at 06:45

gdoron

147,333
58
291
367

then How can I load some function when the browser tab is closed ? – Rohitashv Singhal Feb 08 '13 at 06:47
@lord_linus, load what? the browser tab is closed... ?! – gdoron Feb 08 '13 at 06:48
I have a function to delete some row from the database (I am using this into a javascript function using ajax) which I want to execute when either the user log out or he close the browser – Rohitashv Singhal Feb 08 '13 at 06:49
1

@lord_linus you need to ping the browser every X time, if lets say 2X times the server didn't get the ping, do what you want. I don't see other options. it's ugly and expensive btw, again no other options. – gdoron Feb 08 '13 at 06:56
ping ?? how can I do this using js or html ? – Rohitashv Singhal Feb 08 '13 at 07:03
1

It's not a tutorials site here, try searching by your own, and if you can't make it, ask a new question. – gdoron Feb 08 '13 at 07:06

score 2 · Answer 2 · answered Feb 08 '13 at 07:21

gdoron is correct in that you cannot determine why/how the user is 'leaving the page'. On the extremes you can perhaps determine on mousedown events if the browser's CLOSE button was clicked and let that fire of an alert. But this would probably require tracking the X and Y of the mousedown event and that isn't a very nice way of doing things. And i do not think you would be able to accurately determine if a tab is closed.

score 1 · Accepted Answer · answered Aug 16 '13 at 15:27

answer is,

</head>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">

var validNavigation = false;

function endSession() {
// Browser or broswer tab is closed
// Do sth here ...
alert("bye");
}

function wireUpEvents() {
/*
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*/
window.onbeforeunload = function() {
  if (!validNavigation) {
     endSession();
  }
 }

// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
  validNavigation = true;
}
});

// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});

 // Attach the event submit for all forms in the page
 $("form").bind("submit", function() {
 validNavigation = true;
 });

 // Attach the event click for all inputs in the page
 $("input[type=submit]").bind("click", function() {
 validNavigation = true;
 });

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();  
}); 
</script>    
</head>
<body>
<h1>Eureka!</h1>
  <a href="http://www.google.com">Google</a>
  <a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>

What if user refresh the browser tab by clicking on refresh icon? — Vardan, Jun 24 '14 at 13:06
Doesn't actually solve the original question because it won't differentiate between close and reload window, although a valiant effort. — macguru2000, Oct 13 '14 at 18:02

How can I detect browser tab refresh or close using javascript

3 Answers3

Linked

Related