JavaScript 可以检测用户何时停止加载文档吗？答案

【问题标题】：Can JavaScript detect when the user stops loading the document?JavaScript 可以检测用户何时停止加载文档吗？
【发布时间】：2010-12-20 03:00:48
【问题描述】：

我正在使用基于this page 的脚本标签长轮询技术来实现 Comet。

一个问题（我认为没有解决方案）是“厄运的颤抖者”——浏览器继续将文档显示为“正在加载”，并让工具栏上的“停止”按钮处于启用状态。这是有道理的，因为文档仍在加载中，虽然它并不理想，但我想我可以忍受它。

不过，第二个问题是，如果用户实际上单击了“停止”，那么浏览器将停止加载我的脚本标签，我必须依靠超时来重新启动 Comet。这意味着如果我的超时时间是 20 秒，那么在用户单击停止后，页面可能会在 20 秒内不更新。我的问题是：有什么方法可以检测他们何时这样做？我可以检测到他们何时使用 onkeydown 事件按下了转义键，但如果他们使用工具栏按钮或菜单项停止加载，则无法检测到。

该解决方案需要在 Firefox 3.5 和 Chrome 3.0 中运行。

【问题讨论】：

我很好奇如果在 DOM 加载（或最坏的情况下，onload）后将相关脚本添加到 DOM，您是否仍然会得到“厄运的颤抖”。
我能问一个简单的问题吗？得到检测后你想做什么流程？
S.Mark - 我想重新提交请求，就像发生超时一样。无眼 - 你是对的，如果我在 onload 中这样做，就没有厄运的颤抖！结合 onkeydown 技巧来检测 Escape 我认为这可以解决问题。把它放在一个答案中，这样我就可以给你一些代表。 :)

标签： javascript ajax events comet

【解决方案1】：

几天前我问了~~同样的~~a very similar question，一般的概念是否定的。

【讨论】：

【解决方案2】：

看起来 DOMContentLoaded 事件在 Firefox 3.5 中起到了作用——它在用户第一次停止加载页面时被触发。之后停止按钮被禁用。用户仍然可以按 Escape 来停止加载再次，但我可以使用 onkeydown 检测到。

但是，这在 Chrome 中不起作用 - 它会在页面加载后立即触发 DOMContentLoaded，而无需等待我动态生成的 <script> 标签。

【讨论】：

【解决方案3】：

按照我在 cmets 中的建议...在 onload 事件中添加脚本。

编辑：我想我可以解释一下我提出这个建议的理由，希望它能帮助其他试图解决同样问题的人。

浏览器将继续“加载”（并因此播放 throbber），直到它为给定窗口或选项卡中的每个“窗口”（每个具有全局 window 父级的 DOM 树）触发 onload 事件.许多外部资源能够并行下载，但默认情况下——事实上，除了 IE¹ 之外的任何浏览器中都没有转义这个默认值（使用 <script> 标签上的 defer 属性)—<script> 资源将“阻止”对文档的进一步处理。如果<script> 资源请求永远不会完成，则页面的onload 事件永远不会触发（并且还有其他副作用，如果在DOM 中<script> 之后有内容：DOM 可能永远不会完全加载，并且之后的资源<script> 可能永远不会加载），因此永远不会完成“加载”。

接着，您还可以通过在加载 DOM 时添加初始 <script> 来提高性能，并在 IE 中添加 defer 属性，并在您期望的时候切断其他浏览器的连接onload 事件会触发（这很难准确定位，可能需要实验）。

¹ 为了使这个答案保持最新...defer 属性现在在大多数现代浏览器中是 available。

【讨论】：

结合使用 onkeydown 事件检测 Escape 键，这解决了我的问题。谢谢！
我会避免依赖转义键，因为您仍然缺少明确的 stop 事件。
抱歉，明确的stop 事件是什么意思？除了退出键、停止菜单项和停止工具栏按钮之外，用户还有其他方法可以停止加载吗？后两者已被您的建议禁用。
如何在停止操作被禁用后使用转义键停止加载？
好电话。这应该可以解决大多数浏览器中的问题。某些浏览器将始终显示 throbber（阅读：Opera），除非您使用 XHR 进行一些有趣的跨浏览器脚本/iframe hack。

【解决方案4】：

是的，你可以！

这些不是直接的 dom api 来帮助您在使用停止加载页面时触发事件。但是，您可以在两个事件的帮助下检测到它：

1.window的加载事件。

2.文档的readystatechange事件。

当页面正常加载时，chrome 将触发 load 和 readystatechange 事件。当用户停止加载时，chrome 会触发 readystatechange 事件，但是 load 事件会被忽略。

这是一个示例代码：

        var isLoaded = false;
        window.addEventListener("load", function () {
            isLoaded = true;
        });
        document.addEventListener("readystatechange", function () {
            if (document.readyState == "complete") {
                setTimeout(function() {
                    if (!isLoaded) {
                        console.log("abort");//HERE
                    }
                },100);
            }
        });

【讨论】：