JavaScript 通过 window.addEventListener 监听 online/offline 事件并结合 navigator.onLine 属性判断网络状态，适用于重试请求、保存草稿等场景，但需注意其仅反映设备网络接口连接状态而非服务器可达性。
JavaScript 监听网络状态变化，主要靠浏览器原生提供的 online 和 offline 事件，配合 navigator.onLine 属性做初始判断。它不依赖第三方库，轻量、兼容性好，但要注意它的判断逻辑是“设备是否接入网络接口”，不是“能否访问你的服务器”。
监听 online/offline 事件
这两个事件冒泡到 window，直接绑定即可：
- 用
window.addEventListener('online', handler)捕获从断网恢复联网的瞬间，适合重试失败请求、刷新缓存、恢复同步等操作 - 用
window.addEventListener('offline', handler)捕获断网时刻，适合禁用提交按钮、保存草稿、暂停轮询、显示离线提示 - 建议在
DOMContentLoaded或load后绑定，避免页面加载快于脚本执行导致首次状态遗漏
获取当前网络状态
navigator.onLine 是只读布尔值，页面加载时就能读取：
- 返回
true表示系统认为已联网（Wi-Fi/蜂窝开启），但可能只是连上局域网或需认证的公共 WiFi - 返回
false表示系统明确判定断网，可信度较高 - 适合初始化 UI：比如加载页显示“正在连接…”、默认启用离线缓存内容、隐藏需联网的功能入口
结合 UI 反馈用户状态
把状态映射到界面，提升体验透明度：
立即学习“Java免费学习笔记（深入）”；
- 给
<body>动态加 class：document.body.classList.toggle('offline', !navigator.onLine) - CSS 控制提示区域：
.offline .network-hint { display: block; } - 搭配图标、颜色变化（如顶部红/绿状态条）、轻微动效，比纯文字更直观
- 注意：不要仅凭此状态决定是否发请求——真正可靠的方式是发起一次
fetch并捕获NetworkError
补充 Network Information API（可选）
想获取更细粒度的网络信息（如类型、带宽、延迟），可用 navigator.connection：
- 支持
effectiveType（'slow-2g' / '2g' / '3g' / '4g' / '5g'）、downlink（Mbps）、rtt（ms）等字段 - 监听变化：
navigator.connection.addEventListener('change', () => { console.log(navigator.connection.effectiveType); }) - 注意兼容性：Chrome、Edge、Firefox 支持较好，Safari 不支持；不能替代 online/offline 事件，而是补充
