navigator.online 是只读布尔属性,返回浏览器网络接口状态(true 表示有连接,false 表示离线),不验证实际服务器可达性;需结合 online/offline 事件监听状态变化,并避免误赋值或仅依赖其判断接口可用性。

JavaScript 中通过 navigator.onLine 属性读取当前浏览器的在线状态,并利用 online 和 offline 事件监听状态变化,但不能“修改”该状态——它是只读的系统属性。
读取当前在线状态
navigator.onLine 返回布尔值:true 表示浏览器认为自己在线(通常指有网络连接),false 表示离线。注意:它不验证是否能访问特定服务器或互联网,仅反映底层网络接口状态(如 Wi-Fi/以太网是否启用)。
使用方式很简单:
console.log(navigator.onLine); // true 或 false- 可在页面加载后立即检查,用于初始 UI 状态判断(例如显示“离线模式”提示)
监听在线/离线状态变化
浏览器在连接状态切换时会自动触发 online 和 offline 事件,可绑定到 window 对象上:
window.addEventListener('online', () => { console.log('已恢复联网'); });window.addEventListener('offline', () => { console.log('已断开网络'); });- 建议在页面初始化时注册,确保不会错过首次状态变更
实际使用中的注意事项
这个 API 简单但有局限性,需结合业务谨慎使用:
- 某些浏览器(如 Chrome)在开启飞行模式或禁用网卡时才准确返回
false;拔掉网线或断开 Wi-Fi 后可能仍返回true - 无法区分“有连接但无法访问服务器”和“完全断网”,如 DNS 故障、防火墙拦截等场景下
navigator.onLine仍为true - 若需更高精度,可配合定时 fetch 检测某个可靠端点(如
/health或https://www.google.com/generate_204)来辅助判断
常见误操作提醒
以下做法是无效或错误的:
-
navigator.onLine = false;—— 该属性不可写,赋值会被忽略 - 仅依赖
onLine判断接口是否可用 —— 应在发起关键请求前做兜底探测或失败后降级处理 - 未移除事件监听器就卸载组件 —— 可能导致内存泄漏,尤其在 SPA 中建议在销毁时调用
removeEventListener
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











