永无止境的“连接” AJAX 表单提交后的消息

Question

我有一个类，它允许通过 AJAX 提交具有文件类型输入的表单。它创建一个隐藏的 IFRAME 元素，更改表单 target 属性，以便它提交到 IFRAME，提交表单，然后将目标更改回来原来如此。它还向 IFRAME 添加了一个 onLoad 事件，以便我可以获得回调。在触发我的回调函数之前，onLoad 函数还会从页面中删除 IFRAME。

该课程运行良好，我按预期得到了回调。在 Firebug 的网络面板中，我看到了请求，也看到了响应，一切都很好。但是，一旦开始提交，页面的浏览器选项卡就会通过加载微调器更改为“正在连接”，并且永远不会变回原样。它使选项卡看起来正在加载，如果我保持浏览器打开，这将持续天。

那么问题是：有什么办法吗让我手动停止此操作，或者是否有其他方法可以阻止它启动？

以下是从网络面板中获取的响应标头：

Date    Fri, 02 Sep 2011 15:23:15 GMT
Server  Apache/2.2.10 (Win32) PHP/5.3.1
X-Powered-By    PHP/5.3.1
Expires Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma  no-cache
Set-Cookie  PHPSESSID=agncdnha86mtci7dmuvriobak2; path=/
Content-Length  165
Keep-Alive  timeout=5, max=100
Connection  Keep-Alive
Content-Type    text/html

以及下面的网络面板的捕获。 POST是由表单的提交引起的，GET是由回调函数引起的，它是改变页面上图像的来源。

这不是特定于本页面的，它发生在我使用此技术提交文件/图像的任何地方通过 IFRAME。这会影响我当前版本的 Firefox (6.0)，但也会影响以前的版本（5.x、4.x、3.x）。事实上，IFRAME 在加载后从页面中删除，这使得这尤其令人困惑 - 即使请求从未完成，删除该元素应该有效地终止/停止并“连接”浏览器认为的正在发生。

更新 根据 @Sidncious 的回答，我向回调函数添加了超时，以引入延迟删除 IFRAME 元素。我试验了延迟的长度，即使是1ms的延迟也足够了。这当然可以作为一种解决方法，但我仍然想知道是否有人可以阐明其原因，最好是避免一起使用超时。我在下面添加了修改后的代码（带有超时），以防有帮助。这是 IFRAME 的 onLoad 事件（io 我们是对框架元素的引用）：

        var obj={};
        var success = true;
        try{
            obj.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
            obj.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
        }
        catch(e){ success = false; }
        if( success ){
            this.fireEvent('onSuccess', obj.responseText );
        }else{
            this.fireEvent('onFailure', obj );
        }
        this.fireEvent('onComplete', obj );
        io.removeEvent('load', uploadCallback );
        setTimeout(function () { // <--- this timeout prevents the issue
            io.dispose();
        }, 1);

Answer 1

更新：Firefox 错误现已标记为“已修复”，并将在不久的将来进行更新。

---

我也遇到过这个问题，并且希望看到根本原因得到解决。

• 我与几位 Firefox 开发人员（mbrubeck 和 gavin）交谈过，他们认为这是一个错误！ 2005 年 Firefox 1.9 报告并修复了相同的问题。然后，bug 489259 在 2009 年被公开。mbrubeck 慷慨地将其移出“未经证实”的一堆。

• Safari 的表现比 Firefox 更好，但如果您在 load 事件期间删​​除 iframe，状态栏中会显示一条错误消息（“打开页面时出现错误...”）。我发现自 2007 年以来一直存在的两个类似的 WebKit bug：15485 和 13281。

当您在 load 事件期间从文档中删除 iframe 时，就会发生这种情况。 JavaScript 事件同步触发——也就是说，与浏览器自己对网页的处理串联。这就是为什么可以阻止提交表单或阻止从事件处理程序中注册按键或鼠标单击。

上次在 Firefox 中修复此错误时，原因是从页面中删除 iframe 使其忘记哪个页面拥有它，但 iframe 通知页面： 在 load 事件之后完成加载。

您使用 setTimeout 安排的任何事情都会在事件循环的当前周期之后发生 - 在浏览器完成当前正在执行的操作之后。因此，使用 setTimeout 删除 iframe，即使超时为零，也可以让它完成：

iframe.onload = function(){
    // Do work with the content of the iframe…

    setTimeout(function(){
        iframe.parentNode.removeChild(iframe);
    }, 0);
}

您可以找到正在使用的这项技术 在 jQuery 表单插件中。

Answer 2

IFRAME 中的 onload 事件未完全执行，因为它会因 IFRAME 的删除而中断。
Firefox 有一个错误，它在中断 onload 事件后不会调用其内部代码。

通过设置超时，Firefox 会干净地执行 onload，之后运行超时回调并删除 IFRAME。根据文档，当页面 (或操作系统/浏览器本身）正忙于其他任务（即删除 IFRAME）。