onBeforeUnload with ajax does not work with IE

Question

I'm just wondering why this is not working with IE. It works fine with Chrome and Firefox.

    window.onbeforeunload = function()
{
    fetch("http://"+window.location.hostname+"/process_sc.php?cC=" + 1);
} 

function fetch(url) {
    var x = (window.ActiveXObject) ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    x.open("GET", url, false);
    x.send(null);
}

why would you want to call Ajax on "onbeforeunload".... – Sudhir Bastakoti Feb 28 '12 at 10:39 — Sudhir Bastakoti, Feb 28 '12 at 10:39
https://developer.mozilla.org/en/DOM/window.onbeforeunload – Joseph Feb 28 '12 at 10:46 — Joseph, Feb 28 '12 at 10:46
@Sudhir why? is there any other method? – jaypabs Feb 28 '12 at 12:01 — jaypabs, Feb 28 '12 at 12:01

score 2 · Answer 1 · answered Feb 28 '12 at 11:28

2

How can you tell it isn't working?

In general, there's little time between beforeunload event, unload event and actual page exit. At page unload all running scripts are dropped (browser than closes the window or navigates to address provided by user for example).

What might be happening here is browser doesn't really have time to send ajax request before page is unloaded.

I've seen couple of ways to ensure your final request before page unload will be completed. One of them is sending request and then introducing loop that is running for X number of miliseconds, postponing unload event and ensuring ajax request can be completed.

window.onbeforeunload = function() {
    fetch("http://"+window.location.hostname+"/process_sc.php?cC=" + 1);
    // here we force browser to wait for 300 seconds before proceeding with unload
    var t = Date.now() + 300;
    while(Date.now() < t) {};
}

answered Feb 28 '12 at 11:28

WTK

15,360
6
31
42

Hi, it works only on the first time I open IE. i have a php code on process_sc.php file that increments a value in my table by 1 every time it execute this url: http://"+window.location.hostname+"/process_sc.php?cC=" + 1. When I click the link on the page that has the code above the second time it seems that it does not call the fetch function because the value in my table does not increment anymore. – jaypabs Feb 28 '12 at 12:00
the fetch function is called twice when I double click the outbound link which is ok but the only problem is it does not fire the x.open("GET", url, false); – jaypabs Feb 28 '12 at 12:49
no it does not return any error in IE. it works fine with chrome and firefox. I'm just wondering why it does not behave well in IE. – jaypabs Feb 28 '12 at 13:31
Try to put simple `alert('test');` after invocation of your fetch function and then check if problem is gone. – WTK Feb 28 '12 at 13:44
as i've said the fetch function is called whenever the page is unload using onbeforeunload event. the only problem is the x.open("GET", url, false); is not fired the second time you load the page. it's like when you open IE the x.open("GET", url, false); is called w/out problem when you unload the page. but when you click the back button it will not work anymore when you unload the page. – jaypabs Feb 28 '12 at 14:09
but 'fetch' is not supported in ie, so your solution is good, but in order for it to work in ie11 it should use xmlhttprequest and not fetch. – shayuna Dec 15 '20 at 15:14

score 1 · Answer 2 · edited Sep 02 '13 at 23:57

The problem is that you use a GET instead of a POST request. The browser may use a cached result from the very first request.

This explains the fact that "it works only on the first time I open IE" as written as in response to another answer.

By the way, the AJAX call in onunload seems to work reliably in IE10 only if you use the parameter async = false in XMLHttpRequest.open(...), which you already did.

onBeforeUnload with ajax does not work with IE

2 Answers2

Linked