5年后的版本:

今天，如果你不想深入了解本页所描述的不同方法的细节，就可以找到适合你的JS库。

其中一个是https://github.com/hubspot/offline。它检查预定义URI的连通性，默认情况下是您的favicon。当用户的连接重新建立时，它会自动检测，并提供up和down等整洁的事件，您可以将其绑定以更新UI。

你可以尝试发送XHR请求几次，然后如果你得到错误，这意味着有一个问题与互联网连接。

5年后的版本:

今天，如果你不想深入了解本页所描述的不同方法的细节，就可以找到适合你的JS库。

其中一个是https://github.com/hubspot/offline。它检查预定义URI的连通性，默认情况下是您的favicon。当用户的连接重新建立时，它会自动检测，并提供up和down等整洁的事件，您可以将其绑定以更新UI。

您可以模拟Ping命令。

使用Ajax请求一个时间戳到你自己的服务器，定义一个计时器使用setTimeout到5秒，如果没有响应它再试一次。

如果4次尝试都没有响应，你可以假设网络坏了。

所以你可以每隔一到三分钟就检查一下。

对我来说，这似乎是一个很好的干净的解决方案。

发送XHR请求很糟糕，因为如果特定的服务器宕机，它可能会失败。相反，使用google的API库来加载他们的jQuery缓存版本。

你可以使用google API在加载jQuery后执行回调，这将检查jQuery是否加载成功。类似下面的代码应该可以工作:

<script type="text/javascript">
    google.load("jquery");

    // Call this function when the page has been loaded
    function test_connection() {
        if($){
            //jQuery WAS loaded.
        } else {
            //jQuery failed to load.  Grab the local copy.
        }
    }
    google.setOnLoadCallback(test_connection);
</script>

谷歌API文档可以在这里找到。

针对您的具体情况，最好的选择可能是:

在close </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>

考虑到您的问题是围绕jQuery的，这可能是最简单的方法。

如果你想要一个更健壮的解决方案，你可以尝试:

var online = navigator.onLine;

阅读更多关于离线web应用的W3C规范，但是请注意，这将在现代web浏览器中运行得最好，在旧的web浏览器中这样做可能无法正常工作，或者根本无法正常工作。

另外，向您自己的服务器发送XHR请求也不是一种测试连接的糟糕方法。考虑到其他答案之一，XHR有太多的故障点，如果你的XHR在建立连接时有缺陷，那么它在日常使用中也会有缺陷。如果您的站点由于某种原因无法访问，那么在同一服务器上运行的其他服务也可能无法访问。这个决定由你决定。

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

“在线”是什么意思?

There seems to be some confusion around what being "online" means. Consider that the internet is a bunch of networks, however sometimes you're on a VPN, without access to the internet "at-large" or the world wide web. Often companies have their own networks which have limited connectivity to other external networks, therefore you could be considered "online". Being online only entails that you are connected to a network, not the availability nor reachability of the services you are trying to connect to.

要确定一个主机是否可以从您的网络访问，您可以这样做:

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。