Detect Close windows event by jQuery

Question

Could you please give me the best way to detect only window close event for all browsers by jQuery   I mean clicking X button on the browser or window close    not meaning F5  form submission  window location or link  I was looking for many threads but have not found the right way yet

User · Accepted Answer

There is no specific event for capturing browser close event.

You can only capture on unload of the current page.

By this method, it will be effected while refreshing / navigating the current page.

Even calculating of X Y postion of the mouse event doesn't give you good result.

User · Answer

You can solve this problem with vanilla-Js   Unload Basics  If you want to prompt or warn your user that they re going to close your page  you need to add code that sets  returnValue on a beforeunload event       window addEventListener  beforeunload    event    gt          event returnValue    Are you sure you want to leave               There s two things to remember    Most modern browsers  Chrome 51   Safari 9 1  etc  will ignore what you say and just present a generic message  This prevents webpage authors from writing egregious messages  e g    Closing this tab will make your computer EXPLODE     Showing a prompt isn t guaranteed  Just like playing audio on the web  browsers can ignore your request if a user hasn t interacted with your page  As a user  imagine opening and closing a tab that you never switch to   the background tab should not be able to prompt you that it s closing    Optionally Show  You can add a simple condition to control whether to prompt your user by checking something within the event handler  This is fairly basic good practice  and could work well if you re just trying to warn a user that they ve not finished filling out a single static form  For example       let formChanged   false      myForm addEventListener  change        gt  formChanged   true       window addEventListener  beforeunload    event    gt          if  formChanged            event returnValue    You have unfinished changes                       But if your webpage or webapp is reasonably complex  these kinds of checks can get unwieldy  Sure  you can add more and more checks  but a good abstraction layer can help you and have other benefits   which I ll get to later         Promises  So  let s build an abstraction layer around the Promise object  which represents the future result of work- like a response from a network fetch     The traditional way folks are taught promises is to think of them as a single operation  perhaps requiring several steps- fetch from the server  update the DOM  save to a database  However  by sharing the Promise  other code can leverage it to watch when it s finished   Pending Work  Here s an example of keeping track of pending work  By calling addToPendingWork with a Promise   for example  one returned from fetch     we ll control whether to warn the user that they re going to unload your page       const pendingOps   new Set         window addEventListener  beforeunload    event    gt          if  pendingOps size            event returnValue    There is pending work  Sure you want to leave                         function addToPendingWork promise          pendingOps add promise         const cleanup        gt  pendingOps delete promise         promise then cleanup  catch cleanup            Now  all you need to do is call addToPendingWork p  on a promise  maybe one returned from fetch    This works well for network operations and such- they naturally return a Promise because you re blocked on something outside the webpage s control   more detail can view in this url   https   dev to chromiumdev sure-you-want-to-leavebrowser-beforeunload-event-4eg5  Hope that can solve your problem

User · Answer

Combine the mousemove and window onbeforeunload event  - I used for set TimeOut for Audit Table      document  ready function       var checkCloseX   0            document  mousemove function  e                if  e pageY  lt   5                    checkCloseX   1                            else   checkCloseX   0                         window onbeforeunload   function  event                if  event                    if  checkCloseX    1                           alert  1111                          ajax                           type   GET                           url   Account SetAuditHeaderTimeOut                           dataType   json                           success  function  result                                if  result    null

User · Answer

You can use     window  unload function           do something     Unload   is deprecated in jQuery version 1 8  so if you use jQuery   1 8 you can use even beforeunload instead   The beforeunload event fires whenever the user leaves your page for any reason     window  on  beforeunload   function          return confirm  Do you really want to close           Source Browser window close event

User · Answer

There is no specific event for capturing browser close event.

You can only capture on unload of the current page.

By this method, it will be effected while refreshing / navigating the current page.

Even calculating of X Y postion of the mouse event doesn't give you good result.

User · Answer

The unload   method was deprecated in jQuery version 1 8   so if you are using versions older than 1 8   then use -     window  unload function    alert  Goodbye           and if you are using 1 8 and higher   then use -   window onbeforeunload   function         return  Bye now         hope this will work  -

[javascript] Detect Close windows event by jQuery

Examples related to javascript

Examples related to jquery

Examples related to jquery-events