HTML怎么做网络状态检测_html Navigator.onLine网络检测【全面解析】-html教程-PHP中文网

navigator.online 不可靠，需配合 fetch('/favicon.ico') 主动探测；它仅反映系统网络接口状态，无法识别 dns 失败、代理中断等真实离线场景，而 fetch 可捕获 typeerror 和 aborterror，结合 cache: 'no-store' 与超时控制更准确。

html怎么做网络状态检测_html navigator.online网络检测【全面解析】

Navigator.onLine 不可靠，不能单独用于判断真实网络连通性。 它只反映浏览器认为的“离线/在线”状态，依赖操作系统网络接口通知，会漏判、误报，比如 Wi-Fi 已连接但 DNS 失败、代理中断、防火墙拦截时仍返回 true。

Navigator.onLine 的行为和触发时机

这个属性是只读布尔值，初始值取决于页面加载时系统网络栈状态。它会在浏览器检测到系统级网络接口切换（如断开 Wi-Fi、拔掉网线）时触发 online 或 offline 事件，但不主动探测远程可达性。

Windows/macOS/Linux 上，它监听的是 OS 的「网络适配器状态」，不是「能否访问互联网」
Chrome 和 Firefox 行为基本一致；Safari 在某些 macOS 版本中甚至不会触发 offline 事件（例如仅禁用 Wi-Fi 而未关闭硬件）
在 PWA 中，Service Worker 可能缓存响应，导致 fetch() 成功但实际已断网 —— 此时 navigator.onLine 仍为 true

为什么 fetch('/favicon.ico') 是更实用的检测方式

比起依赖系统信号，主动发一个轻量 HTTP 请求更能反映真实连通能力。选 /favicon.ico 是因为它通常体积小、无业务逻辑、服务器默认存在，且跨域风险低（同源下可直接用）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

必须设置 cache: 'no-store' 防止从缓存返回 200，误判为在线
超时需手动控制：AbortSignal.timeout(3000)（现代浏览器支持），或封装 Promise.race() + setTimeout
404 不代表离线（可能是服务端没配 favicon），应优先关注 TypeError（网络拒绝、DNS 失败）和 AbortError
避免高频轮询：建议首次加载后每 15–30 秒检测一次，或监听 online/offline 事件后再触发验证请求

兼容旧版浏览器的兜底方案

IE11 或 Android 4.4 WebView 等环境不支持 AbortSignal.timeout，需降级处理：

function checkNetwork() {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 3000);
  
  return fetch('/favicon.ico', { 
    method: 'HEAD',
    cache: 'no-store',
    signal: controller.signal
  }).then(res => {
    clearTimeout(timeoutId);
    return res.ok || res.status === 404; // 404 视为网络可达
  }).catch(err => {
    clearTimeout(timeoutId);
    return err.name === 'AbortError' || err.name === 'TypeError';
  });
}