Window.Onbeforeunload Ajax Request in Chrome

window.onbeforeunload ajax request in Chrome

I was having the same problem, where Chrome was not sending the AJAX request to the server in the window.unload event.

I was only able to get it to work if the request was synchronous. I was able to do this with Jquery and setting the async property to false:

$(window).unload(function () {
   $.ajax({
     type: 'GET',
     async: false,
     url: 'SomeUrl.com?id=123'
   });
});

The above code is working for me in IE9, Chrome 19.0.1084.52 m, and Firefox 12.

Why does $(window).on('beforeunload', callback); no longer fire my ajax call in Chrome after updating to 73.0.3683.103?

I ran into this too. I found a tweet that says support for synchronous xhr has been removed from page dismissal events in Blink, which is the browser engine Chrome uses. This happened in early April. Very likely that Chrome 73.0.3683.103 is running on the version of Blink that has this removed. sendBeacon and fetch keepalive are the new recommended methods of firing ajax on pageunload.

The tweet in question

Synchronous ajax request in beforeunload event alternative to support Edge chromium

Synchronous XMLHttpRequest has been deprecated, you can refer to this doc. Blink has removed support for sync XHR from page dismissal events (beforeunload and unload) and you simply can't do that anymore in chromium browsers.

The modern ways are to use sendBeacon and fetch keepalive as workarounds. For more information, you can refer to this tweet and this thread. If you don't use these workarounds, I think there's no other way.

doing an ajax call on window.unload

If you're using jQuery, you can set async to false in the ajax call. And it might work, but your results may vary by browser. Here's a jsFiddle example. http://jsfiddle.net/jtaylor/wRkZr/4/

// Note:  I came across a couple articles saying we may should to use window.onbeforeunload instead of or in addition to jQuery's unload.  Keep an eye on this.
//        http://vidasp.net/jQuery-unload.html
//        https://stackoverflow.com/questions/1802930/setting-onbeforeunload-on-body-element-in-chrome-and-ie-using-jquery

var doAjaxBeforeUnloadEnabled = true; // We hook into window.onbeforeunload and bind some jQuery events to confirmBeforeUnload.  This variable is used to prevent us from showing both messages during a single event.

var doAjaxBeforeUnload = function (evt) {
    if (!doAjaxBeforeUnloadEnabled) {
        return;
    }
    doAjaxBeforeUnloadEnabled = false;
    jQuery.ajax({
        url: "/",
        success: function (a) {
            console.debug("Ajax call finished");
        },
        async: false /* Not recommended.  This is the dangerous part.  Your mileage may vary. */
    });
}

$(document).ready(function () {
    window.onbeforeunload = doAjaxBeforeUnload;
    $(window).unload(doAjaxBeforeUnload);
});

In Google Chrome, the ajax call always completes before I navigate away from the page.

However, I would VERY MUCH NOT RECOMMEND going that route. The "a" in ajax is for "asynchronous", and if you try to force to act like a synchronous call, you're asking for trouble. That trouble usually manifests as freezing the browser -- which might happen if the ajax call took a long time.

If viable, consider prompting the user before navigating away from the page if the page has data that needs to be posted via ajax. For an example, see this question: jquery prompt to save data onbeforeunload

---

Related Topics