How to Detect Browser Window Tab Close Event

Question

I am Trying with onbeforeunload  and Unload function  But it didn t work  When clicking a link or refreshing  this event got triggered  I want an event that is triggered only when a browser window or tab is closed  The code must work in all browsers    I am using Following code in Masterpage    lt script type  text jscript  gt       var leaving   true      var isClose   false       function EndChatSession             var request   GetRequest            request open  GET       Chat aspx   true           request send              document onkeydown   checkKeycode     function checkKeycode e            var keycode          if  window event              keycode   window event keyCode          else if  e              keycode   e which          if  keycode    116                isClose   true                      function somefunction             isClose   true            window onbeforeunload   function  e           if   e  e   event          if  leaving                 EndChatSession                 e returnValue    Are You Sure                        function GetRequest             var xmlHttp   null          try                  Firefox  Opera 8 0   Safari             xmlHttp   new XMLHttpRequest                      catch  e                  Internet Explorer             try                   xmlHttp   new ActiveXObject  Msxml2 XMLHTTP                              catch  e                    xmlHttp   new ActiveXObject  Microsoft XMLHTTP                                    return xmlHttp             lt  script gt    and in my body tag    The Above code works in IE but not in chrome

User · Answer

lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 4 jquery min js  gt  lt  script gt   lt script type  text javascript  gt  var validNavigation   false   function wireUpEvents     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    ServerThemes Net Recommend BEST WEB HOSTING at new tab  window  Good things will come to you   function goodbye e    if   validNavigation    window open  http   serverthemes net best-web-hosting-services    blank    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               lt  script gt    I did answer at Can you use JavaScript to detect whether a user has closed a browser tab  closed a browser  or has left a browser

User · Answer

Yes there is  After a lot of headache i found one solution to this   Monitor php  This php file will be monitoring the browser close event  Once the browser is closed the connection aborted will return 1 hence the loop will break    lt  php    Ignore user aborts and allow the script    to run forever ignore user abort true   set time limit 0    echo connection aborted    while 1    echo  Whatever you echo here wont be printed anywhere but it is required in order to work    flush    if connection aborted      break     Breaks only when browser is closed         Action you want to take after browser is closed  Write your code here      gt      Caller php  This is the file which will call Monitor php   lt  php Header  Location  monitor php      gt      Parent html  This will be the file which you will actually interact with  On loading this will directly make an AJAX call to Caller php which will automatically start Monitor php in background mode     lt script gt    var xmlhttp   new XMLHttpRequest            xmlhttp onreadystatechange   function                 if  xmlhttp readyState    4  amp  amp  xmlhttp status    200                                  xmlhttp open  GET    Caller php   true           xmlhttp send         lt  script gt      So the final flow is Parent html----- Caller php----- Monitor php

User · Answer

my solution is similar to the solution given by Server Themes  Do check it once    localStorage setItem  validNavigation   false     document  on  keypress   function  e        if  e keyCode    116            localStorage setItem  validNavigation   true                 Attach the event click for all links in the page   document  on  click    a   function          localStorage setItem  validNavigation   true           Attach the event submit for all forms in the page   document  on  submit    form   function          localStorage setItem  validNavigation   true           Attach the event click for all inputs in the page   document  bind  click    input type submit    function          localStorage setItem  validNavigation   true          document  bind  click    button type submit    function          localStorage setItem  validNavigation   true       window onbeforeunload   function  event         if  localStorage getItem  validNavigation        false             event returnValue    Write something clever here             console log  Test success             localStorage setItem  validNavigation   false              If you put the breakpoints correctly on the browser page  the if condition will be true only when the browser is about to be closed or the tab is about to be closed   Check this link for reference  https   www oodlestechnologies com blogs Capture-Browser-Or-Tab-Close-Event-Jquery-Javascript

User · Answer

to make the difference between a refresh and a closed tab or navigator  here is how I fixed it     x000D   x000D   lt script gt  x000D      function endSession     x000D              Browser or Broswer tab is closed x000D              Write code here x000D        x000D   lt  script gt  x000D   x000D   lt body onpagehide  endSession     gt  x000D   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Solution Posted Here  After my initial research i found that when we close a browser  the browser will close all the tabs one by one to completely close the browser  Hence  i observed that there will be very little time delay between closing the tabs  So I taken this time delay as my main validation point and able to achieve the browser and tab close event detection     Detect Browser or Tab Close Events   window  on  beforeunload  function e      e   e    window event    var localStorageTime   localStorage getItem  storagetime     if localStorageTime  null  amp  amp  localStorageTime  undefined       var currentTime   new Date   getTime            timeDifference   currentTime - localStorageTime       if timeDifference lt 25    Browser Closed        localStorage removeItem  storagetime         else   Browser Tab Closed        localStorage setItem  storagetime  new Date   getTime               else      localStorage setItem  storagetime  new Date   getTime               JSFiddle Link

User · Answer

You can t detect it with javascript   Only events that do detect page unloading closing are window onbeforeunload and window unload  Neither of these events can tell you the way that you closed the page

User · Answer

This code prevents the checkbox events  It works when user clicks on browser close button but it doesn t work when checkbox clicked  You can modify it for other controls texbox  radiobutton etc        window onbeforeunload   function              return  Are you sure                 function                 input type  checkbox     click function                  window onbeforeunload   function

User · Answer

You can also do like below   put below script code in header tag   lt script type  text javascript  language  text javascript  gt   function handleBrowserCloseButton event        if     window  width   - window event clientX   lt  35  amp  amp  window event clientY  lt  0                 Call method by Ajax call       alert  Browser close button clicked                   lt  script gt    call above function from body tag like below     lt body onbeforeunload  handleBrowserCloseButton event    gt    Thank you

[javascript] How to Detect Browser Window /Tab Close Event?

Examples related to javascript

Examples related to asp.net

Examples related to session