检测 JavaScript 中的实时互联网连接状态-js教程-PHP中文网

检测 JavaScript 中的实时互联网连接状态

本文介绍在本地文件（file://）或网页环境中准确判断用户是否具备有效互联网连接的多种方法，包括 navigator.online 的使用限制、主动探测策略及跨协议兼容性处理。

本文介绍在本地文件（file://）或网页环境中准确判断用户是否具备有效互联网连接的多种方法，包括 navigator.online 的使用限制、主动探测策略及跨协议兼容性处理。

在 Web 开发中，一个常见但易被误解的需求是：如何可靠地检测用户当前是否拥有可用的互联网连接？ 尤其当页面通过 file:// 协议（如本地 HTML 文件、MHTML 归档）打开时，navigator.onLine 的返回值可能完全失真——它仅反映浏览器“是否认为自己在线”，而非真实网络可达性。

✅ 正确思路：分层验证 + 主动探测

1. 首先识别协议上下文

const isLocalFile = document.location.protocol === 'file:';
if (isLocalFile) {
  console.log('页面运行于本地文件系统，需额外验证网络连通性');
}

⚠️ 注意：file: 协议本身不提供网络能力，所有依赖远程资源（API、CDN、WebSocket）的功能均需显式检查连接。

2. 谨慎使用 navigator.onLine

// 简单但不可靠的初步判断（仅作参考）
if (!navigator.onLine) {
  console.warn('浏览器报告离线 —— 极可能无网络');
  // 可立即禁用联网功能、显示离线提示
}
// 但 navigator.onLine === true 并不保证能访问互联网！
// （例如：Wi-Fi 已连接但无网关、防火墙拦截、DNS 故障等）

? 关键限制：该属性仅监听操作系统网络接口状态切换，无法验证实际 HTTP 可达性，且在 file: 协议下行为因浏览器而异（Chrome 常返回 true，Firefox 可能为 false）。

OpenJDK 24

OpenJDK 24 Windows x64 官方参考实现（24+36），适合 Windows 环境进行 Java 开发、编译、运行和版本兼容性验证。

下载

3. 推荐方案：轻量级主动探测（Ping 式 fetch）

向一个高可用、低延迟、无 CORS 阻碍的终端发起快速 HEAD 请求（避免传输大响应体）：

async function isInternetAvailable(timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

  try {
    const res = await fetch('https://cdn.jsdelivr.net/gh/justjavac/empty@1.0.0/empty.txt', {
      method: 'HEAD',
      cache: 'no-cache',
      signal: controller.signal
    });
    clearTimeout(id);
    return res.ok; // HTTP 2xx 表示基础连通性正常
  } catch (err) {
    clearTimeout(id);
    return false;
  }
}

// 使用示例
isInternetAvailable().then(online => {
  if (online) {
    console.log('✅ 检测到有效互联网连接');
    // 启用 API 调用、实时同步等功能
  } else {
    console.log('❌ 未检测到可用网络，请检查连接');
    // 切换至离线模式或提示用户
  }
});

✅ 推荐探测目标特点：

使用 HTTPS（避免混合内容警告）
响应极小（如空文本、1x1 GIF 或 HEAD-only）
全球 CDN 加速（如 jsDelivr、unpkg）
无重定向（避免额外延迟与失败风险）

4. 进阶建议：结合事件监听与缓存策略

// 监听浏览器在线/离线事件（辅助但非替代主动探测）
window.addEventListener('online', () => {
  console.log('系统触发 online 事件 → 建议执行一次 isInternetAvailable() 确认');
});
window.addEventListener('offline', () => {
  console.log('系统触发 offline 事件 → 可立即降级 UI');
});

// 对探测结果做简单内存缓存（避免高频轮询）
let lastCheckResult = null;
let lastCheckTime = 0;
const CACHE_DURATION = 30 * 1000; // 30 秒缓存

async function getCachedConnectionStatus() {
  if (Date.now() - lastCheckTime <h3>? 总结</h3>