JavaScript 中怎么检测用户当前的联网状态与网络变化-js教程-PHP中文网

javascript 通过 navigator.online 属性和 online/offline 事件检测网络状态：navigator.online 返回布尔值表示浏览器判断的联网状态，但可能不准；需监听 online/offline 事件响应变化，并结合 fetch 探测真实连通性以增强可靠性。

javascript 中怎么检测用户当前的联网状态与网络变化

JavaScript 中检测用户当前联网状态与网络变化，主要依靠 navigator.onLine 属性和 online/offline 事件。

用 `navigator.onLine` 获取当前联网状态

该属性返回布尔值：true 表示浏览器认为设备已连接网络，false 表示离线。注意它只反映浏览器的“粗略判断”，比如 Windows 上断开网线或 macOS 关闭 Wi-Fi 时通常能准确识别，但连着 Wi-Fi 却无实际外网访问能力（如路由器未拨号、防火墙拦截）时仍可能返回 true。

使用方式很简单：

if (navigator.onLine) {
  console.log('设备显示在线');
} else {
  console.log('设备显示离线');
}

监听网络状态变化事件

页面可监听全局的 online 和 offline 事件，它们在浏览器检测到网络连接状态切换时触发：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

online：从离线恢复为在线时触发
offline：从在线变为离线时触发

建议在页面加载后尽早绑定，例如：

window.addEventListener('online', () => {
  console.log('网络已恢复');
  // 可在此重试失败请求、同步缓存数据等
});

window.addEventListener('offline', () => {
  console.log('网络已断开');
  // 可提示用户、暂停轮询、启用离线 UI 等
});

增强判断：结合真实请求验证连通性

仅依赖 navigator.onLine 不可靠。更稳妥的做法是发起一个轻量级探测请求（如 GET 自己的健康检查接口或 /favicon.ico），根据响应结果确认是否真能通信：

请求超时（如 3–5 秒）或返回非 2xx 状态码，视为实际不可用
可封装成函数，在进入 online 状态后主动探测一次，避免“假上线”
注意跨域限制，探测地址需同源或服务端配置 CORS

简单示例：

async function checkRealConnection() {
  try {
    const res = await fetch('/health', { method: 'HEAD', cache: 'no-store' });
    return res.ok;
  } catch {
    return false;
  }
}