如何用JavaScript检测用户是否在线
在Web开发中，经常需要根据用户的网络连接状态来调整应用的行为，比如离线时缓存数据、在线时同步数据等。JavaScript提供了多种方式检测用户是否在线，其中最常用的两种是基于navigator.onLine属性和online、offline事件监听。
一、使用navigator.onLine属性检测
navigator.onLine是一个布尔值属性，当浏览器能够连接到网络时返回true，否则返回false。这个属性可以直接读取当前网络状态，使用方式非常简单。
// 直接获取当前在线状态
const isOnline = navigator.onLine;
if (isOnline) {
console.log('当前处于在线状态');
} else {
console.log('当前处于离线状态');
}需要注意的是，navigator.onLine的值可能会因为浏览器实现的不同而存在偏差，部分浏览器中即使设备连接的是无法访问公网的局域网，也可能返回true。因此这个属性更适合作为初步的状态判断。
二、监听网络状态变化事件
除了直接读取当前状态，还可以监听浏览器提供的online和offline事件，当用户网络状态发生变化时（比如从离线切换到在线，或者从在线切换到离线），这两个事件会被触发。我们可以给window对象添加对应的事件监听器来实时感知状态变化。
// 监听在线事件
window.addEventListener('online', function() {
console.log('网络已恢复，当前处于在线状态');
// 这里可以添加在线后的逻辑，比如同步离线缓存的数据
});
// 监听离线事件
window.addEventListener('offline', function() {
console.log('网络已断开，当前处于离线状态');
// 这里可以添加离线后的逻辑，比如提示用户切换网络、使用本地缓存数据
});三、结合两种方式实现完整的状态检测
实际开发中，通常会把直接读取状态和监听状态变化结合起来，既能在页面初始化时获取当前状态，也能在网络状态变化时及时响应，下面是一个完整的示例：
// 定义处理网络状态的函数
function handleNetworkChange() {
const statusElement = document.getElementById('network-status');
if (navigator.onLine) {
statusElement.textContent = '当前网络状态：在线';
statusElement.style.color = 'green';
// 在线逻辑：比如尝试同步数据
syncOfflineData();
} else {
statusElement.textContent = '当前网络状态：离线';
statusElement.style.color = 'red';
// 离线逻辑：比如提示用户
alert('网络已断开，部分功能可能不可用');
}
}
// 模拟同步离线数据的函数
function syncOfflineData() {
console.log('开始同步离线缓存的数据...');
// 实际开发中这里会调用接口同步数据
}
// 页面加载时先检测一次初始状态
document.addEventListener('DOMContentLoaded', function() {
// 初始化状态显示
const statusElement = document.createElement('div');
statusElement.id = 'network-status';
statusElement.style.fontSize = '16px';
statusElement.style.margin = '10px 0';
document.body.prepend(statusElement);
// 执行初始状态检测
handleNetworkChange();
});
// 监听网络状态变化事件
window.addEventListener('online', handleNetworkChange);
window.addEventListener('offline', handleNetworkChange);上面的示例中，首先在页面加载完成后创建了显示网络状态的元素，然后调用handleNetworkChange函数获取初始状态并显示。接着给window添加了online和offline事件监听，当网络状态变化时再次调用handleNetworkChange更新显示并执行对应的业务逻辑。
四、注意事项
1. navigator.onLine的兼容性较好，主流现代浏览器都支持，但如果需要兼容非常老的浏览器，可能需要做额外的降级处理。
2. 这个API检测的是浏览器是否能连接到网络，并不一定能完全代表应用能够正常访问后端服务，如果需要更精准的状态检测，可以在检测到在线后额外发起一个轻量的接口请求，验证服务是否可达。
3. 如果应用需要支持离线场景，建议结合Service Worker和本地存储（比如localStorage、IndexedDB）来实现离线缓存和在线同步的能力，网络状态检测只是整个离线方案的一部分。
JavaScriptnavigator.onLine网络状态检测online事件离线应用 本作品最后修改时间：2026-05-23 23:08:37