本文档旨在帮助开发者解决在使用 JavaScript 检测用户在线/离线状态时遇到的问题。我们将深入探讨如何正确监听 online 和 offline 事件，并提供代码示例，演示如何使用 JavaScript 和 CSS动态更新用户状态指示器，从而构建更具响应性和用户友好的 Web 应用程序。
在 Web 开发中，实时检测用户的在线/离线状态对于提供良好的用户体验至关重要。本文将指导你如何使用 JavaScript 监听 online 和 offline 事件，并结合 CSS 动态更新用户状态指示器。
监听 online 和 offline 事件
HTML5 提供了 online 和 offline 事件，允许我们检测用户的网络连接状态。我们需要在 window 对象上监听这两个事件。
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);updateOnlineStatus 函数将在网络状态改变时被调用。
获取用户状态
navigator.onLine 属性可以用来确定当前的网络连接状态。如果浏览器在线，则返回 true，否则返回 false。
立即学习“Java免费学习笔记（深入）”；
let condition = navigator.onLine ? "online" : "offline";
更新用户状态指示器
为了在用户界面上显示用户的在线/离线状态，我们可以使用一个 div 元素，并根据网络状态动态更新其样式。
首先，确保你的 HTML 中包含一个用于显示状态的元素，并赋予它一个唯一的 ID，例如 user_status。
@@##@@
接下来，在 JavaScript 中获取该元素，并编写 updateOnlineStatus 函数来更新其 data-status 属性。
const user_status = document.getElementById("user_status");
function updateOnlineStatus(event) {
let condition = navigator.onLine ? "online" : "offline";
// dataset is simplest to use, it automatically adds attribute to the element
user_status.dataset.status = condition;
console.log("Event: " + event.type, " Status: " + condition);
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
updateOnlineStatus({}); // set initial status在 CSS 中，我们可以使用属性选择器根据 data-status 属性的值来改变元素的样式。
/* 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%;
}
.user_status[data-status="online"] {
background-color: #38b653;
visibility: visible;
}这段 CSS 代码首先定义了 user_status 类的基本样式，然后使用 [data-status="online"] 选择器，当元素的 data-status 属性值为 "online" 时，改变其背景颜色和可见性。
完整示例
以下是一个完整的示例，展示了如何使用 JavaScript 和 CSS 检测和显示用户的在线/离线状态。
HTML:
@@##@@
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%;
}
.user_status[data-status="online"] {
background-color: #38b653;
visibility: visible;
}JavaScript:
const user_status = document.getElementById("user_status");
function updateOnlineStatus(event) {
let condition = navigator.onLine ? "online" : "offline";
// dataset is simplest to use, it automatically adds attribute to the element
user_status.dataset.status = condition;
console.log("Event: " + event.type, " Status: " + condition);
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
updateOnlineStatus({}); // set initial status注意事项
- navigator.onLine 属性可能不总是准确的。例如，即使设备已连接到本地网络，但无法访问互联网，navigator.onLine 仍可能返回 true。
- 在某些浏览器中，online 和 offline 事件可能不会立即触发。
- 为了提高用户体验，可以考虑在网络状态改变时显示一个提示消息。
总结
通过监听 online 和 offline 事件，并结合 CSS 动态更新用户状态指示器，我们可以构建更具响应性和用户友好的 Web 应用程序。记住，navigator.onLine 属性可能不总是准确的，因此需要采取额外的措施来确保用户体验。使用 data-* 属性可以方便地在 CSS 中根据状态改变样式，避免直接操作 class 列表带来的问题。
