如何跨浏览器检测在线/离线事件？

Question

我正在尝试使用 HTML5 在线和离线事件准确检测浏览器何时离线。

这是我的代码：

 <script>
    // FIREFOX
    $(window).bind("online", applicationBackOnline);
    $(window).bind("offline", applicationOffline);

    //IE
    window.onload = function() {
        document.body.ononline = IeConnectionEvent;
        document.body.onoffline = IeConnectionEvent;
    }
</script>

当我在 Firefox 或 IE 上点击“离线工作”时它工作正常，但当我实际拔下电线时它有点随机工作。

检测这种变化的最佳方法是什么？我想避免重复超时的 ajax 调用。

原文由 Pierre Duplouy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

目前在2011年，各个浏览器厂商对于如何定义离线还无法达成一致。一些浏览器具有离线工作功能，他们认为这与缺乏网络访问是分开的，这又不同于互联网访问。整个事情一团糟。某些浏览器供应商会在实际网络访问丢失时更新 navigator.onLine 标志，而其他浏览器供应商则不会。

从规格：

如果用户代理确实离线（与网络断开连接），则返回 false。如果用户代理可能在线，则返回 true。

当此属性的值更改时，将触发在线和离线事件。

navigator.onLine 属性必须返回 false 如果当用户点击链接或当脚本请求远程页面（或知道这样的尝试会失败）时用户代理将不联系网络，否则必须返回 true。

最后，规范说明：

这个属性本质上是不可靠的。计算机可以连接到网络而无需访问 Internet。

原文由 Rebecca 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

主要浏览器供应商对“离线”的含义各不相同。

Chrome、Safari 和 Firefox（自版本 41 起）将检测您何时自动“离线”——这意味着“在线”事件和属性将在您拔下网络电缆时自动触发。

Mozilla Firefox（版本 41 之前）、Opera 和 IE 采用不同的方法，并认为您“在线”，除非您在浏览器中明确选择“离线模式”——即使您没有有效的网络连接。

Firefox/Mozilla 的行为有一些有效的论点，这些论点在这个错误报告的评论中有概述：

https://bugzilla.mozilla.org/show_bug.cgi?id=654579

但是，要回答这个问题 - 您不能依赖在线/离线事件/属性来检测是否确实存在网络连接。

相反，您必须使用替代方法。

这篇 Mozilla 开发人员文章的“注释”部分提供了两种替代方法的链接：

https://developer.mozilla.org/en/Online_and_offline_events

“如果 API 未在浏览器中实现，您可以使用其他信号来检测您是否离线，包括侦听 AppCache 错误事件和来自 XMLHttpRequest 的响应”

这链接到“侦听 AppCache 错误事件”方法的示例：

http://www.html5rocks.com/en/mobile/workingoffthegrid/#toc-appcache

…以及“侦听 XMLHttpRequest 失败”方法的示例：

http://www.html5rocks.com/en/mobile/workingoffthegrid/#toc-xml-http-request

HTH, – 乍得

原文由 thewoolleyman 发布，翻译遵循 CC BY-SA 4.0 许可协议