在加载彗星/服务器推送 iframe 时停止浏览器“厄运的颤抖”答案

【问题标题】：Stop the browser "throbber of doom" while loading comet/server push iframe在加载彗星/服务器推送 iframe 时停止浏览器“厄运的颤抖”
【发布时间】：2010-11-07 01:53:16
【问题描述】：

使用 Comet 或 Ajax Long Pull 技术时 - 通常使用 iframe。当 iframe 等待长连接关闭时，浏览器正在旋转它的 throbber（进度/加载指示器）。

一些网站，例如 etherpad.com，设法让它停止。

他们是怎么做到的？

【问题讨论】：

加载栏有很多，你指的是哪一个，是浏览器特有的，还是操作系统的一部分？
我想禁用加载栏，即您在浏览器中看到的加载栏（通常是右上角或地址栏中）。

标签： ajax comet loading progress throbber

【解决方案1】：

在互联网的胆量中挖掘了一天一夜之后，这是我想出的：

服务器发送事件 - 非常酷，目前仅适用于 Opera，但可能是 HTML5 的一部分，其他浏览器可能会支持它。添加内容类型为“application/x-dom-event-stream”的新元素标记，允许 服务器 在 客户端 DOM 中触发事件。据我了解，它不应该显示进度指示器。它也是一个标准的工作草案，而不是像整个 iframe comet 那样的 hack。
XMLHttpRequest - 在 Firefox 和 Safari 中，但不是在 IE 中，它可用于长拉页面加载，从而能够处理出现在每个 readyStateChange 事件中的片段。不会显示进度指示器*。 -- 见下方评论
ActiveXObject("htmlfile") - 可在 IE 中用于创建当前窗口范围之外的页面/窗口。这会使进度指示器消失！加载的 iframe 将在一个不可见的浏览器中。

有关服务器发送事件的更多信息：

http://my.opera.com/WebApplications/blog/show.dml/438711

还有关于其他两种技术的更多信息（也更好地解释了问题）： * http://meteorserver.org/browser-techniques/

更深入地了解每种技术，以及更多技术：

【讨论】：

使用方法（2）XHR时，需要在页面加载完成后调用。例如使用 setTimeout()。如果它在页面完成旋转 throbber 之前开始，那么它将在加载 XHR 时继续旋转它 - 并且“ESC”可以中止它，所以它很糟糕。
感谢 Evgeny 的评论。几个星期以来，我一直在用头撞我的页面。在轮询之前添加几秒钟的超时修复了我的页面抖动问题。
@Evgeny 不幸的是，超时解决方案在 Chrome 中不起作用，它仍然给了我一个加载指示器（虽然在 Firefox 中有效）。有什么提示吗？

【解决方案2】：

以防万一您可能需要一些示例，此人确实提供了解决 Firefox 问题的解决方案。 http://www.shanison.com/?p=237

【讨论】：

【解决方案3】：

对我来说，在 ajax 请求上运行 setTimeout 可以解决所有问题。当我从 document.ready 运行请求时，我得到了“厄运的颤抖者”。但是使用 setTimeout 它不会发生。（此修复也适用于 Chrome）。

【讨论】：

【解决方案4】：

我遇到了同样的问题，解决方法是使用 Ajax 而不是隐藏 iframe。所以不要在页面的某处生成 iframe：

$("#chat .msg_list").prepend('<iframe id="hidden" src="chatFrame?id=$userId" frameborder="0" height="0" width="100%"></iframe>');

我使用 jquery ajax 调用将 iframe 内容加载到某些 div 中：

$('#chat #chat_comet').load('chatFrame?id=$userId');

【讨论】：

是的，但第一次对我来说不是那么明显，所以我写了一个更简单的答案。