JavaScript, browsers, window close - send an AJAX request or run a script on window closing

jquery ajax call on window close
how to handle browser close event in javascript
onbeforeunload ajax
window unload
browser close event in javascript chrome
javascript detect leaving page
browser tab close event in javascript example
beforeunload vs unload

I'm trying to find out when a user left a specified page. There is no problem finding out when he used a link inside the page to navigate away but I kind of need to mark up something like when he closed the window or typed another URL and pressed enter. The second one is not so important but the first one is. So here is the question:

How can I see when a user closed my page (capture window.close event), and then... doesn't really matter (I need to send an AJAX request, but if I can get it to run an alert, I can do the rest).


There are unload and beforeunload javascript events, but these are not reliable for an Ajax request (it is not guaranteed that a request initiated in one of these events will reach the server).

Therefore, doing this is highly not recommended, and you should look for an alternative.

If you definitely need this, consider a "ping"-style solution. Send a request every minute basically telling the server "I'm still here". Then, if the server doesn't receive such a request for more than two minutes (you have to take into account latencies etc.), you consider the client offline.


Another solution would be to use unload or beforeunload to do a Sjax request (Synchronous JavaScript And XML), but this is completely not recommended. Doing this will basically freeze the user's browser until the request is complete, which they will not like (even if the request takes little time).

Sending AJAX Data when User Moves Away / Exits from Page, You can use this event to send an AJAX request to the server. The user will think that the new page is slower, however the culprit is the synchronous AJAX call. $(window).on('unload', function() { // async: false will make the AJAX AJAX when the page is closed or being navigated to some other url. I'm trying to find out when a user left a specified page. There is no problem finding out when he used a link inside the page to navigate away but I kind of need to mark up something like when he c


1) If you're looking for a way to work in all browsers, then the safest way is to send a synchronous AJAX to the server. It is is not a good method, but at least make sure that you are not sending too much of data to the server, and the server is fast.

2) You can also use an asynchronous AJAX request, and use ignore_user_abort function on the server (if you're using PHP). However ignore_user_abort depends a lot on server configuration. Make sure you test it well.

3) For modern browsers you should not send an AJAX request. You should use the new navigator.sendBeacon method to send data to the server asynchronously, and without blocking the loading of the next page. Since you're wanting to send data to server before user moves out of the page, you can use this method in a unload event handler.

$(window).on('unload', function() {
    var fd = new FormData();
    fd.append('ajax_data', 22);
    navigator.sendBeacon('ajax.php', fd);
});

There also seems to be a polyfill for sendBeacon. It resorts to sending a synchronous AJAX if method is not natively available.

IMPORTANT FOR MOBILE DEVICES : Please note that unload event handler is not guaranteed to be fired for mobiles. But the visibilitychange event is guaranteed to be fired. So for mobile devices, your data collection code may need a bit of tweaking.

You may refer to my blog article for the code implementation of all the 3 ways.

When ever the browser closes i need to call a service explicitly , Hi, I have a scenario where i need to call a service explicitly on browser close button. You can't configure any JavaScript to run correctly when closing a browser window or tab browser window but Chrome and Firefox will actually block AJAX requests from The application has to send you a response and it's going to. 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.


Basing this on other answer.

To make things clear, in 2018, Beacon API is the solution to this issue (on almost every browser)

Beacon Requests are guaranteed to be initiated before a page is unloaded and they are run to completion, without requiring a blocking request.

You can use it inside onunload event, and be confident it will be sent.

$(window).on('unload', function() {

    var URL = "https://example.com/foo";
    var data = "bar";

    navigator.sendBeacon(URL, data);

});

Great blog post : http://usefulangle.com/post/62/javascript-send-data-to-server-on-page-exit-reload-redirect

Beacon API : https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API

onunload Event, The onunload event occurs once a page has unloaded (or the browser window has been closed). onunload occurs when the user navigates away from the page​  The problem with sending an asynchronous AJAX inside the unload event is that the browser may abort the AJAX request when the document is being unloaded. The AJAX request is send, but it is aborted later. PHP has a ignore_user_abort function that will ignore the script abort. This means that even if the browser aborted the AJAX, it will still


I also wanted to achieve the same functionality & came across this answer from Felix(it is not guaranteed that a request initiated in one of these events will reach the server).

To make the request reach to the server we tried below code:-

onbeforeunload = function() {

    //Your code goes here.

    return "";
} 

We are using IE browser & now when user closes the browser then he gets the confirmation dialogue because of return ""; & waits for user's confirmation & this waiting time makes the request to reach the server.

Window close() Method, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  How to detect browser or tab closing in JavaScript ? A tab or window closing in a browser can be detected by using the beforeunload event. This can be used to alert the user in case some data is unsaved on the page, or the user has mistakenly navigated away from the current page by closing the tab or the browser.


Years after posting the question I made a way better implementation including nodejs and socket.io (https://socket.io) (you can use any kind of socket for that matter but that was my personal choice).

Basically I open up a connection with the client, and when it hangs up I just save data / do whatever I need. Obviously this cannot be use to show anything / redirect the client (since you are doing it server side), but is what I actually needed back then.

 io.on('connection', function(socket){
      socket.on('disconnect', function(){
          // Do stuff here
      });
 });

So... nowadays I think this would be a better (although harder to implement because you need node, socket, etc., but is not that hard; should take like 30 min or so if you do it first time) approach than the unload version.

.unload(), removed: 3.0. Description: Bind an event handler to the "unload" JavaScript event. Closing the browser window will cause the event to be triggered. Even a​  Definition and Usage. The close() method closes the current window. Tip: This method is often used together with the open() method.


What is the best way to detect a close browser event?, I assume you want to tell the server that the browser has closed. In this case, the simplest thing is sending a synchronous request in an unload handler. Today in this post, we are going to see how to close a current tab in a browser window using JavaScript. Suppose we have a web page that is opened on a tab of a browser window. Now we want to add a link on that web page so that after clicking the link, the tab that contains the web page will be close.


WindowEventHandlers.onbeforeunload, These events fire when a window is about to unload its resources. When your page uses JavaScript to render content, the JavaScript You can bind to window​.onbeforeunload to prevent the browser from and send us a pull request. In some browsers, calls to window.alert() , window.confirm() , and  Closing a popup. To close a window: win.close(). To check if a window is closed: win.closed. Technically, the close() method is available for any window, but window.close() is ignored by most browsers if window is not created with window.open(). So it’ll only work on a popup. The closed property is true if the window is closed. That’s


Handling common JavaScript problems, Now we'll look at common cross-browser JavaScript problems and how to fix them. browser choices back then (Internet Explorer and Netscape) had scripting new XMLHttpRequest(); request.open('GET', requestURL); request.​send(); let Let's fix this problem by running the code once the load event has been fired  BTW, assuming that you're actually sending the form data to a server via Ajax, you might also consider only removing the beforeunload event listener when the call actually returns successfully. That way, if the user clicks the submit button and then tries to immediately leave the page before the data has actually been sent (e.g. because their