How to reliably send a request cross domain and cross browser on page unload

Question

I have javascript code that's loaded by 3rd parties. The javascript keeps track of a number of metrics, and when a user exits the page I'd like to send the metrics back to my server.

Due to XSS checks in some browsers, like IE, I cannot do a simple jquery.ajax() call. Instead, I'm appending an image src to the page with jquery. Here's the code, cased by browser:

    function record_metrics() {
        //Arbitrary code execution here to set test_url
        $esajquery('#MainDiv').append("<img src='" + test_url + "' />");
    }

    if ($esajquery.browser.msie) {
        window.onbeforeunload = function() { record_metrics(); }
    } else {
        $esajquery(window).unload(
            function(){ record_metrics(); }
        );
    }

FF aborts the request to "test_url" if I use window.onbeforeunload, and IE8 doesn't work with jquery's unload(). IE8 also fails to work if the arbitrary test_url setting code is too long, although IE8 seems to work fine if the is immediately appended to the DOM.

Is there a better way to solve this issue? Unfortunately this really needs to execute when a user leaves the page.

Answer 1

From what I remember, some browsers only accept a text string for the onbeforeunload result. Try something more like this:

jQuery(window).bind('beforeunload', function() { record_metrics(); return ''; } );

Not sure, but that might even work for all browsers, but I'm only guessing at this point.

p.s. also see http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own

Answer 2

For posterity's sake, here's what I ended up doing:

if ($.browser.msie) {
    window.onbeforeunload = function() { $('#div1').append("<img src='record_call' />");   
} else {
    $(window).unload(
        if ($.browser.webkit) {
           $.ajax(url:record_call, async:false);
        } else {
           $('#div1').append("<script src='record_call' />");
        }
    );
}

I found that IE works appending an img, but not a script, possibly because the script is more resource intensive and it cuts out before trying to load it. For webkit, appending a script sometimes works, but appending an image never seemed to work. Lastly, I default to the script (mainly for FF) because older browser versions all seem to play well with it. IE blocks the AJAX call used by webkit because of xss.

In addition, IE never works with jquery's unload function, and the other browsers don't work with onbeforeunload, so those have to be cased. This certainly isn't a pretty solution, but it works most of the time.

Answer 3

You should take a look at easyXDM library

http://easyxdm.net/

I think it will make your work easy regarding the limitation set in place by the Same Origin Policy