HTML检测网络状态方法：在线离线判断指南

想要检测HTML页面的网络状态？JavaScript可以帮您实现！本文将详细介绍如何使用`navigator.onLine`属性判断浏览器是否在线或离线，并通过监听`online`和`offline`事件，实时响应网络状态变化。虽然`navigator.onLine`存在局限性，但结合心跳请求等更高级的检测策略，可以更准确地判断用户是否能访问互联网。掌握这些方法，让您的网页应用能够更好地适应不同的网络环境，提供更流畅的用户体验。

最直接检测浏览器网络状态的方法是使用 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 的