jQuery & Javascript – Capture the Browser or Tab Closed Event

February 22, 2011 ykyuen 297 Comments

I was working on a WordPress project which i need to clear the PHP session when the browser or browser tab is closed. Although Javascript provides the window.onbeforeunload event but it will be triggered even whenever you leave the website. Finally i got a simple solution from Daniel Melo in StackOverflow. The following code required jQuery and i have included the Google one in the HTML.

In your web root, create the js/check_browser_close.js.

/**
 * This javascript file checks for the brower/browser tab action.
 * It is based on the file menstioned by Daniel Melo.
 * Reference: http://stackoverflow.com/questions/1921941/close-kill-the-session-when-the-browser-or-tab-is-closed
 */
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();  
});

Also create the following .html in your web root to test the above Javascript file.

<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" src="js/check_browser_close.js"></script>
  </head>
  <body>
    <h1>Eureka!</h1>
      <a href="http://www.google.com">Google</a>
      <a href="http://www.yahoo.com">Yahoo</a>
      <a href="https://ykyuen.wordpress.com">Eureka!</a>
  </body>
</html>

A alert box will be shown when you closed the browser or the browser tab.

Done =)

Reference:

Update @ 2012-02-19: In Chrome, window.onbeforeunload is required to return a string. Please try the following check_browser_close.js.

/**
 * This javascript file checks for the brower/browser tab action.
 * It is based on the file menstioned by Daniel Melo.
 * Reference: http://stackoverflow.com/questions/1921941/close-kill-the-session-when-the-browser-or-tab-is-closed
 */
var validNavigation = false;

function wireUpEvents() {
  /**
   * For a list of events that triggers onbeforeunload on IE
   * check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
   *
   * onbeforeunload for IE and chrome
   * check http://stackoverflow.com/questions/1802930/setting-onbeforeunload-on-body-element-in-chrome-and-ie-using-jquery
   */
  var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave without confirmation
  var leave_message = 'You sure you want to leave?'
  function goodbye(e) {
    if (!validNavigation) {
      if (dont_confirm_leave!==1) {
        if(!e) e = window.event;
        //e.cancelBubble is supported by IE - this will kill the bubbling process.
        e.cancelBubble = true;
        e.returnValue = leave_message;
        //e.stopPropagation works in Firefox.
        if (e.stopPropagation) {
          e.stopPropagation();
          e.preventDefault();
        }
        //return works for Chrome and Safari
        return leave_message;
      }
    }
  }
  window.onbeforeunload=goodbye;

  // 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();
});

Update @ 2012-06-15: If there is any link which implements ajax feature, you can refer to this approach. Thanks Immo. =)

Update @ 2015-12-01: If you want to handle the refresh button, please refer to the comment made by Sandesh Satyal. Thanks Sandesh. =)

Reference: StackOverflow – Setting onbeforeunload on body element in Chrome and IE using jQuery

297 thoughts on “jQuery & Javascript – Capture the Browser or Tab Closed Event”

Tushar Mehere says:

March 5, 2011 at 08:24

Thank you very much. I was looking for this solution.

LikeLike

Reply
1. ykyuen says:
  
  March 7, 2011 at 18:50
  
  good to know that it could help you =)
  
  LikeLike
  
  Reply
akismet-eea37e271499fb0916a779573fea7ab8 says:

June 17, 2011 at 20:07

Ykyuen,

Is there a way to have a exception for page refresh (F5)

LikeLike

Reply
1. ykyuen says:
  
  June 17, 2011 at 21:07
  I have included the F5 press exception in check_browser_close.js
```
...
  // Attach the event keypress to exclude the F5 refresh
  $('html').bind('keypress', function(e) {
    if (e.keyCode == 116){
      validNavigation = true;
    }
  });
...
```
  But this only works for user who press the F5 button, if the user click the refresh button using the mouse, the endSession() will be stilled fired.
  
  hope this help. =)
  
  LikeLike
  Reply
2. Tiger says:
  
  June 5, 2014 at 10:07
  yes u can use this code:
```
window.onload = function () {
  document.onkeydown = function (e) {  
    return (e.which || e.keyCode) != 116;
  };
```
  LikeLiked by 1 person
  Reply
  1. ykyuen says:
    
    June 17, 2014 at 21:10
    
    yes, it works for f5 but not the browser refresh btn.
    
    LikeLike
Sandlind says:

July 30, 2011 at 09:57

I have searched for a working script quite some time, this seems to be the only one that works. Thanks.

LikeLike

Reply
1. ykyuen says:
  
  August 2, 2011 at 11:25
  
  good to know that it could help =D
  
  LikeLike
  
  Reply
  1. Chaitra says:
    
    November 11, 2014 at 18:27
    
    Hi, I works for me, I’m closing the session on tab/ browser close. If user clicks “stay on page” option i don’t want to do any action.
    Is there any way?
    
    LikeLike
  2. ykyuen says:
    
    November 12, 2014 at 17:54
    
    No action will be taken if u click “stay on page”.
    
    what action did u find?
    
    LikeLike
  3. Rohit Singh says:
    
    December 21, 2015 at 14:46
    
    Hi,
    
    Thanks for this solution it works great in Chrome and Safari. But in Mozilla Firefox, custom message is not shown. Please provide a solution if any in case of Firefox.
    
    Thanks
    
    LikeLike
  4. ykyuen says:
    
    January 6, 2016 at 11:17
    
    This post is quite old and right now there is no a generic solution to solve it.
    
    There are a lot of comments regarding whether it works on different browsers. maybe you could try to search it and you may able to find a solution.
    
    LikeLike
ikafara says:

August 12, 2011 at 15:06

awesome, it realy help my job, thank you so much…

LikeLike

Reply
1. ykyuen says:
  
  August 12, 2011 at 19:48
  
  You are welcome. =D
  
  LikeLike
  
  Reply
warren says:

August 27, 2011 at 02:56

anyway to tell difference between a refresh, back and close window click?
best example out there
Thanks

LikeLike

Reply
1. ykyuen says:
  
  August 28, 2011 at 12:45
  
  you are welcome.
  i think you can find some examples for detecting the browser back button @ StackOverflow – Detecting Back Button/Hash Change in URL
  
  Hope it could help. =)
  
  LikeLike
  
  Reply

This was a real help….Am a pretty newbie,…I just had requirement….

I want to update a my SQL database and set the status of an online user to ‘0’ from ‘1’ from the function endsession()….i am stuck here…I tried using an AJAX code here to run a update query but its not working…

Here is what i’ve done…

var validNavigation = false;

function endSession() 
{
  // Browser or broswer tab is closed
  // Do sth here ...
	alert("You are about to close your page and session");
  
	var xmlhttp;

	URL = 'localhost/close.php?id=3';

	if (window.XMLHttpRequest)
	{
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
	}
	else
	{
	// code for IE6, IE5
  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
    {
    document.getElementById("PC").innerHTML=xmlhttp.responseText;
	
    }
  }
xmlhttp.open("GET",URL,false);
xmlhttp.send();

  
}

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
  $('html').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();
});

Share this:

Related

297 thoughts on “jQuery & Javascript – Capture the Browser or Tab Closed Event”

Leave a comment Cancel reply

Dream BIG and go for it =)