Javascript如何检测网络状态_如何监听在线离线？-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-12-21 20:14:02

原创

888人浏览过

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

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

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

读取当前在线状态

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

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

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

监听 online/offline 事件

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

立即学习“Java免费学习笔记（深入）”；

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

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

登录后复制

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