求助：JavaScript中Offline事件在特定场景下未触发

这个问题我之前处理过类似场景，本质是浏览器对不同网络断开场景的事件触发逻辑存在差异导致的。你原来的代码：

$(window).on('offline',function(){alert('offline')});

只能捕捉到浏览器主动切换离线状态的场景（比如调试器模拟离线、拔网线这种直接切断物理连接的情况），但对于WiFi断开、飞行模式这类场景，很多浏览器不会立刻触发offline事件——它们要等到某次网络请求失败后，才会更新网络状态并触发事件，这就导致了事件不触发的延迟或失效问题。

下面给你几个可行的解决方案：

1. 原生事件+定时轮询navigator.onLine（最兼容方案） #

通过定时检查navigator.onLine的状态，弥补原生事件的触发延迟，代码示例：

// 统一的离线处理逻辑
function handleOffline() {
  alert('offline');
  // 这里可以添加更多离线业务逻辑，比如缓存提示、离线页面跳转等
}

function handleOnline() {
  // 如果需要处理在线恢复的逻辑，可在这里补充
}

// 监听原生的online/offline事件
window.addEventListener('offline', handleOffline);
window.addEventListener('online', handleOnline);

// 定时轮询网络状态，覆盖原生事件没触发的场景
let lastOnlineStatus = navigator.onLine;
setInterval(() => {
  const currentStatus = navigator.onLine;
  if (currentStatus !== lastOnlineStatus) {
    lastOnlineStatus = currentStatus;
    currentStatus ? handleOnline() : handleOffline();
  }
}, 1000); // 每秒检查一次，可根据业务需求调整间隔

如果你习惯用jQuery，也可以把原生事件监听换成jQuery写法：$(window).on('offline', handleOffline)，核心逻辑保持一致。

2. 利用navigator.connection监听连接变化（现代浏览器增强方案） #

部分现代浏览器支持navigator.connection API，可以监听网络连接的类型变化、断开等事件，作为补充手段：

if (navigator.connection) {
  navigator.connection.addEventListener('change', () => {
    // 每次连接状态变化时，检查当前是否离线
    if (!navigator.onLine) {
      handleOffline();
    }
  });
}

注意：这个API兼容性不算100%，如果需要兼容旧浏览器，优先用第一种方案。

补充说明 #

navigator.onLine是一个布尔值，它的判断逻辑基于浏览器是否能访问网络，并非实时的物理连接检测——这也是原生offline事件在部分场景失效的核心原因，定时轮询刚好能弥补这个特性带来的延迟。

内容的提问来源于stack exchange，提问作者Beingnin