Javascript如何检测网络状态_如何监听在线离线？

JavaScript检测网络状态主要依靠navigator.onLine属性和online/offline事件，但该属性仅反映浏览器连接感知而非真实连通性；需结合轻量HTTP探测增强判断，并注意移动端兼容性与初始化不准等问题。

JavaScript 检测网络状态主要依靠 navigator.onLine 属性和 online/offline 事件，但要注意它只反映浏览器的“连接感知”，不是真实网络连通性（比如能连 WiFi 但无法访问服务器时仍可能返回 true）。

读取当前在线状态

使用 navigator.onLine 可立即获取浏览器认为的当前状态：

• true 表示浏览器认为设备已连接网络（如接入了 Wi-Fi、以太网或移动数据）
• false 表示浏览器明确检测到离线（如飞行模式开启、网络适配器禁用）

注意：该属性不发起任何网络请求，也不验证是否能访问互联网或特定服务。

监听 online/offline 事件

在 window 上监听这两个事件，可响应网络状态变化：

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

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

事件触发时机取决于浏览器实现，通常在系统网络接口状态变化时触发（如断开 Wi-Fi、拔掉网线），但存在延迟或漏触发可能。

增强判断：发起轻量探测请求

为弥补 navigator.onLine 的局限性，可搭配一个快速 HTTP 请求（如对自身域名或可靠 CDN 的 /health 或空响应端点）：

• 建议用 fetch() 配合短超时（如 2–3 秒）和 no-cors 安全限制允许的简单 GET
• 若请求失败（网络错误、超时、非 2xx 响应），更可信地判定为“实际不可用”
• 避免高频探测，可结合事件触发后主动检查，或按需手动刷新状态

注意事项与常见误区

不要依赖 onLine 单独判断服务可用性 —— 它无法区分“有网但 DNS 失败”、“有网但防火墙拦截”、“有网但 API 服务宕机”等情况。

页面加载时 onLine 可能不准 —— 某些浏览器在页面初始化阶段尚未完成网络探测，首次读取可能为 false，建议稍作延迟再读或结合事件监听。

移动端行为差异较大 —— iOS Safari 对 offline 事件支持较弱，部分 Android 浏览器在网络切换瞬间可能不触发事件，需降级处理。