最直接检测浏览器网络状态的方法是使用 navigator.online 属性，它返回布尔值表示当前是否在线；2. 可通过监听 window 的 online 和 offline 事件实时响应网络变化；3. navigator.online 的局限在于仅判断设备是否连接局域网或wi-fi，并不确保能访问互联网；4. 更准确的检测方式是结合心跳请求（如 fetch）向可靠地址发起实际网络请求，验证真实连通性；5. 推荐策略是先用 navigator.online 快速判断，再在必要时通过心跳请求二次确认，以实现更可靠的网络状态检测。
浏览器里想知道网络状态，最直接的办法就是用 JavaScript 提供的
navigator.onLine属性，它会告诉你当前浏览器是不是“在线”的。同时，你还可以监听
online和
offline这两个全局事件，当网络状态发生变化时，它们会自动触发，这样你就能实时地做出响应。这套机制虽然不是百分百完美，但对于大多数网页应用来说，已经足够提供一个基础的判断了。
解决方案
要检测当前的网络状态，最常用的就是
navigator.onLine这个布尔值。它会返回
true表示在线，
false表示离线。
if (navigator.onLine) {
console.log("你现在是连接状态。");
// 可以在这里执行一些需要网络的操作
} else {
console.log("看起来你离线了。");
// 提示用户离线，或者切换到离线模式
}但这只是一个瞬时判断。更实用的是监听网络状态的变化。浏览器会向
window对象派发
online和
offline事件。
立即学习“前端免费学习笔记（深入）”；
// 监听网络上线事件
window.addEventListener('online', function() {
console.log('网络恢复了，耶！');
// 比如，重新加载数据，或者同步本地缓存
alert('网络连接已恢复！');
});
// 监听网络离线事件
window.addEventListener('offline', function() {
console.log('网络断开了，呃...');
// 比如，提示用户，或者启用离线功能
alert('网络连接已断开！');
});
// 首次加载时也检查一下
console.log('当前网络状态：', navigator.onLine ? '在线' : '离线');把这些代码放到你的 JavaScript 文件里，或者直接嵌入到 HTML 的
<script>标签中，当页面加载后，它就会开始工作了。
navigator.onLine
真的靠谱吗？它有什么局限性？
说实话，
navigator.onLine这玩意儿，它“靠谱”的定义可能和我们想的不太一样。它主要检测的是浏览器与本地网络（比如路由器、局域网）的连接状态，而不是你是不是真的能访问互联网。
举个例子，你可能连着 Wi-Fi，
navigator.onLine会告诉你“在线”，但你的路由器可能压根没连上外网，或者宽带欠费了。这时候，你虽然“在线”，但实际上什么网页都打不开，数据也发不出去。所以，它给你的只是一个“可能在线”的信号。我个人觉得，这更像是一个“你是不是连着网线或WiFi”的指示灯，而不是“你能不能访问互联网”的通行证。
还有些时候，你可能通过公司内网访问某个特定资源，但外网是断开的，
navigator.onLine也可能显示在线。这种“局域网在线”的情况，对于需要访问外部服务的应用来说，就是一种误导。所以，对于那些对网络可用性要求极高的应用，仅仅依赖它，那风险还是挺大的。
如何优雅地监听网络状态变化？
优雅地监听网络状态变化，核心就是利用好
window对象上的
online和
offline事件。这比你隔三差五地去检查
navigator.onLine要高效和自然得多。
我们只需要在页面加载时，给
window对象添加这两个事件监听器：
function handleOnlineStatus() {
console.log('网络回来了，可以继续工作了！');
// 比如，刷新一下数据，或者把之前离线时暂存的数据同步上去
document.body.style.backgroundColor = '#e6ffe6'; // 绿色表示在线
document.getElementById('status-message').textContent = '你已在线。';
}
function handleOfflineStatus() {
console.log('网络断了，请检查连接。');
// 比如，给用户一个提示，或者切换到离线浏览模式
document.body.style.backgroundColor = '#ffe6e6'; // 红色表示离线
document.getElementById('status-message').textContent = '你已离线。请检查网络连接。';
}
// 确保在DOM内容加载后添加监听器
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('online', handleOnlineStatus);
window.addEventListener('offline', handleOfflineStatus);
// 初始化显示当前状态
const statusDiv = document.createElement('div');
statusDiv.id = 'status-message';
statusDiv.style.position = 'fixed';
statusDiv.style.bottom = '10px';
statusDiv.style.right = '10px';
statusDiv.style.padding = '8px 12px';
statusDiv.style.borderRadius = '5px';
statusDiv.style.backgroundColor = '#333';
statusDiv.style.color = '#fff';
statusDiv.style.zIndex = '1000';
document.body.appendChild(statusDiv);
if (navigator.onLine) {
handleOnlineStatus();
} else {
handleOfflineStatus();
}
});
// 当然，如果你有单页应用（SPA），可能还需要考虑在组件销毁时移除监听器，避免内存泄露：
// window.removeEventListener('online', handleOnlineStatus);
// window.removeEventListener('offline', handleOfflineStatus);这种事件驱动的模式，简直是为这种异步变化而生。它让你不需要主动去“问”网络状态，而是当状态改变时，网络环境会主动“通知”你。这不仅代码更简洁，也更符合现代Web开发的响应式理念。
除了 navigator.onLine
，还有哪些更高级的检测策略？
既然
navigator.onLine有它的局限性，那我们有没有办法更准确地判断用户是否真的能访问互联网呢？答案是肯定的，不过这就不单单是“HTML”能解决的了，需要借助 JavaScript 发起实际的网络请求。
最常用的高级策略就是发起一个“心跳”请求（Heartbeat Request）到一个你知道肯定在线的、且响应速度快的服务器。
-
向一个已知可靠的URL发起请求： 你可以尝试用
fetch
或XMLHttpRequest
向一个非常小的、公共的、稳定的资源发起请求，比如：- 你自己的服务器上的一个微小文件（比如一个1x1像素的透明GIF，或者一个只返回
{"status": "ok"}的JSON接口）。 - 一些公共服务的CDN地址，比如Google的某个静态资源（但要注意跨域问题和隐私）。
async function checkInternetConnectivity() { const testUrl = 'https://www.google.com/favicon.ico'; // 一个小且稳定的公共资源 const timeout = 5000; // 5秒超时 try { const controller = new AbortController(); const id = setTimeout(() => controller.abort(), timeout); const response = await fetch(testUrl, { method: 'GET', mode: 'no-cors', // 避免CORS问题，但这样你就无法读取响应内容，只判断是否可达 signal: controller.signal }); clearTimeout(id); // 如果能走到这里，说明请求发出去了且没有超时，基本可以认为网络是通的 console.log('通过实际请求确认：互联网连接正常！'); return true; } catch (error) { if (error.name === 'AbortError') { console.error('通过实际请求确认：请求超时，可能无法访问互联网。'); } else { console.error('通过实际请求确认：请求失败，可能无法访问互联网。', error); } return false; } } // 调用这个函数来检查 // checkInternetConnectivity().then(isConnected => { // if (isConnected) { // // 执行在线操作 // } else { // // 执行离线操作 // } // });这种方式才是真正能告诉你“你能不能访问互联网”的，而不是“你是不是连着网线或WiFi”。
- 你自己的服务器上的一个微小文件（比如一个1x1像素的透明GIF，或者一个只返回
-
结合
navigator.onLine
和心跳检测： 一个更稳妥的策略是：- 首先用
navigator.onLine
进行快速判断。如果它返回false
，那么基本可以确定是离线了。 - 如果
navigator.onLine
返回true
，再发起心跳请求进行二次确认。这能过滤掉那些“假在线”的情况。
你可以在
online
事件触发后，或者在需要进行网络操作前，调用checkInternetConnectivity
来做一次更深度的验证。当然，频繁地发起心跳请求会增加网络负担，所以需要根据你的应用场景来权衡检测频率。比如，可以在用户尝试进行某个需要网络的操作时才触发，或者每隔一段时间（比如几分钟）进行一次静默检测。 - 首先用
