只需使用导航器。如果这是真的，那么你是在线的，否则离线

如何发送一个不透明的http请求到google.com与无cors?

    fetch('https://google.com', {
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'no-cors',
    }).then((result) => {
        console.log(result)
    }).catch(e => {
        console.error(e)
    })

设置no-cors的原因是，即使在我的pc上取消网络连接时，我也收到了cors错误。所以不管有没有网络连接，我都被封锁了。添加no-cors使请求不透明，这显然似乎绕过cors，并允许我只是简单地检查我是否可以连接到谷歌。

供参考:我在这里使用fetch进行http请求。 https://www.npmjs.com/package/fetch

下面是我拥有的一个辅助实用程序片段。这是带名称空间的javascript:

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

你应该使用这个方法检测，否则发射一个'替代'的方式来做这件事。这将是我们所需要的全部。其他的方法是hack。

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

标准的方法是重试请求几次。如果没有通过，请提醒用户检查连接，然后优雅地失败。

旁注:将整个应用程序置于“脱机”状态可能会导致大量易出错的处理状态工作。无线连接可能来来去去，等等。因此，最好的办法可能是优雅地失败，保存数据，并提醒用户。允许他们最终解决连接问题(如果有的话)，并在一定程度上原谅他们继续使用你的应用。

旁注:您可以检查像谷歌这样的可靠站点的连接性，但这可能并不完全有用，因为只是尝试发出自己的请求，因为虽然谷歌可能可用，但您自己的应用程序可能不可用，并且您仍然必须处理自己的连接问题。尝试向谷歌发送ping信息是确认网络连接本身已中断的好方法，因此如果该信息对您有用，那么可能值得费心。

Sidenote: Sending a Ping could be achieved in the same way that you would make any kind of two-way ajax request, but sending a ping to google, in this case, would pose some challenges. First, we'd have the same cross-domain issues that are typically encountered in making Ajax communications. One option is to set up a server-side proxy, wherein we actually ping google (or whatever site), and return the results of the ping to the app. This is a catch-22 because if the internet connection is actually the problem, we won't be able to get to the server, and if the connection problem is only on our own domain, we won't be able to tell the difference. Other cross-domain techniques could be tried, for example, embedding an iframe in your page which points to google.com, and then polling the iframe for success/failure (examine the contents, etc). Embedding an image may not really tell us anything, because we need a useful response from the communication mechanism in order to draw a good conclusion about what's going on. So again, determining the state of the internet connection as a whole may be more trouble than it's worth. You'll have to weight these options out for your specific app.

我知道这个问题已经被回答了，但我想补充我的10美分，解释什么是更好的，什么不是。

Window.navigator.onLine

我注意到一些回答提到了这个选项，但他们从来没有提到任何关于警告的内容。

这个选项涉及到“window.navigator”的使用。这是浏览器导航界面下的一个属性，在大多数现代浏览器上可用。它真的不是一个可行的选择，因为首先它是以浏览器为中心的，其次大多数浏览器实现这个属性的方式不同。

In Firefox: The property returns a boolean value, with true meaning online and false meaning offline but the caveat here is that "the value is only updated when the user follows links or when a script requests a remote page." Hence if the user goes offline and you query the property from a js function or script, the property will always return true until the user follows a link. In Chrome and Safari: If the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected".

上面的语句只是想让您知道，仅靠浏览器是无法判断的。所以基本上这个选项是不可靠的。

向自己的服务器资源发送请求

This involves making HTTP request to your own server resource and if reachable assume internet availability else the user is offline. There are some few caveats to this option.

没有服务器可用性是100%依赖的，因此如果由于某种原因您的服务器不可达，它会错误地假设用户离线，而他们连接到互联网。 对同一资源的多个请求可以返回缓存的响应，这使得http响应结果不可靠。

如果你同意你的服务器一直在线，那么你可以选择这个选项。

下面是一个获取自己资源的简单代码片段:

// This fetches your website's favicon, so replace path with favicon url
// Notice the appended date param which helps prevent browser caching.
fetch('/favicon.ico?d='+Date.now())
  .then(response => {
    if (!response.ok)
      throw new Error('Network response was not ok');

   // At this point we can safely assume the user has connection to the internet
        console.log("Internet connection available"); 
  })
  .catch(error => {
  // The resource could not be reached
        console.log("No Internet connection", error);
  });

向第三方服务器资源发送请求

We all know CORS is a thing.

该选项包括向外部服务器资源发出HTTP请求，如果可以到达，则假设internet可用，否则用户处于脱机状态。主要的警告是跨来源的资源共享，这是一个限制。大多数信誉良好的网站会阻止CORS请求，但对一些网站来说，你可以随心所欲。

下面是一个获取外部资源的简单代码片段，与上面相同，但使用外部资源url:

// Firstly you trigger a resource available from a reputable site
// For demo purpose you can use the favicon from MSN website
// Also notice the appended date param which helps skip browser caching.
fetch('https://static-global-s-msn-com.akamaized.net/hp-neu/sc/2b/a5ea21.ico?d='+Date.now())
  .then(response => {
  // Check if the response is successful
    if (!response.ok)
      throw new Error('Network response was not ok');

// At this point we can safely say the user has connection to the internet
        console.log("Internet available"); 
  })
  .catch(error => {
  // The resource could not be reached
        console.log("No Internet connection", error);
  });

所以，最后对于我的个人项目，我选择了第二个选项，这涉及到请求自己的服务器资源，因为基本上有很多因素来判断是否有“互联网连接”在用户的设备上，不仅仅是从你的网站容器单独或从一个有限的浏览器api。

请记住，您的用户也可能处于某些网站或资源被封锁、禁止和不可访问的环境中，这反过来又会影响连接检查的逻辑。最好的选择是:

尝试访问你自己服务器上的资源，因为这是你的用户环境(通常我使用网站的favicon，因为响应非常轻，它不经常更新)。 如果没有连接到资源，当你需要通知用户时，简单地说“连接错误”或“连接丢失”，而不是假设一个宽泛的“没有互联网连接”，这取决于许多因素。

几乎所有主流浏览器现在都支持window.navigator. online属性，以及相应的在线和离线窗口事件。运行以下代码片段来测试它:

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文档中的这段话:

In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking. In Firefox and Internet Explorer, switching the browser to offline mode sends a false value. Until Firefox 41, all other conditions return a true value; since Firefox 41, on OS X and Windows, the value will follow the actual network connectivity.

(重点是我自己的)

这意味着如果window.navigator.onLine为false(或者您得到一个脱机事件)，则保证您没有Internet连接。

然而，如果它是真的(或者你得到一个在线事件)，它充其量只意味着系统连接到某个网络。这并不意味着你可以上网。要检查这一点，您仍然需要使用其他答案中描述的解决方案之一。

我最初打算把这篇文章作为格兰特·瓦格纳(Grant Wagner)的回答的更新，但这似乎太过编辑了，尤其是考虑到2014年的更新已经不是他的了。