How to capture the browser window close event

Question

I want to capture the browser window tab close event  I have tried the following with jQuery    jQuery window  bind       beforeunload        function              return confirm  Do you really want to close               But it works on form submission as well  which is not what I want  I want an event that triggers only when the user closes the window

User · Answer

var validNavigation   false              jQuery document  ready function                       wireUpEvents                                 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                          debugger                     if   validNavigation                            endSession                                                                Attach the event keypress to exclude the F5 refresh                   document  bind  keypress   function  e                        debugger                     if  e keyCode    116                            validNavigation   true                                                                Attach the event click for all links in the page                    a   bind  click   function                          debugger                     validNavigation   true                                          Attach the event submit for all forms in the page                    form   bind  submit   function                          debugger                     validNavigation   true                                          Attach the event click for all inputs in the page                    input type submit    bind  click   function                          debugger                     validNavigation   true                                     enter code here

User · Answer

For a cross-browser solution  tested in Chrome 21  IE9  FF15   consider using the following code  which is a slightly tweaked version of Slaks  code   var inFormOrLink     a   live  click   function     inFormOrLink   true         form   bind  submit   function     inFormOrLink   true         window  bind  beforeunload   function eventObject        var returnValue   undefined      if    inFormOrLink            returnValue    Do you really want to close              eventObject returnValue   returnValue      return returnValue         Note that since Firefox 4  the message  Do you really want to close   is not displayed   FF just displays a generic message   See note in https   developer mozilla org en-US docs DOM window onbeforeunload

User · Answer

If your form submission takes them to another page  as I assume it does  hence the triggering of beforeunload   you could try to change your form submission to an ajax call  This way  they won t leave your page when they submit the form and you can use your beforeunload binding code as you wish

User · Answer

My answer is aimed at providing simple benchmarks   HOW TO  See  SLaks answer     window  on  beforeunload   function          return inFormOrLink    Do you really want to close     null        How long does the browser take to finally shut your page down   Whenever an user closes the page  x button or CTRL   W   the browser executes the given beforeunload code  but not indefinitely  The only exception is the confirmation box  return  Do you really want to close   which will wait until for the user s response   Chrome  2 seconds  Firefox  8  or double click  or force on close  Edge  8  or double click  Explorer 11  0 seconds  Safari  TODO  What we used to test this out    A Node js Express server with requests log The following short HTML file   What it does is to send as many requests as it can before the browser shut downs its page  synchronously     lt html gt   lt body gt       lt script src  https   cdnjs cloudflare com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt       lt script gt      function request             return   ajax               type   GET               url   http   localhost 3030     Date now                async  true            responseText            window onbeforeunload        gt            while  true                request                      return null             lt  script gt   lt  body gt   lt  html gt    Chrome output   GET  1480451321041 404 0 389 ms - 32   GET  1480451321052 404 0 219 ms - 32         GET  hello 1480451322998 404 0 328 ms - 32  1957ms    2 seconds    we assume it s 2 seconds since requests can take few milliseconds to be sent

User · Answer

Maybe just unbind the beforeunload event handler within the form s submit event handler   jQuery  form   submit function         jQuery window  unbind  beforeunload

User · Answer

Unfortunately  whether it is a reload  new page redirect  or browser close the event will be triggered  An alternative is catch the id triggering the event and if it is form dont trigger any function and if it is not the id of the form then do what you want to do when the page closes  I am not sure if that is also possible directly and is tedious   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 amp redirectslug DOM Mozilla event reference beforeunload

User · Answer

window onbeforeunload   function          return  Do you really want to close

User · Answer

The beforeunload event fires whenever the user leaves your page for any reason   For example  it will be fired if the user submits a form  clicks a link  closes the window  or tab   or goes to a new page using the address bar  search box  or a bookmark   You could exclude form submissions and hyperlinks  except from other frames  with the following code   var inFormOrLink     a   on  click   function     inFormOrLink   true         form   on  submit   function     inFormOrLink   true         window  on  beforeunload   function          return inFormOrLink    Do you really want to close     null        For jQuery versions older than 1 7  try this   var inFormOrLink     a   live  click   function     inFormOrLink   true         form   bind  submit   function     inFormOrLink   true         window  bind  beforeunload   function          return inFormOrLink    Do you really want to close     null        The live method doesn t work with the submit event  so if you add a new form  you ll need to bind the handler to it as well   Note that if a different event handler cancels the submit or navigation  you will lose the confirmation prompt if the window is actually closed later   You could fix that by recording the time in the submit and click events  and checking if the beforeunload happens more than a couple of seconds later

