使用 JavaScript 检测用户在线/离线状态

本文旨在帮助开发者解决使用 JavaScript 检测用户在线/离线状态时遇到的问题。我们将深入探讨如何利用 navigator.onLine 属性和 online/offline 事件，并提供代码示例，展示如何正确地实现状态检测，以及如何通过 css 样式动态地更新用户状态图标。通过本文，你将能够构建一个可靠的在线/离线状态检测机制，提升用户体验。

理解 navigator.onLine 和 online/offline 事件

navigator.onLine 属性是一个布尔值，指示浏览器是否处于在线状态。 然而，需要注意的是，这个属性仅仅指示浏览器是否能够访问网络，而不能保证用户是否真的能够访问互联网。 例如，用户可能连接到了一个没有互联网连接的局域网，navigator.onLine 仍然会返回 true。

online 和 offline 事件分别在浏览器连接到网络和断开网络时触发。 通过监听这两个事件，我们可以实时地更新用户的在线状态。

修正代码中的问题

原代码存在以下几个问题：

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

1. 错误的事件名称: 使用了不存在的 status_online 事件，正确的事件名称是 online。
2. 缺少元素 ID: html 中没有 id 为 user_status 的元素，导致 JavaScript 无法获取该元素。
3. 错误的类名操作: 使用 user_status.className = condition 会覆盖原有的 user_status 类名，导致 CSS 样式失效。

改进后的代码示例

以下是改进后的代码示例，解决了上述问题：

JavaScript:

const user_status = document.getElementById("user_status");  function updateOnlineStatus(event) {   let condition = navigator.onLine ? "online" : "offline";    // 使用 dataset 设置状态属性   user_status.dataset.status = condition;    console.log("Event: " + event.type, " Status: " + condition); }  window.addEventListener('online',  updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus);  // 设置初始状态 updateOnlineStatus({});

CSS:

/* ---------------------------------- */ /*  user status icon ------------------------------------- */ .user_status {   position: absolute;   content: "";   height: 14px;   width: 14px;   background-color: #c0c0c0;   bottom: 0;   right: 0;   display: block;   border: 2.5px solid #fff;   border-radius: 50%;   /* visibility: hidden;  可以移除，因为默认状态已经通过背景色体现 */ }  .user_status[data-status="online"] {   background-color: #38b653;   visibility: visible; }  /* 忽略此样式，这里只是为了完整性 */ .profile_avatar {   display: inline-block;   position: relative; }

HTML:

<div class="profile_avatar">     <div class="profile_avatar_holder">         <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj" alt="">     </div>   <div id="user_status" class="user_status"></div> </div>

代码解释:

• JavaScript:
  • 使用 document.getElementById(“user_status”) 获取状态图标元素。
  • updateOnlineStatus 函数根据 navigator.onLine 的值设置 data-status 属性，值为 “online” 或 “offline”。
  • 监听 online 和 offline 事件，并在事件触发时调用 updateOnlineStatus 函数。
  • 在页面加载时，调用 updateOnlineStatus({}) 设置初始状态。
• CSS:
  • 使用 [data-status=”online”] 选择器，根据 data-status 属性的值设置不同的样式。 当 data-status 为 “online” 时，显示绿色状态图标。
• HTML:
  • 添加了 id=”user_status” 的 div 元素，用于显示状态图标。

使用 data-status 属性的优势

使用 data-status 属性而不是直接修改 className 有以下优势：

• 避免覆盖原有类名: 不会影响元素原有的类名，保证 CSS 样式的完整性。
• 易于扩展: 如果需要更多的状态，可以方便地添加新的 data-status 值，并在 CSS 中添加相应的样式。
• 代码可读性更高: data-status 属性能够清晰地表达元素的状态。

注意事项

• navigator.onLine 属性和 online/offline 事件只能检测浏览器是否能够访问网络，不能保证用户是否真的能够访问互联网。
• 在移动设备上，online/offline 事件的触发可能受到设备省电模式的影响。
• 为了提高用户体验，可以在状态图标上添加提示信息，例如 “在线” 或 “离线”。

总结

本文介绍了如何使用 JavaScript 检测用户的在线/离线状态，并提供了完整的代码示例。 通过正确地使用 navigator.onLine 属性和 online/offline 事件，以及合理地使用 CSS 样式，我们可以构建一个可靠的在线/离线状态检测机制，提升用户体验。记住，navigator.onLine 仅仅代表浏览器是否能访问网络，更精确的判断需要后端配合心跳检测。