Run JavaScript code on window close or page refres

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?

Answer 1

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 "offline", 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.

Luckily, we now have 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. Here is an example of its usage:

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

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.

Answer 2

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;
}

Hope this helps.