我正在尝试使用 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 调用。
目前在 2011 年，各个浏览器厂商在如何定义离线的问题上无法达成一致。一些浏览器具有离线工作功能，他们认为这与缺乏网络访问是分开的，这又与互联网访问不同。整件事都是一团糟。当实际网络访问丢失时，一些浏览器供应商会更新 navigator.onLine 标志，而另一些则不会。
从规范：
如果用户代理肯定离线（与网络断开连接），则返回 false。如果用户代理可能在线，则返回 true。
当该属性的值发生变化时，将触发 online 和 offline 事件。
如果当用户点击链接或脚本请求远程页面（或知道这样的尝试会失败）时用户代理不会联系网络，则 navigator.onLine 属性必须返回 false，否则必须返回 true。
最后，规范指出：
这个属性本质上是不可靠的。计算机可以连接到网络而无需访问 Internet。
主要的浏览器供应商对“离线”的含义有所不同。
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, -- 乍得
今天有一个开源 JavaScript 库可以完成这项工作：它被称为Offline.js.
自动向用户显示在线/离线指示。
https://github.com/HubSpot/offline
请务必查看完整的README。它包含您可以挂钩的事件。
这是一个测试页面。顺便说一下，它很漂亮/有一个很好的反馈用户界面！:)
Offline.js Simulate UI 是一个 Offline.js 插件，它允许您测试页面如何响应不同的连接状态，而不必使用暴力方法来禁用您的实际连接。
现在适用于所有主要浏览器的最佳方式是以下脚本：
(function () {
var displayOnlineStatus = document.getElementById("online-status"),
isOnline = function () {
displayOnlineStatus.innerHTML = "Online";
displayOnlineStatus.className = "online";
},
isOffline = function () {
displayOnlineStatus.innerHTML = "Offline";
displayOnlineStatus.className = "offline";
};
if (window.addEventListener) {
/*
Works well in Firefox and Opera with the
Work Offline option in the File menu.
Pulling the ethernet cable doesn't seem to trigger it.
Later Google Chrome and Safari seem to trigger it well
*/
window.addEventListener("online", isOnline, false);
window.addEventListener("offline", isOffline, false);
}
else {
/*
Works in IE with the Work Offline option in the
File menu and pulling the ethernet cable
*/
document.body.ononline = isOnline;
document.body.onoffline = isOffline;
}
})();
来源：http : //robertnyman.com/html5/offline/online-offline-events.html
最近，navigator.onLine在所有主要浏览器上显示相同，因此可用。
if (navigator.onLine) {
// do things that need connection
} else {
// do things that don't need connection
}
以正确方式支持此功能的最旧版本是：Firefox 41、IE 9、Chrome 14 和 Safari 5。
目前，这几乎代表了所有用户，但您应该始终检查页面的用户具有哪些功能。
在 FF 41 之前，它只会显示false用户是否手动将浏览器置于离线模式。在 IE 8 中，该属性位于body, 而不是window。
来源：caniuse