JavaScript 中 BOM 怎么监听网络在线与离线状态-js教程-PHP中文网

javascript可通过bom的online/offline事件监听网络状态变化，结合navigator.online属性判断，但需注意其非100%准确，推荐addeventlistener绑定并初始化检查，辅以轻量心跳探测提升可靠性。

javascript 中 bom 怎么监听网络在线与离线状态

JavaScript 中可以通过 BOM 提供的 online 和 offline 事件监听网络状态变化，核心是监听 window 对象上的这两个事件，并结合 navigator.onLine 属性判断当前实际状态。

监听 online / offline 事件

浏览器会在网络连接状态发生改变时，自动在 window（或 document）上触发 online 和 offline 事件。注意：这些事件不保证 100% 实时准确，尤其在某些操作系统或网络环境（如仅连上 WiFi 但无外网）下，navigator.onLine 可能返回 true 但实际无法访问服务器。

使用 addEventListener 绑定事件更推荐，避免覆盖已有监听器
事件本身不带详细网络类型（如 Wi-Fi/4G），只反映浏览器“是否认为在线”
页面加载时不会自动触发，需手动检查初始状态

获取当前在线状态

navigator.onLine 是一个只读布尔值，表示浏览器当前的在线判断结果。它不是实时轮询的，但会随系统网络接口变化而更新（多数现代浏览器支持）。

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

页面刚打开时就可直接读取：console.log(navigator.onLine)
该值为 false 时基本可确定离线；为 true 时仍建议配合接口探测确认可用性
部分旧版 WebView 或 Electron 环境中该属性可能始终返回 true，需额外兼容

实用监听写法示例

推荐在页面初始化时注册事件，并同步检查当前状态：

function handleOnline() {
  console.log('已联网');
  // 可触发重试队列、同步待发数据等
}

function handleOffline() {
  console.log('已断网');
  // 可暂停轮询、提示用户、启用本地缓存模式
}

window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);

// 初始化状态检查
if (navigator.onLine) {
  handleOnline();
} else {
  handleOffline();
}