使用 jQuery 检查互联网连接是否存在？ [复制]

如何使用 jQuery 检查是否有互联网连接？这样我就可以有一些条件说“在生产过程中使用 google 缓存版本的 JQuery，在开发过程中使用该版本或本地版本，具体取决于互联网连接”。

针对您的具体情况的最佳选择可能是：

就在您结束之前</body> tag:

<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>

鉴于您的问题集中在 jQuery 上，这可能是最简单的方法。

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

var online = navigator.onLine;

阅读更多关于W3C 关于离线网络应用程序的规范，但请注意，这在现代 Web 浏览器中效果最佳，而在较旧的 Web 浏览器中这样做可能无法按预期工作，或者根本无法工作。

或者，向您自己的服务器发出 XHR 请求对于测试连接性来说并不是那么糟糕的方法。考虑到其他答案之一指出 XHR 存在太多故障点，如果您的 XHR 在建立连接时存在缺陷，那么无论如何在日常使用过程中它也会存在缺陷。如果您的站点由于任何原因无法访问，那么在同一服务器上运行的其他服务也可能无法访问。这个决定取决于你。

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

“在线”是什么意思？

对于“在线”的含义似乎有些混乱。考虑到互联网是一堆网络，但有时您使用 VPN，无法访问“普通”互联网或万维网。通常，公司拥有自己的网络，与其他外部网络的连接有限，因此您可以被视为“在线”。在线仅意味着您已连接到a网络，而不是您尝试连接的服务的可用性或可达性。

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

function hostReachable() {

  // Handle IE and more capable browsers
  var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );

  // Open new request as a HEAD to the root hostname with a random param to bust the cache
  xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );

  // Issue request and handle response
  try {
    xhr.send();
    return ( xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304) );
  } catch (error) {
    return false;
  }

}

您还可以在这里找到要点：https://gist.github.com/jpsilvashy/5725579

本地实施细节

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