如何使用jQuery检查网络连接是否存在？

在关闭</body>标签之前插入以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

如果您想要一个更强大的解决方案，可以尝试以下方法：

var online = navigator.onLine;

关于离线Web应用的W3C规范，然而要注意，这在现代的Web浏览器中效果最佳，在较旧的Web浏览器中可能无法正常工作。

另外，向自己的服务器发送XHR请求也不是一个坏的测试连接性的方法。考虑到其他答案指出，XHR存在太多的故障点，如果在建立连接时XHR存在问题，那么在日常使用中也会存在问题。如果您的网站由于任何原因无法访问，那么同一台服务器上运行的其他服务也可能无法访问。这个决定取决于您。

我不建议向其他服务发送XHR请求，甚至是google.com。向您的服务器发送请求，或者不发送请求。

“在线”是什么意思？

关于“在线”是什么意思似乎存在一些混淆。请考虑到互联网是一组网络，但有时您在VPN上，无法访问“整个”互联网或者万维网。通常，公司有自己的网络，与其他外部网络的连接性有限，因此您可能被认为是“在线”的。在线只意味着您连接到一个网络，而不是您尝试连接的服务的可用性或可达性。

要确定某个主机是否可从您的网络访问，可以执行以下操作：

function hostReachable() {
  // 处理IE和更高版本的浏览器
  var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
  // 打开一个新的请求，作为一个HEAD请求到根主机名，并带有一个随机参数来清除缓存
  xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
  // 发出请求并处理响应
  try {
    xhr.send();
    return ( xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304) );
  } catch (error) {
    return false;
  }
}

您也可以在这里找到该Gist： https://gist.github.com/jpsilvashy/5725579

关于本地实现的详细信息

有些人评论说：“我一直返回false”。这是因为您可能正在本地服务器上测试它。无论您向哪个服务器发出请求，您都需要能够对HEAD请求进行响应，当然，如果您愿意，可以将其更改为GET请求。

navigator.onLine，我上次检查是IE浏览器上可用的，因此对于不支持navigator.onLine的浏览器，使用您提到的XHR请求。

不，它在Firefox中可用：developer.mozilla.org/En/DOM/Window.navigator.onLine

它也适用于Safari/WebKit/Chrome和Opera。但是应该指出，它不检查您是否具有Internet连接-只检查您是否连接到一个网络。这是一个非常简单和不精确的测试。

问题是不同的浏览器开发者无法决定“在线”是什么意思。

始终返回false。

我想指出，这在本地开发环境中可能无法正常工作，这取决于您的网络配置。

对于世界其他地方（以及路由器和防火墙供应商）来说，“在线”意味着能够连接到互联网（即网站）。从技术上讲，这意味着您将能够连接到超出您的ISP的服务器/服务，或者至少连接到它（如果您无法超出该范围，则是另一个问题）。为了消除任何混淆，您应该引入类似navigator.onNetwork的东西。

.21gigawatts，这不对，能够访问网站与您的ISP没有任何直接关系，您可以在内部网络中托管一个仅供内部网络用户使用而不是WAN用户使用的网站。

- 我的意思是，人们把互联网等同于在线。您正在谈论的是一个内部网络。人们不将内部网络视为在线。我说的是我们社会的术语是在线表示连接到世界其他地方。

.21gigawatts，好的，那是真的。

navigator.onLine非常不可靠，如果您有一个虚拟网络适配器，比如kerioVPN，您需要断开该虚拟适配器和所有其他网络适配器，才能将navigator.onLine更改为false。

这个问题在我的回答中已经解决了。

是的，您的回答是完整的，请参阅我刚刚关于返回语句和在"and"条件中使用"or"的编辑...

Chrome现在会引发这个弃用警告：“主线程上的同步XMLHttpRequest已被弃用，因为它对最终用户的体验有害。更多帮助，请查看xhr.spec.whatwg.org”

var online = navigator.onLine;，这是解决Firefox缓存问题的一个很好的解决方案。如果您不希望在Firefox处于offline状态时缓存和显示您的HTML页面，请使用此方法。

多么美妙的语言，其中isNan(undefined===true，并且浏览器开发人员（我对Webkit的期望更高）甚至不能决定术语“在线”是什么意思。在我看来，这听起来像是懒惰的开发。

此外，如果要检查外部主机，请求主机需要启用CORS。

浏览器中的navigator.onLine告诉您您的设备是否与任何网络连接，而不是特定于互联网。这意味着如果您的互联网连接断开，但网络保持连接，应用程序仍然会认为它在线。

我已经概述了连接到网络与确定主机名是否可达之间的区别。