html如何检测网络状态_html5监听断网与联网功能-html教程-PHP中文网

navigator.online仅反映浏览器主观判断，非真实连通性；需监听online/offline事件响应状态变化，并用fetch+超时验证服务器可达性，pwa中须结合service worker行为双校验。

html如何检测网络状态_html5监听断网与联网功能

用 `navigator.onLine` 判断当前网络状态

浏览器原生提供 navigator.onLine 属性，返回布尔值：true 表示“浏览器认为”在线，false 表示离线。但它不检测真实网络连通性，只反映浏览器自身对网络的判断（比如 Chrome 在断开 WiFi 后可能仍返回 true，因为有以太网或虚拟网卡）。

实际使用时需注意：

navigator.onLine 初始化值取决于页面加载时的状态，后续不会自动更新——必须配合事件监听
它无法区分「有网络但服务器不可达」和「完全断网」，仅适合做粗粒度提示（如显示“离线中…”）
部分旧版 Safari 在 iOS 上会忽略该 API，返回恒定 true

监听 `online` 和 `offline` 事件

这两个事件在 window 上触发，是响应式更新网络状态的关键：

window.addEventListener('online', () => {
  console.log('已联网');
  // 可在此重试失败请求、同步缓存数据等
});

window.addEventListener('offline', () => {
  console.log('已断网');
  // 可在此暂停轮询、禁用提交按钮、显示离线 UI
});

常见误区：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

事件不会冒泡，不能委托到父元素，必须直接绑定在 window
首次加载页面时不会触发事件，需手动检查 navigator.onLine 初始化 UI
某些 PWA 场景下，Service Worker 可能拦截请求但 navigator.onLine 仍为 true，需结合 fetch 超时判断

用 `fetch` + 超时兜底验证真实连通性

要确认是否真能访问服务器，必须发一个轻量请求。推荐用 fetch 检查一个稳定 endpoint（如 /health 或空 GIF）：

async function checkRealConnection() {
  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 3000);
    await fetch('/favicon.ico', { method: 'HEAD', signal: controller.signal });
    clearTimeout(timeoutId);
    return true;
  } catch (e) {
    return false;
  }
}

关键点：