JavaScript中如何检测用户是否在线？

在前端开发中，判断用户的在线状态是很常见的需求，比如表单提交时提前校验网络、离线状态下引导用户等待重连等。下面介绍几种JavaScript中实现在线检测的方法。

一、使用navigator.onLine属性

浏览器全局的navigator对象提供了onLine属性，这是一个布尔值，true表示当前浏览器认为是在线状态，false表示离线。

这个属性可以直接读取，适合在页面初始化时判断初始网络状态，示例代码如下：

// 判断当前是否在线
function checkOnlineStatus() {
  if (navigator.onLine) {
    console.log("当前处于在线状态");
    return true;
  } else {
    console.log("当前处于离线状态");
    return false;
  }
}

// 页面加载时检测
checkOnlineStatus();

不过要注意，navigator.onLine的判断逻辑是浏览器自身的，有些情况下可能不够准确，比如浏览器连接了不可用的WiFi时，也可能返回true。

二、监听网络状态变化事件

如果需要在用户的网络状态发生变化时实时更新状态，可以监听online和offline两个事件，这两个事件会在浏览器的网络状态切换时触发。

示例代码如下：

// 监听上线事件
window.addEventListener("online", function() {
  console.log("网络已恢复，当前在线");
  // 这里可以执行重新请求、提示用户等操作
});

// 监听下线事件
window.addEventListener("offline", function() {
  console.log("网络已断开，当前离线");
  // 这里可以执行保存本地数据、提示用户离线等操作
});

这两个事件可以和navigator.onLine配合使用，先获取初始状态，再实时监听变化，就能完整覆盖网络状态的判断场景。

三、结合网络请求做精准校验

如果navigator.onLine的结果不满足需求，还可以通过发送轻量的网络请求来校验真实的可达性，比如请求一个小的静态资源或者接口，根据请求是否成功判断网络状态。

示例代码如下：

// 发送请求校验网络是否真的可达
function verifyOnline() {
  // 请求一个小的静态资源，避免占用过多带宽
  fetch("https://ipipp.com/small-check", { 
    method: "HEAD",
    cache: "no-cache"
  })
    .then(function(response) {
      if (response.ok) {
        console.log("网络可达，真实在线");
      } else {
        console.log("网络连接异常");
      }
    })
    .catch(function() {
      console.log("请求失败，当前可能离线");
    });
}

// 可以定时执行校验，或者结合状态变化事件触发
setInterval(verifyOnline, 30000);

这种方式的结果更准确，但是会增加额外的请求开销，建议根据实际场景选择是否使用，比如对网络状态准确性要求高的场景可以采用，普通场景用前两种方法就足够。

注意事项

• navigator.onLine和事件监听的兼容性很好，现代浏览器都支持，不需要额外做兼容处理。
• 网络状态判断只是参考，不要完全依赖单一方法，重要操作建议做失败重试机制。
• 离线场景下可以使用localStorage或者IndexedDB暂存用户数据，等网络恢复后再同步。

JavaScript在线检测navigator_onLine网络状态online事件修改时间：2026-05-29 23:34:17