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.

score 1 · Answer 1 · answered Apr 20 '10 at 16:33

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.

score 1 · Answer 2 · edited Feb 03 '12 at 07:26

1

A heads up for those trying to use Agmin's method above: When you use jQuery's append() method to append a script tag, the internal jQuery wiring uses jQuery.ajax() to execute the script, so if the script tag you're appending is on a different domain, Same Origin Policy will prevent the script from being executed.

edited Feb 03 '12 at 07:26

stealthyninja

10,343
11
51
59

answered Mar 08 '11 at 00:14

Sean

493
3
8

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

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 How can I override the OnBeforeUnload dialog and replace it with my own?

edited May 23 '17 at 10:32

Community

1
1

answered Apr 17 '10 at 02:48

ken

3,650
1
30
43

binding the window with beforeunload and returning an empty string causes an "are you sure you want to navigate away from this page?" prompt, which I can't have, and it also fails to make/finish the record_metrics call. Simply not returning a value also doesn't work. – Agmin Apr 19 '10 at 16:32

score 0 · Answer 4 · answered Oct 23 '10 at 15:07

0

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

answered Oct 23 '10 at 15:07

Felipe Sabino

17,825
6
78
112

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

4 Answers4