User · Answer

jQuery window  bind                       beforeunload                         function  e                              var activeElementTagName   e target activeElement tagName                            if  activeElementTagName     A   amp  amp  activeElementTagName     INPUT                                   return  Do you really want to close

User · Answer

As of jQuery 1 7  the  live   method is deprecated  Use  on   to attach event handlers  Users of older versions of jQuery should use  delegate   in preference to  live      window  bind  beforeunload   function         return true    confirm  Do you really want to close             on complete or link    window  unbind

User · Answer

Try this also  window onbeforeunload   function                 if  pasteEditorChange            var btn   confirm  Do You Want to Save the Changess                if btn     true                   SavetoEdit     your function call                         else                  windowClose     your function call                     else            windowClose     your function call

User · Answer

Following worked for me      window  unload function event        if event clientY  lt  0              do whatever you want when closing the window

User · Answer

Perhaps you could handle OnSubmit and set a flag that you later check in your OnBeforeUnload handler

User · Answer

For a solution that worked well with third party controls like Telerik  ex   RadComboBox  and DevExpress that use the Anchor tags for various reasons  consider using the following code  which is a slightly tweaked version of desm s code with a better selector for self targeting anchor tags   var inFormOrLink     a href  not  target    a href  target  self    live  click   function     inFormOrLink   true         form   bind  submit   function     inFormOrLink   true         window  bind  beforeunload   function eventObject        var returnValue   undefined      if    inFormOrLink            returnValue    Do you really want to close              eventObject returnValue   returnValue      return returnValue

User · Answer

I used Slaks answer but that wasn t working as is   since the onbeforeunload returnValue is parsed as a string and then displayed in the confirmations box of the browser  So the value true was displayed  like  true     Just using return worked   Here is my code  var preventUnloadPrompt  var messageBeforeUnload    my message here - Are you sure you want to leave this page      var redirectAfterPrompt    http   www google co in      a   live  click   function     preventUnloadPrompt   true         form   live  submit   function     preventUnloadPrompt   true        window  bind  beforeunload   function e         var rval      if preventUnloadPrompt            return        else             location replace redirectAfterPrompt           return messageBeforeUnload            return rval

User · Answer

My Issue  The  onbeforeunload  event would only be triggered if there were odd number of submits clicks   I had a combination of solutions from similar threads in SO to have my solution work  well my code will speak   lt  --The definition of event and initializing the trigger flag--- gt      document  ready function       updatefgallowPrompt true     window onbeforeunload   WarnUser      function WarnUser       var allowPrompt   getfgallowPrompt      if allowPrompt        saveIndexedDataAlert        return null      else       updatefgallowPrompt true       event stopPropagation         lt  --The method responsible for deciding weather the unload event is triggered from submit or not--- gt  function saveIndexedDataAlert       var allowPrompt   getfgallowPrompt      var lenIndexedDocs   parseInt     sortable3  gt  li   size      parseInt     sortable3  gt  ul   size        if allowPrompt  amp  amp    trim lenIndexedDocs   gt  0        event returnValue    quot Your message quot       else       event returnValue    quot     quot       updatefgallowPrompt true           lt  ---Function responsible to reset the trigger flag---- gt    document  click function event           a   live  click   function     updatefgallowPrompt false             lt  --getter and setter for the flag---- gt  function updatefgallowPrompt  allowPrompt     exit msg dfds      body   data  allowPrompt   allowPrompt            function getfgallowPrompt              return    body   data  allowPrompt

User · Answer

Just verify     function wopen close      var w   window open  url    blank    width 600  height 400  scrollbars no  status no  resizable no  screenx 0  screeny 0      w onunload   function        if  window closed           alert  window closed         else          alert  just refreshed

[javascript] How to capture the browser window close event?

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to browser