Run JavaScript code on window close or page refresh

Question

Is there a way to run a final JavaScript code when a user closes a browser window or refreshes the page    I m thinking of something similar to onload but more like onclose  Thanks   I don t like the onbeforeunload method  which always yields to a confirmation box popping up  leave page  stay on mozilla  or  reload  don t reload on chrome   Is there a way to execute the code quietly

User · Answer

The event is called beforeunload  so you can assign a function to window onbeforeunload

User · Answer

You can use window onbeforeunload    window onbeforeunload   confirmExit  function confirmExit        alert  confirm exit is being called        return false

User · Answer

There is both window onbeforeunload and window onunload  which are used differently depending on the browser  You can assign them either by setting the window properties to functions  or using the  addEventListener  window onbeforeunload   function          Do something      OR window addEventListener  quot beforeunload quot   function e         Do something    false        Usually  onbeforeunload is used if you need to stop the user from leaving the page  ex  the user is working on some unsaved data  so he she should save before leaving   onunload isn t supported by Opera  as far as I know  but you could always set both

User · Answer

jQuery version     window  unload function           Do Something       Update  jQuery 3     window  on  unload   function e           Do Something       Thanks Garrett

User · Answer

Trying this in React  if the function does not gets executed try wrapping it in an IIFE like this     window onbeforeunload    function          alert  GrrrR          return null

User · Answer

The documentation here encourages listening to the onbeforeunload event and or adding an event listener on window   window addEventListener  beforeunload   function event        do something here    false     You can also just populate the  onunload or  onbeforeunload properties of window with a function or a function reference   Though behaviour is not standardized across browsers  the function may return a value that the browser will display when confirming whether to leave the page

User · Answer

Sometimes you may want to let the server know that the user is leaving the page  This is useful  for example  to clean up unsaved images stored temporarily on the server  to mark that user as  quot offline quot   or to log when they are done their session  Historically  you would send an AJAX request in the beforeunload function  however this has two problems  If you send an asynchronous request  there is no guarantee that the request would be executed correctly  If you send a synchronous request  it is more reliable  but the browser would hang until the request has finished  If this is a slow request  this would be a huge inconvenience to the user  Later came navigator sendBeacon    By using the sendBeacon   method  the data is transmitted asynchronously to the web server when the User Agent has an opportunity to do so  without delaying the unload or affecting the performance of the next navigation  This solves all of the problems with submission of analytics data  the data is sent reliably  it s sent asynchronously  and it doesn t impact the loading of the next page  Unless you are targeting only desktop users  sendBeacon   should not be used with unload or beforeunload since these do not reliably fire on mobile devices  Instead you can listen to the visibilitychange event  This event will fire every time your page is visible and the user switches tabs  switches apps  goes to the home screen  answers a phone call  navigates away from the page  closes the tab  refreshes  etc  Here is an example of its usage  document addEventListener  visibilitychange   function         if  document visibilityState     hidden              navigator sendBeacon  quot  log php quot   analyticsData              When the user returns to the page  document visibilityState will change to  visible   so you can also handle that event as well  sendBeacon   is supported in   Edge 14 Firefox 31 Chrome 39 Safari 11 1 Opera 26 iOS Safari 11 4  It is NOT currently supported in   Internet Explorer Opera Mini  Here is a polyfill for sendBeacon   in case you need to add support for unsupported browsers  If the method is not available in the browser  it will send a synchronous AJAX request instead  Update  It might be worth mentioning that sendBeacon   only sends POST requests  If you need to send a request using any other method  an alternative would be to use the fetch API with the keepalive flag set to true  which causes it to behave the same way as sendBeacon    Browser support for the fetch API is about the same  fetch url       method           body                      headers                 credentials   include      mode   no-cors      keepalive  true

User · Answer

Ok  I found a working solution for this  it consists of using the beforeunload event and then making the handler return null  This executes the wanted code without a confirmation box popping-up  It goes something like this  window onbeforeunload   closingCode  function closingCode          do something       return null

[javascript] Run JavaScript code on window close or page refresh?

Examples related to javascript

Examples related to browser