检查Internet连接是否存在Javascript？

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离线网络应用程序规范的更多信息,但请注意,这在现代Web浏览器中效果最佳,使用较旧的Web浏览器可能无法按预期工作,或根本无法工作.

或者,对您自己的服务器的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;
  }

}

你也可以在这里找到Gist: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分钟.

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