调试 IFrame 内容答案

【问题标题】：Debugging IFrame content调试 IFrame 内容
【发布时间】：2012-08-06 18:19:29
【问题描述】：

我遇到了一个页面本身可以正常工作的问题，但是当它嵌入到公司网页的 iFrame 中（我无法控制）时，它会在 IE9（但不是 IE8）中阻塞。

页面使用 jQuery 进行 AJAX 调用并使用 KnockoutJS 绑定内容以进行显示。该页面将 GET 请求中的参数传递给我的服务器，并使用 AJAX 进行响应，并且似乎在从服务器获取数据时阻塞。但是，当执行此代码时，数据正确且格式正确：

$.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);
        }
    }
});

在 IE9 中，我总是使用“SyntaxError: Invalid character”的 errorThrown 来点击“An error occurred...”分支，它什么也没告诉我。

有人对如何调试此问题有任何建议吗？我使用 Fiddler 查看服务器发送和返回的内容，结果一切正常。

更新：在上面睡了一会儿，我今天开始焕然一新。我确定的是，由于某种原因，当我的页面是 iFramed 时，而不是获取 JSON 响应：

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

我实际上得到的是（通过在错误处理程序中强制出错，以便我可以检查 jqXHR.responseText 的状态）是：

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

如果我使用控制台尝试向 JSON.parse 提供数据，则会出现错误。所以问题是，这个领先的空间到底是从哪里来的？如果我在 Firefox 中运行它，我会看到来自服务器的正确响应（没有空格），如果我在 iFrame 之外运行它，我看不到前导空格。所以我不认为它会出现在服务器端。在父页面和我的页面上运行的 JS 混乱中的某个地方，它插入了一个前导空格。

更新 2：仔细检查发现 jqXHR.responseText.charCodeAt(0) 是 65279，所以它实际上不是一个空格（尽管它显示为一个）它是字节顺序标记。但为什么它现在（而不是之前）存在，为什么会造成问题？

【问题讨论】：

这里需要更多信息，而不是“有问题”。发布有关您拥有的 URL 内容的更多详细信息，显示整个错误消息、errorThrown 等。
我无法提供 URL，它在我们的内部 Intranet 上。正如我在帖子中所说，错误消息是“SyntaxError：无效字符”。如果您对如何梳理出更多信息有任何建议，我很想听听。这实际上是问题的一半。
“并且一切看起来都很好” - 显然不是某个地方 - 或者服务器端出现错误。 alert(errorThrown); 和 alert(parameters); 和 alert(this.serviceURL); 看看你会得到什么。
@MarkSchultheiss：是的，所有这些都给出了预期值。 errorThrown 仍然是“SyntaxError：无效字符”。我可以使用 Fiddler (fiddler2.com/fiddler2) 查看请求是否正确发送到服务器，并且服务器发送 json 响应。响应并不复杂，它只是 {"foo":true,"bar":true}。在 iFrame 之外或在 IE8 中运行时效果很好。

标签： javascript jquery ajax iframe internet-explorer-9

【解决方案1】：

我无法弄清楚这个问题的原因，所以我通过在我的 ajax 调用中添加一个自定义转换器来解决这个问题。所以我现在有了这个：

        $.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);
                }
            }
        });

我的 hacky 转换器看起来像这样：

    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);
    }

这非常愚蠢，如果有人有更好的方法，我会很高兴！

【讨论】：