Capture the Browser or Tab Closed Event

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

/**   * 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.

1 2 3 4 5 6 7 8 9 10 11 12

< 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 = "http://ykyuen.wordpress.com" >Eureka!</ a >    </ body > </ html >

 

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

Done =)

Reference:

• StackOverflow – Close/kill the session when the browser or tab is closed
• StackOverflow – Kill sessions on browser/tab close
  

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

/**   * 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 withou 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. =)

http://eureka.ykyuen.info/2011/02/22/jquery-javascript-capture-the-browser-or-tab-closed-event/