本文旨在帮助开发者解决使用 JavaScript 检测用户在线/离线状态时遇到的问题。我们将深入探讨如何利用 navigator.onLine 属性和 online/offline 事件，并提供代码示例，展示如何正确地实现状态检测，以及如何通过 CSS 样式动态地更新用户状态图标。通过本文，你将能够构建一个可靠的在线/离线状态检测机制，提升用户体验。
理解 navigator.onLine 和 online/offline 事件
navigator.onLine 属性是一个布尔值，指示浏览器是否处于在线状态。 然而，需要注意的是，这个属性仅仅指示浏览器是否能够访问网络，而不能保证用户是否真的能够访问互联网。 例如，用户可能连接到了一个没有互联网连接的局域网，navigator.onLine 仍然会返回 true。
online 和 offline 事件分别在浏览器连接到网络和断开网络时触发。 通过监听这两个事件，我们可以实时地更新用户的在线状态。
修正代码中的问题
原代码存在以下几个问题：
立即学习“Java免费学习笔记（深入）”；
- 错误的事件名称: 使用了不存在的 status_online 事件，正确的事件名称是 online。
- 缺少元素 ID: HTML 中没有 id 为 user_status 的元素，导致 JavaScript 无法获取该元素。
- 错误的类名操作: 使用 user_status.className = condition 会覆盖原有的 user_status 类名，导致 CSS 样式失效。
改进后的代码示例
以下是改进后的代码示例，解决了上述问题：
JavaScript:
订餐网站： 1、前台 1）会员注册、登录、查看订餐记录、修改资料和密码、管理收餐地址； 2）显示菜单、在线订餐，支持不同的折扣率； 3）购物蓝、在线结算； 4）会员查看订单的送餐的状态。 功能模块采用用户控件，与网站界面分离。 2、后台 1）配送订单：订餐管理、更改订餐状态、订餐、送餐归类； 2）食品信息：发布、修改、编辑食品项目、食品配料及价格，可以上架和下架； 3）会员
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:
@@##@@
代码解释:
-
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 仅仅代表浏览器是否能访问网络，更精确的判断需要后端配合心跳检测。
