Question

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

Answer 1

针对您具体案例的最佳选择可能是：

在您关闭</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;

了解有关W3C's spec on offline web apps的更多信息，但请注意，这在现代网络浏览器中效果最佳，使用较旧的网络浏览器可能无法按预期工作，或者根本无法使用。

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

我不建议向其他人的服务提出XHR请求，即使是google.com也是如此。向服务器发出请求，或者根本不发送请求。

“在线”是什么意思？

对于“在线”的含义似乎存在一些混淆。考虑到互联网是一堆网络，但有时你在VPN上，无法访问互联网“一般”或万维网。公司通常拥有自己的网络，这些网络与其他外部网络的连接有限，因此您可以被视为“在线”。在线只需要您连接到网络，而不是您尝试连接的服务的可用性和可达性。

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

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。

Answer 2

好的，也许游戏有点晚了但是用在线图片查看呢？我的意思是，OP需要知道他是否需要抓取Google CMD或本地JQ副本，但这并不意味着浏览器无论如何都无法读取Javascript，对吧？

<script>
function doConnectFunction() {
// Grab the GOOGLE CMD
}
function doNotConnectFunction() {
// Grab the LOCAL JQ
}

var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
// CHANGE IMAGE URL TO ANY IMAGE YOU KNOW IS LIVE
i.src = 'http://gfx2.hotmail.com/mail/uxp/w4/m4/pr014/h/s7.png?d=' + escape(Date());
// escape(Date()) is necessary to override possibility of image coming from cache
</script>

只需2美分

Answer 3

5年后 - 版本：

今天，如果您不想深入了解本页所述不同方法的细节，那么有适合您的JS库。

这些是https://github.com/hubspot/offline。它会检查预定义URI的连接，默认情况下是您的favicon。它会自动检测用户连接何时重新建立，并提供up和down之类的整洁事件，您可以绑定这些事件以更新UI。

Answer 4

您可以模仿Ping命令。

使用Ajax向您自己的服务器请求时间戳，使用setTimeout将计时器定义为5秒，如果没有响应则再次尝试。

如果4次尝试没有响应，您可以认为互联网已关闭。

因此，您可以定期检查此例程，例如1或3分钟。

这对我来说似乎是一个很好的清洁解决方案。

Answer 5

您可以尝试发送XHR请求几次，然后如果您收到错误，则表示互联网连接存在问题。

编辑： ~~我发现this JQuery script正在做你要求的事情，但我没有测试过。~~

Answer 6

我为此做了一个jQuery插件。默认情况下，它会检查当前URL（因为它已经从Web加载过一次），或者您可以指定用作参数的URL。始终向Google提出请求不是最好的主意，因为它在不同时间在不同国家/地区被屏蔽。此外，您可能会受到特定海洋/天气预报/政治气候与当天的联系的影响。

http://tomriley.net/blog/archives/111

Answer 7

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

您可以使用googles 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>

可以找到google API文档here。

Answer 8

我有一个解决方案谁在这里工作，检查是否存在互联网连接：

$.ajax({
    url: "http://www.google.com",
    context: document.body,
    error: function(jqXHR, exception) {
        alert('Offline')
    },
    success: function() {
        alert('Online')
    }
})

Answer 9

一个更简单的解决方案：

<script language="javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>

以及稍后的代码：

var online;
// check whether this function works (online only)
try {
  var x = google.maps.MapTypeId.TERRAIN;
  online = true;
} catch (e) {
  online = false;
}
console.log(online);

如果不在线，则不会加载Google脚本，从而导致出现异常错误。

检查Internet连接是否存在Javascript？

9 个答案:

“在线”是什么意思？