Question

I’m having a problem with a page that works fine by itself, but when it’s embedded in a iFrame in a corporate webpage (that I don’t control) it chokes in IE9 (but not IE8).

The page uses jQuery to make an AJAX call and KnockoutJS to bind content for display. The page passes parameters in a GET request to my server with responds with AJAX, and it seems that it chokes when getting the data back from the server. The data is correct and correctly formatted, however, when this code executes:

$.ajax({
    url: this.serviceURL + parameters,
    dataType: 'json',
    success: callback,
    timeout: 3000,
    error: function (jqXHR, status, errorThrown) {
        if (status == "timeout") {
            error("The connection to the server timed out.\nEither the server is down or the network is slow.\nPlease try again later.");
        }
        else {
            error("An error occurred while trying to communicate with the server.\n " + errorThrown);
        }
    }
});

In IE9, I always hit the “An error occurred…” branch with the errorThrown of “SyntaxError: Invalid character”, which tells me nothing.

Anybody got any suggestions on how to go about debugging this problem? I used Fiddler to look at what was being sent to and returned by the server, and everything looks fine on that end.

Update: After sleeping on it for a while, I started fresh today. What I’ve determined is that for some reason, when my page is iFramed, instead of getting the JSON response:

"{"Foo":true,"Bar":true}"

I’m actually getting (from forcing an error in the error handler so I could inspect the state of the jqXHR.responseText) is:

" {"Foo":true,"Bar":true}"

Which if, using the console, I try feeding to JSON.parse, gives me an error. So the question is, where the heck is that leading space coming from? If I run this in Firefox, I see the correct response from the server (no space) and if I run this outside of the iFrame, I see no leading space. So I don’t think it’s coming server side. Somewhere in the mess of JS running on the parent page and my page, it’s inserting a leading space.

Update 2: A closer examination reveals that jqXHR.responseText.charCodeAt(0) is 65279, so it’s not actually a space (although it displays as one) it is the byte order mark. But why is it there now (and not before) and why is it causing a problem?

Answer 1

I couldn’t figure out the reason for this problem, so I hacked my way around it by adding a custom converter to my ajax call. So I now have this:

        $.ajax({
            url: this.serviceURL + parameters,
            dataType: 'json',
            success: callback,
            timeout: 3000,
            converters: { "text json": HackyJSONConverter },
            error: function (jqXHR, status, errorThrown) {
                if (status == "timeout") {
                    //alert("Timed out");
                    error("The connection to the server timed out.\nEither the server is down or the network is slow.\nPlease try again later.");
                }
                else {
                    error("An error occurred while trying to communicate with the server.\n " + errorThrown);
                }
            }
        });

And my hacky converter looks like this:

    function HackyJSONConverter(data) {
        if (data[0] = 65279) {
            // leading BOM - happens only with an iFrame in OT for some unknown reason
            data = data.substring(1);
        }
        return JSON.parse(data);
    }

It’s immensely stupid, and I would be delighted if anybody has a better way!