检测到互联网连接处于脱机状态？

现在，几乎所有主流浏览器都支持 window.navigator.onLine 属性以及相应的和窗口事件。运行以下代码段对其进行测试：onlineoffline

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

<button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br />
Check the console below for results:

尝试将系统或浏览器设置为脱机/联机模式，并检查日志或属性中是否有值更改。window.navigator.onLine

但请注意Mozilla文档中的这段话：

在Chrome和Safari中，如果浏览器无法连接到局域网（LAN）或路由器，则它是离线的;所有其他条件返回 。因此，虽然您可以假设浏览器在返回 false 值时处于脱机状态，但您不能假设 true 值必然意味着浏览器可以访问 Internet。您可能会收到误报，例如，如果计算机运行的虚拟化软件具有始终“连接”的虚拟以太网适配器。因此，如果您真的想确定浏览器的在线状态，则应开发其他检查方法。true

在 Firefox 和 Internet Explorer 中，将浏览器切换到脱机模式会发送一个值。在 Firefox 41 之前，所有其他条件都返回一个值;自Firefox 41以来，在OS X和Windows上，该值将遵循实际的网络连接。falsetrue

（强调的是我自己的）

这意味着，如果是（或者您收到事件），则保证您没有互联网连接。window.navigator.onLinefalseoffline

但是，如果是（或者您收到事件），则仅意味着系统充其量连接到某个网络。例如，这并不意味着您可以访问互联网。要检查这一点，您仍然需要使用其他答案中描述的解决方案之一。trueonline

_{我最初打算将此作为格兰特·瓦格纳（Grant Wagner）答案的更新，但这似乎太过编辑，特别是考虑到2014年的更新已经不是来自他。}

您可以通过发出失败的 XHR 请求来确定连接是否丢失。

标准方法是重试请求几次。如果它没有通过，请提醒用户检查连接，并正常失败。

附注：将整个应用程序置于“脱机”状态可能会导致大量容易出错的处理状态工作。无线连接可以来来去去，等等。因此，您最好的选择可能是优雅地失败，保留数据并提醒用户。允许他们最终解决连接问题（如果有的话），并继续使用您的应用程序并获得相当多的宽恕。

附注：您可以检查像Google这样的可靠站点的连接性，但这可能并不完全有用，因为只是尝试提出自己的请求，因为虽然Google可能可用，但您自己的应用程序可能不可用，并且您仍然必须处理自己的连接问题。尝试向Google发送ping将是确认互联网连接本身已关闭的好方法，因此，如果该信息对您有用，那么可能值得麻烦。

旁注：发送Ping可以像您发出任何类型的双向ajax请求一样实现，但是在这种情况下，向Google发送ping会带来一些挑战。首先，我们会遇到与进行Ajax通信时通常遇到的相同的跨域问题。一种选择是设置一个服务器端代理，其中我们实际上谷歌（或任何网站），并将ping的结果返回给应用程序。这是一个陷阱22，因为如果互联网连接实际上是问题所在，我们将无法访问服务器，如果连接问题仅在我们自己的域上，我们将无法区分。可以尝试其他跨域技术，例如，在页面中嵌入指向 google.com 的 iframe，然后轮询 iframe 以查找成功/失败（检查内容等）。嵌入图像可能并不能真正告诉我们任何事情，因为我们需要来自通信机制的有用响应，以便对正在发生的事情得出一个很好的结论。因此，再次确定整个互联网连接的状态可能比它的价值更麻烦。您必须针对您的特定应用对这些选项进行加权。ping