JavaScript 通过 window 的 online/offline 事件监听网络状态变化，需配合 navigator.onLine 获取当前状态；事件仅在状态改变时触发，不提供初始状态，且 navigator.onLine 可能误报，实际应用需轻量探测和兜底处理。
JavaScript 中用 BOM 的 online 和 offline 事件监听网络状态变化，核心是绑定到 window 对象上，响应系统级连接切换，而非轮询或猜测。
监听网络状态切换的基本写法
这两个事件只在连接状态**发生改变时触发**（比如从有网变没网，或断网后重连），不会在页面加载时自动触发。推荐使用标准的 addEventListener：
-
监听上线：
window.addEventListener('online', () => { console.log('已恢复联网'); }); -
监听离线：
window.addEventListener('offline', () => { console.log('网络已断开'); }); - 事件对象本身不携带额外信息，实际状态仍需通过
navigator.onLine确认
为什么不能只靠事件，还要配合 navigator.onLine
事件只告诉你“变了”，但不告诉你“现在是什么状态”。例如页面刚打开时，你不知道初始是在线还是离线，必须主动读取：
- 页面加载完成时立即检查：
console.log('当前在线？', navigator.onLine); - 把事件回调和初始判断统一成一个函数，避免重复逻辑
- 注意：
navigator.onLine是只读属性，值由操作系统提供，可能误报（如连着无外网的 Wi-Fi 仍返回true）
实际应用中的关键细节
真实项目中直接用事件+属性还不够可靠，需要补充验证逻辑：
立即学习“Java免费学习笔记（深入）”；
- 离线时可暂停同步、启用本地缓存、显示友好提示
- 上线后不要立刻重试所有失败请求，建议先发一次轻量探测（如
fetch('/health.txt', { cache: 'no-store', signal: AbortSignal.timeout(3000) })） - 避免在
online回调里做耗时操作，防止阻塞主线程 - 移动端尤其要注意：切后台再切回前台时，
online事件不一定触发，需结合 visibilitychange 做兜底
兼容性与降级处理
现代浏览器均支持 addEventListener 绑定 online/offline，IE8 及更早版本需用 attachEvent('ononline')，但目前已可忽略。不需要 polyfill，但建议加一层安全判断：
if ('onLine' in navigator) { /* 启用监听逻辑 */ }- 不支持时可退回到定时检查
navigator.onLine（不推荐高频轮询，间隔至少 10 秒）
