HTML中如何检测用户的网络连接状态-html教程-PHP中文网

navigator.online仅检测系统网卡状态，无法确认服务器连通性；应使用带超时和缓存禁用的fetch探测/favicon.ico来判断真实网络可用性。

html中如何检测用户的网络连接状态

navigator.onLine 只能告诉你系统有没有启用网卡，不能判断能不能连上你的服务器。它返回 true 却发不出请求、页面白屏、接口全 TypeError: Failed to fetch——这太常见了，不是代码写错了，是它本来就不负责这事。

为什么 navigator.onLine 会误报？

这个属性只读取操作系统网络接口的启用状态：Wi-Fi 开关打开了、以太网适配器已启用、macOS 显示“已连接到 Wi-Fi”……它就返回 true。但以下情况它完全感知不到：

路由器断电或 WAN 口没连外网
DNS 解析失败（比如 dig your-api.com 超时）
代理配置错误或被防火墙拦截
你连的是个纯局域网热点（无互联网出口）

更麻烦的是：navigator.onLine 在 file:// 协议下恒为 true；某些旧版 Android WebView 也永远返回 true；Chrome 启动瞬间未联网也可能返回 true。

用 fetch('/favicon.ico', { method: 'HEAD' }) 做真实连通性探测

真正要确认“能不能调通后端”，必须发一个轻量 HTTP 请求。选 /favicon.ico 是因为它体积小、无副作用、同源、几乎每个网站都有（404 也说明请求发出去并收到了响应）。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

务必加 cache: 'no-store'，防止 CDN 或浏览器缓存伪造成功
必须用 AbortController 或 AbortSignal.timeout(3000) 设超时，否则 DNS 卡住会冻结整个表单提交流程
判断依据不是 response.status === 200，而是 response.ok || response.status === 404——只要拿到响应，就说明网络栈通了
不要探测第三方地址（如 https://google.com），跨域、策略拦截、DNS 慢都会误判

示例函数：

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);
}