奇怪的jQuery AJAX Firefox问题 - 页面随机无法完成下载

I have this strange issue with my web app. You see, I'm using jQuery with the Forms API and doing $('#MyForm').ajaxSubmit(api parms and callback function goes here).

我的网络应用程序有这个奇怪的问题。你看,我正在使用带有Forms API的jQuery并执行$('#MyForm')。ajaxSubmit(api parms和回调函数在这里)。

Randomly when I do this, however, and only on Firefox, the page load icon starts spinning, the page load progress bar runs in the status bar, and the stop button goes red -- but it has already posted the form and brought back a result. If I refresh the page and keep trying to do this, it randomly exhibits the problem, but not consistently.

然而,当我这样做时,随机地,只有在Firefox上,页面加载图标开始旋转,页面加载进度条在状态栏中运行,停止按钮变为红色 - 但它已经发布了表单并带回了一个结果。如果我刷新页面并继续尝试这样做,它会随机显示问题,但不能始终如一。

This problem occurred on FF2 on Windows 2008 Server and FF3 on Ubuntu 8.04. The problem is not seen with IE6, IE7, Opera (latest stable, Nov 2008), or Safari (latest stable, Nov 2008).

在Windows 2008 Server上的FF2和Ubuntu 8.04上的FF3上发生此问题。 IE6,IE7,Opera(最新稳定版,2008年11月)或Safari(最新稳定版,2008年11月)未见问题。

Is this just a known bug in FF with AJAX, or is there something I can do with jQuery to stop the page load issue?

这只是FF中使用AJAX的已知错误,还是我可以用jQuery来阻止页面加载问题?

EDIT: This might have something to do with TinyMCE. I cannot confirm this 100%, but when I use jQuery to bring back a form with a TinyMCE control on it, the problem seems to exhibit itself more often. I tried doing it with a form that does not have a TinyMCE control on it, several times, and couldn't get the problem to occur. Again, that's nothing conclusive, but might be a factor.

编辑:这可能与TinyMCE有关。我无法确认这100%,但是当我使用jQuery带回一个带有TinyMCE控件的表单时,问题似乎更频繁地展现出来。我尝试使用一个没有TinyMCE控件的表单,多次,并且无法解决问题。同样,这没什么结论,但可能是一个因素。

EDIT: Okay, I just commented out the TinyMCE stuff and I can confirm that the problem goes away then. If I bring the TinyMCE control back, the problem randomly occurs.

编辑:好的,我只是评论了TinyMCE的东西,我可以确认问题消失了。如果我将TinyMCE控件带回来,问题会随机发生。

4 个解决方案

#1

I used to have this issue when I worked on a site that made heavy use of iframes. If I remember correctly an easy way to cure this is to create another iframe in the top page with minimum height/width and call it frameFix or similar.

当我在一个大量使用iframe的网站上工作时,我曾经遇到过这个问题。如果我没记错的话,一个简单的方法就是在顶页中创建另一个iframe,其高度/宽度最小,并将其命名为frameFix或类似。

Then from the Iframe content pages use a body load event to write an empty string then close the frameFix iframe. This forces the status bar to fully load up.

然后从Iframe内容页面使用body load事件写入空字符串,然后关闭frameFix iframe。这会强制状态栏完全加载。

e.g

iframe content page

iframe内容页面

<body onload="javascript:progressBarHack()">

function progressBarHack(){
   top.frameFix.document.write("");
   top.frameFix.close();
   return;
}

#2

Try to look at the server response, using firebug to see exaclty if there is a problem then, or if you have any javascript exception raising.

尝试查看服务器响应,使用firebug查看exaclty当时是否存在问题,或者是否有任何javascript异常提升。

#3

You probably don't want to upmod this answer -- I'm just extrapolating on redsquare's answer, which fixed me.

你可能不想upmod这个答案 - 我只是在redsquare的回答中推断,这解决了我的问题。

I was using AJAX (jQuery Form Plugin API and .ajaxSubmit(), to be exact) to pull back a form. When I hit Save or Cancel on that form, it was showing the red stop button in firefox and wouldn't stop.

我使用AJAX(确切地说是jQuery Form Plugin API和.ajaxSubmit())来拉回表单。当我在该表单上点击“保存”或“取消”时,它在Firefox中显示红色停止按钮并且不会停止。

So, to fix this, I need to take the calling page and add a hidden IFRAME in it like this:

所以,为了解决这个问题,我需要调用页面并在其中添加一个隐藏的IFRAME,如下所示:

<iframe frameborder="0" src="http://mysite.com/fixdoc.html" id="frameFix" height="1" width="1" style="position: relative; left: -500px"></iframe>

Then, I needed to create a fixdoc.html that was just an ordinary empty HTML page with the standard tag stuff in it.

然后,我需要创建一个fixdoc.html,它只是一个普通的空HTML页面,其中包含标准标记内容。

Then, after Save or Cancel has fully completed in my logic, I need to execute this:

然后,在我的逻辑中完全完成保存或取消后,我需要执行以下操作:

var ifr = document.getElementById('frameFix');
var doc = ifr.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(' ');
doc.close();

Somehow, this tells Firefox to get out of its infinite load loop.

不知何故,这告诉Firefox摆脱它的无限加载循环。

#4

I had this problem with this code that ran to set the value on an empty visible iframe:

我遇到了这个代码的问题,该代码运行以在空的可见iframe上设置值:

function loadIframeContent() {
    $.post(
        '/my/content/url',
        $('#my-form').serialize(),
        function (data) {
            $('#my-preview-div-with-iframe').dialog('open');
            $('#id-on-my-iframe-tag')[0]
                .contentWindow
                .document
                .write(data);

            resizeIframeToContent();
        },
        'html'
    );
}

The solution turned out to be:

解决方案原来是:

            var $document = $('#id-on-my-iframe-tag')[0]
                .contentWindow
                .document;    
            $document.open();
            $document.write(data);
            $document.close();

So in the end, the document.write(data) call is unchained so that first the document can be opened, then written, and then finally closed. Don't name the document variable document (at least not with Firefox 3) as it will collide -- use $document or similar.

所以最后,document.write(data)调用是unchained,因此首先可以打开文档,然后写入,然后最终关闭。不要将文档变量文档命名(至少不是Firefox 3),因为它会发生碰撞 - 使用$ document或类似文件。

I'm also using TinyMCE but this appears to be unrelated.

我也在使用TinyMCE,但这似乎是无关的。

#1