html如何检测网络连接状态？-html教程-PHP中文网

navigator.online返回true却没网是正常现象，因其仅读取系统网络接口状态，无法检测dns故障、路由器断开或代理失效等真实连通性问题。

html如何检测网络连接状态？

navigator.onLine 返回 true 却没网，是正常现象

它只读取系统网络接口状态（比如 Windows 的以太网适配器是否启用、macOS 是否打开了 Wi-Fi），不验证 DNS 是否可达、路由器是否通、代理是否生效。拔网线或关 Wi-Fi 通常能触发 online/offline 事件；但重启路由器、DNS 故障、防火墙拦截——这些它完全感知不到。

常见错误现象：

navigator.onLine 初始值不准：Chrome 启动时未联网也可能返回 true
用户连着局域网热点但无法访问外网，navigator.onLine 仍为 true
Android 旧版 WebView（如 Cordova）中该属性恒为 true

所以别单独依赖它做业务判断。首次检查应等 online 或 offline 事件触发后才采信。

用 fetch 探测真实 HTTP 连通性

真正要确认“能不能调通后端”，得发一个轻量 HTTP 请求。推荐探测你可控的 endpoint，比如 /health、/favicon.ico（HEAD 方法）、或复用登录接口的 OPTIONS 请求。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

实操建议：

用 fetch('/favicon.ico', { method: 'HEAD', cache: 'no-store' })，体积小、无副作用
加 AbortController 防止请求卡死，超时设为 2–3 秒足够
响应状态码为 404 也视为“网络可达”——说明请求已发出并收到响应，只是资源不存在
不要等业务接口返回 200；response.ok 或 response.status 就够了

示例片段：

function checkRealConnection() {
  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;
    })
    .catch(() => false);
}