如何使用 jQuery 检查是否有 Internet 连接？这样我可以有一些条件说“在生产过程中使用谷歌缓存的 JQuery 版本，在开发过程中使用该版本或本地版本，具体取决于互联网连接”。
问问题
251778 次
9 回答
271
针对您的具体情况的最佳选择可能是：
就在您的关闭</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 浏览器中效果最好，在旧的 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;
}
}
你也可以在这里找到要点：https ://gist.github.com/jpsilvashy/5725579
本地实施细节
有人评论说，“我总是被退回假”。那是因为您可能正在本地服务器上对其进行测试。无论您向哪个服务器发出请求，您都需要能够响应 HEAD 请求，如果您愿意，当然可以将其更改为 GET。
于 2010-03-05T02:40:43.890 回答
41
好吧，也许游戏有点晚了，但是用在线图像检查呢？我的意思是，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 美分
于 2010-11-09T22:43:24.630 回答
15
5年后版本：
今天，如果您不想深入了解本页描述的不同方法的本质，这里有适合您的 JS 库。
其中一个是https://github.com/hubspot/offline。它检查预定义 URI 的连接性，默认情况下是您的 favicon。它会自动检测用户的连接何时重新建立并提供简洁的事件，如up和down，您可以绑定到这些事件以更新您的 UI。
于 2010-03-05T02:31:50.590 回答
6
您可以模仿 Ping 命令。
使用 Ajax 向您自己的服务器请求时间戳，使用 setTimeout 将计时器定义为 5 秒，如果没有响应则重试。
如果 4 次尝试都没有响应，则可以认为 Internet 已关闭。
因此，您可以定期检查是否使用此例程，例如 1 或 3 分钟。
对我来说，这似乎是一个很好且干净的解决方案。
于 2012-01-21T16:28:16.027 回答
1
您可以尝试发送几次 XHR 请求，然后如果您收到错误，则表示互联网连接存在问题。
于 2010-03-05T02:27:47.057 回答
0
我为此编写了一个 jQuery 插件。默认情况下，它会检查当前 URL（因为它已经从 Web 加载过一次），或者您可以指定要用作参数的 URL。总是向谷歌发出请求并不是最好的主意，因为它在不同的国家在不同的时间被阻止。此外，您可能会受到那天特定海洋/天气/政治气候之间的联系的摆布。
于 2012-05-25T18:51:04.713 回答
-3
我有一个解决方案，可以在这里检查互联网连接是否存在：
$.ajax({
url: "http://www.google.com",
context: document.body,
error: function(jqXHR, exception) {
alert('Offline')
},
success: function() {
alert('Online')
}
})
于 2014-01-30T15:16:25.733 回答
-4
发送 XHR 请求很糟糕，因为如果该特定服务器关闭，它可能会失败。相反，使用 googles API 库来加载他们缓存的 jQuery 版本。
您可以在加载 jQuery 后使用 googles API 执行回调，这将检查 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 文档可以在这里找到。
于 2010-03-05T02:32:19.773 回答
-5
一个更简单的解决方案：
<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 脚本，从而导致引发异常的错误。
于 2013-07-17T19:06:48.280 回答