在网页应用开发中，检测用户的网络状态是一个常见需求，比如在网络断开时提示用户、暂停数据请求、使用本地缓存数据等。JavaScript提供了多种原生方式来实现网络状态检测，下面我们就来逐一了解。
一、使用navigator.onLine属性检测
浏览器提供了navigator.onLine属性，它是一个布尔值，用来表示当前设备是否处于联网状态。当浏览器连接到网络时，该属性返回true，否则返回false。
这个属性的使用非常简单，直接在代码中读取即可：
// 检测当前网络状态
function checkNetworkStatus() {
if (navigator.onLine) {
console.log('当前处于联网状态');
return true;
} else {
console.log('当前处于断网状态');
return false;
}
}
// 初始调用检测
checkNetworkStatus();需要注意的是，navigator.onLine返回true只能说明设备连接到了本地网络，并不代表一定能访问到目标服务器。比如设备连接了路由器但路由器没有接入互联网时，该属性也可能返回true。
二、监听online和offline事件
除了主动检测，我们还可以监听浏览器的online和offline事件，实时感知网络状态的变化。当用户从断网状态恢复联网，或者从联网状态变为断网时，对应的事件就会被触发。
可以通过以下方式绑定事件监听：
// 监听网络恢复事件
window.addEventListener('online', function() {
console.log('网络已恢复，现在可以发起请求了');
// 这里可以添加网络恢复后的逻辑，比如重试之前失败的请求
});
// 监听网络断开事件
window.addEventListener('offline', function() {
console.log('网络已断开，请检查网络连接');
// 这里可以添加网络断开后的逻辑，比如提示用户、切换为离线模式
});三、结合网络请求做精准状态校验
如果需要更准确地判断是否能访问到目标服务，可以结合简单的网络请求来校验。比如向目标服务器发送一个轻量的请求，根据请求是否成功来判断实际网络可用性。
// 发送轻量请求检测目标服务是否可达
function checkServerReachable() {
// 使用fetch发送一个HEAD请求，减少数据传输量
return fetch('https://ipipp.com/ping', {
method: 'HEAD',
// 设置较短的超时时间，避免长时间等待
signal: AbortSignal.timeout(3000)
})
.then(response => {
if (response.ok) {
console.log('目标服务器可达');
return true;
} else {
console.log('目标服务器返回异常状态');
return false;
}
})
.catch(error => {
console.log('请求失败，无法访问目标服务器');
return false;
});
}
// 调用检测方法
checkServerReachable().then(reachable => {
if (reachable) {
// 执行需要联网的操作
} else {
// 执行离线相关操作
}
});四、不同场景的使用建议
不同的业务场景可以选择不同的检测方式：
- 如果只是需要简单的联网状态判断，优先使用
navigator.onLine属性和online、offline事件，原生支持无需额外开销。 - 如果需要判断是否能访问到特定的服务接口，可以结合轻量网络请求做校验，避免误判。
- 在单页应用中，建议把网络状态检测的逻辑封装成全局的工具函数或者状态管理，方便各个组件调用。
常见问题说明
注意：navigator.onLine的兼容性较好，现代浏览器都支持，但在一些老旧的浏览器中可能存在表现不一致的情况，如果需要兼容老旧环境，建议结合事件监听和网络请求做降级处理。另外，网络状态的检测不应该过于频繁，避免造成不必要的性能开销，一般结合状态变化事件和用户主动触发的操作来检测即可。
JavaScript网络状态检测navigator_onLineonline事件offline事件修改时间：2026-05-29 03:27:55