使用JS检测网络连接状态_javascript api

使用navigator.onLine属性和online/offline事件可实现Web应用的网络状态检测，示例包括实时提示用户网络变化、离线缓存数据及恢复后同步，但需结合心跳请求提升准确性。

在现代Web应用中，实时检测用户的网络连接状态对提升用户体验非常重要。JavaScript提供了原生API来帮助开发者判断设备是否在线或离线，从而做出相应处理，比如暂停请求、提示用户或自动重连。

使用navigator.onLine检测网络状态

navigator.onLine 是浏览器提供的一个布尔属性，用于快速判断当前设备是否处于联网状态。

它返回两个值：

• true：表示设备认为自己在线（有网络）
• false：表示设备认为自己离线

示例代码：

立即学习“Java免费学习笔记（深入）”；

if (navigator.onLine) {
  console.log("设备已连接网络");
} else {
  console.log("设备当前离线");
}

监听网络状态变化事件

仅检查一次状态是不够的，通常需要持续监听网络变化。浏览器提供了两个事件：

• online：当网络从离线变为在线时触发
• offline：当网络从在线变为离线时触发

你可以绑定这些事件来响应状态变化：

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

28

查看详情

window.addEventListener('online', () => {
  console.log("网络已恢复");
  // 可在此处尝试重发未完成的请求
});

window.addEventListener('offline', () => {
  console.log("网络断开，请检查连接");
  // 提示用户或暂停数据同步
});

注意：onLine的局限性

navigator.onLine 并不真正检测网络质量或能否访问外网。它的判断依据是操作系统级别的网络状态，可能存在误判：

• Wi-Fi已连接但无法访问互联网（如需登录认证页面），此时 onLine 仍可能返回 true
• 某些移动设备切换网络时存在延迟更新

因此，建议结合以下方式增强判断准确性：

• 发送一个小的HEAD或GET请求（如到 /ping 或 CDN 资源）验证真实连通性
• 使用 setInterval 定期探测服务端心跳接口
• 在关键操作前主动检查可用性

实际应用场景建议

常见用途包括：

• 表单提交失败时，先检查网络再提示用户
• 离线时将数据暂存 localStorage，恢复后自动同步
• 展示“您已离线”或“重新连接成功”的UI提示

示例：简单的网络状态提示

const showStatus = (isOnline) => {
  const status = isOnline ? "在线" : "离线";
  document.getElementById("status").textContent = status;
  document.getElementById("status").style.color = isOnline ? "green" : "red";
};

// 初始化状态
showStatus(navigator.onLine);

// 监听变化
window.addEventListener('online', () => showStatus(true));
window.addEventListener('offline', () => showStatus(false));

基本上就这些。利用 navigator.onLine 和 online/offline 事件，可以实现基础但有效的网络状态感知。虽然它不能100%反映真实网络可达性，但在大多数场景下足够实用，配合服务端探测可进一步提升可靠性。

以上就是使用JS检测网络连接状态_javascript api的详细内容，更多请关注php中文网其它相关文章！