Vue JS离线状态元素禁用/启用问题：navigator.online及offline.js失效

我完全懂你的痛点——原生online/offline事件经常掉链子，navigator.online在页面不刷新时根本不更新，第三方库还不给力。咱们来一步步搞定这个问题，实现可靠的在线状态检测，从而精准控制页面元素的启用/禁用。

核心问题拆解 #

原生网络状态相关的API有两个致命缺陷：

• 它们只检测设备是否连了网络（比如连了WiFi但实际没网），不验证能否真正访问服务器；
• 部分场景下（比如网络波动后恢复），事件不会触发，导致状态一直停留在旧值。

所以咱们得用主动检测+事件监听+定时轮询的组合方案，把所有漏洞都补上。

具体实现方案 #

1. 封装可靠的在线检测函数 #

自己写一个基于fetch的检测逻辑，请求同域的小资源（比如网站的favicon），这样能验证实际的网络连通性：

async function checkOnlineStatus() {
  try {
    // 用HEAD请求减少数据传输，设置1秒超时避免等待太久
    const response = await fetch('/favicon.ico', {
      method: 'HEAD',
      cache: 'no-store', // 禁用缓存，避免旧结果干扰
      signal: AbortSignal.timeout(1000)
    });
    return response.ok; // 只要响应正常，就判定为在线
  } catch (err) {
    // 超时、无响应等任何错误，都判定为离线
    return false;
  }
}

2. 统一管理在线状态 #

用一个类封装状态逻辑，结合事件监听和定时轮询，确保状态实时更新：

class OnlineStatusManager {
  constructor() {
    this.currentStatus = false;
    // 初始化时先做一次检测
    this.refreshStatus();
    // 监听原生在线/离线事件
    window.addEventListener('online', () => this.refreshStatus());
    window.addEventListener('offline', () => this.refreshStatus());
    // 定时轮询（每5秒一次），覆盖事件没触发的场景
    setInterval(() => this.refreshStatus(), 5000);
  }

  async refreshStatus() {
    const newStatus = await checkOnlineStatus();
    // 只有状态变化时才触发更新，避免不必要的UI操作
    if (newStatus !== this.currentStatus) {
      this.currentStatus = newStatus;
      // 触发自定义事件，让页面其他部分监听状态变化
      window.dispatchEvent(new CustomEvent('status-updated', {
        detail: { isOnline: newStatus }
      }));
    }
  }
}

// 初始化状态管理器
const statusManager = new OnlineStatusManager();

3. 监听状态变化，控制页面元素 #

在需要控制元素的地方，监听自定义的status-updated事件，处理元素的启用/禁用：

// 假设你的页面元素有.online-only类，需要在线时启用、离线时禁用
window.addEventListener('status-updated', (event) => {
  const { isOnline } = event.detail;
  
  document.querySelectorAll('.online-only').forEach(element => {
    if (isOnline) {
      element.removeAttribute('disabled');
      // 还可以添加其他样式或逻辑，比如移除灰色遮罩
      element.classList.remove('disabled-style');
    } else {
      element.setAttribute('disabled', 'disabled');
      element.classList.add('disabled-style');
    }
  });
});

对你原有代码的优化点 #

你原来的代码里大概率存在this指向问题（如果不是在类方法里，this可能指向window或者undefined），用类来管理状态就能完美规避这个问题。另外，单独依赖事件监听不够全面，加上定时轮询能覆盖更多边缘场景，比如网络悄悄恢复但事件没触发的情况。

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