JavaScript 通过 navigator.onLine 属性和 online/offline 事件检测网络状态：navigator.onLine 返回布尔值表示浏览器判断的联网状态，但可能不准；需监听 online/offline 事件响应变化，并结合 fetch 探测真实连通性以增强可靠性。
JavaScript 中检测用户当前联网状态与网络变化，主要依靠 navigator.onLine 属性和 online/offline 事件。
用 navigator.onLine 获取当前联网状态
该属性返回布尔值：true 表示浏览器认为设备已连接网络，false 表示离线。注意它只反映浏览器的“粗略判断”，比如 Windows 上断开网线或 macOS 关闭 Wi-Fi 时通常能准确识别，但连着 Wi-Fi 却无实际外网访问能力（如路由器未拨号、防火墙拦截）时仍可能返回 true。
使用方式很简单：
if (navigator.onLine) {
console.log('设备显示在线');
} else {
console.log('设备显示离线');
}
监听网络状态变化事件
页面可监听全局的 online 和 offline 事件，它们在浏览器检测到网络连接状态切换时触发：
立即学习“Java免费学习笔记（深入）”；
-
online：从离线恢复为在线时触发 -
offline：从在线变为离线时触发
建议在页面加载后尽早绑定，例如：
window.addEventListener('online', () => {
console.log('网络已恢复');
// 可在此重试失败请求、同步缓存数据等
});
window.addEventListener('offline', () => {
console.log('网络已断开');
// 可提示用户、暂停轮询、启用离线 UI 等
});
增强判断：结合真实请求验证连通性
仅依赖 navigator.onLine 不可靠。更稳妥的做法是发起一个轻量级探测请求（如 GET 自己的健康检查接口或 /favicon.ico），根据响应结果确认是否真能通信：
- 请求超时（如 3–5 秒）或返回非 2xx 状态码，视为实际不可用
- 可封装成函数，在进入 online 状态后主动探测一次，避免“假上线”
- 注意跨域限制，探测地址需同源或服务端配置 CORS
简单示例：
async function checkRealConnection() {
try {
const res = await fetch('/health', { method: 'HEAD', cache: 'no-store' });
return res.ok;
} catch {
return false;
}
}
注意事项与兼容性
这两个特性在所有现代浏览器中均支持（包括移动端），无需 polyfill。但要注意：
- iOS Safari 在某些后台场景下可能不触发
offline事件（如切到其他 App 后断网再切回） - 部分浏览器对
navigator.onLine的初始值设置较慢，首次读取可能不准，建议配合事件监听使用 - 不要用它替代服务器接口的错误处理——网络请求失败仍需独立捕获和兜底
