本文介绍在本地文件（file://）或网页环境中检测真实网络连通性的可靠方法，涵盖 navigator.online 的局限性、协议判断技巧及基于 fetch 的主动探测方案。
本文介绍在本地文件（file://）或网页环境中检测真实网络连通性的可靠方法，涵盖 navigator.online 的局限性、协议判断技巧及基于 fetch 的主动探测方案。
在前端开发中，仅依赖 navigator.onLine 判断网络状态存在明显缺陷：该属性仅反映浏览器的“离线/在线”切换事件（如系统飞行模式开启），无法验证实际网络可达性——例如 Wi-Fi 已连接但无外网访问权限，或代理配置错误时，navigator.onLine 仍可能返回 true。
✅ 推荐分层检测策略
1. 首先识别资源加载来源（区分 file:// 场景）
const isLocalFile = document.location.protocol === 'file:';
if (isLocalFile) {
console.log('页面从本地文件加载，需额外验证网络可用性');
}此判断可明确触发后续主动探测逻辑，避免对纯离线场景做无效请求。
2. 使用 fetch 主动探测权威端点（最可靠）
选择高可用、低延迟、无 CORS 阻碍的服务（如 Google DNS 的 HTTPS 接口）：
async function hasInternetConnection() {
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 3000); // 3秒超时
const res = await fetch('https://dns.google/resolve?name=example.com', {
method: 'GET',
mode: 'no-cors', // 允许跨域探测（不读响应体）
cache: 'no-store',
signal: controller.signal
});
clearTimeout(timeoutId);
return res.ok || res.status < 400; // 状态码非 4xx/5xx 即视为可达
} catch (err) {
return false; // 网络错误、超时、拒绝连接等均判定为无连接
}
}
// 使用示例
hasInternetConnection().then(online => {
console.log('当前网络状态:', online ? '在线' : '离线');
if (!online) alert('请检查网络连接后重试');
});3. 补充：监听网络状态变化（增强用户体验）
window.addEventListener('online', () => console.log('网络已恢复'));
window.addEventListener('offline', () => console.log('网络已断开'));
// 注意：此事件仅响应浏览器级状态变更，仍需配合主动探测确认真实性⚠️ 关键注意事项
- 避免使用 navigator.onLine 作为唯一依据：它在 macOS/Linux 上常误报，在 Chrome 扩展或 Electron 应用中行为更不可靠；
- 禁用 mode: 'cors'：否则 file:// 页面会因跨域策略直接抛出 TypeError；
- 优先选择无业务耦合的探测端点：如 https://dns.google/resolve 或 https://cloudflare-dns.com/dns-query（支持 DNS over HTTPS），避免探测自身 API 域名导致误判；
- 设置合理超时与重试：单次探测失败不等于永久离线，建议结合防抖（debounce）实现状态缓存。
通过协议识别 + 主动探测的组合方案，可精准应对本地 HTML 文件运行时依赖在线服务的典型场景，兼顾健壮性与用户体验。
立即学习“Java免费学习笔记（深入）”；
