JS判断网络连接状态：navigator.onLine、Ajax与图片加载方案详解

本文介绍在浏览器中使用JavaScript判断当前网络连接状态的四种常见方法。重点分析navigator.onLine属性的局限性，即其仅反映本地连接而非真实外网连通性。同时探讨通过Ajax请求、动态加载图片资源以及监听online/offline事件来实现更准确网络状态检测的原理与代码实现。

在Web开发中，准确判断用户的网络连接状态是提升用户体验的关键环节。以下是几种利用JavaScript在浏览器环境中检测当前网络状态的常用方法：

使用 navigator.onLine 属性

1. 使用 navigator.onLine 属性

2. 通过 Ajax 请求验证连通性

3. 尝试获取网络资源（如图片）

4. 绑定 online/offline 事件监听

1. 使用 navigator.onLine 属性

最直接的方式是利用 navigator.onLine 属性来检查当前的网络状态：


if(navigator.onLine){
 ...
}else{
 ...
}

该方法实现简单，但根据 MDN 文档的描述，其准确性存在显著缺陷：

navigator.onLine 属性仅在设备未连接到局域网或路由器时返回 false，而在其他所有连接情况下均返回 true。

这意味着，只要设备成功连接到路由器或局域网，即使路由器本身未接入互联网，navigator.onLine 依然会返回 true，导致误判。

通过 Ajax 请求验证连通性

2. 通过 Ajax 请求验证连通性

可以采用 GET 请求的方式，根据请求是否成功返回数据来判断当前的网络连通状态：


$.ajax({
 url: 'x.html',
 success: function(result){
  ...
 }, 
 error: function(result){
  ...
 }
});

尝试获取网络资源

3. 尝试获取网络资源

其原理与方法2类似，可以在页面中放置一张隐藏图片，并设置其 onerror 事件处理函数（当图片资源加载失败时触发）：


<script src="./jquery-3.1.1.min.js"></script>
<script>
function getImgError(){
 alert("Network disconnect!");
}
$().ready(function(){
 $("#btn-test").click(function(){
  var imgPath = "https://www.baidu.com/img/bd_logo1.png";
  var timeStamp = Date.parse(new Date());
  $("#img-test").attr("src", imgPath + "?timestamp=" + timeStamp);
 });
});
</script>
<body>
 <img id="img-test" style="display:none;" onerror="getImgError()"/>
 <button id="btn-test">check status</button>
</body>

每次点击按钮时，更新该隐藏图片的 src 属性。如果图片加载失败，则判定为网络连接中断：

这种检测方式的准确性高度依赖于所引用图片资源的稳定性。若图片服务器本身不可用，即使本地网络正常也会误判为断网。

绑定 online/offline 事件

4. 绑定 online/offline 事件

其原理与方法1类似，通过监听窗口事件来更新内部状态变量：


var netStatue = true;
$(window).bind('online', function(){
 netStatue = true;
});
$(window).bind('offline', function(){
 netStatue = false;
});
...
if(netStatue){
 ...
}else{
 ...
}

以上即为本文介绍的全部内容，希望这些方法能对您的学习有所帮助。如果您觉得有用，欢迎支持本站。

JavaScript判断网络状态的四种实现方案与局限性分析

使用 navigator.onLine 属性

通过 Ajax 请求验证连通性

尝试获取网络资源

绑定 online/offline 事件

实用工具推荐