使用 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:

餐饮网站、来电订餐配送系统

订餐网站： 1、前台 1）会员注册、登录、查看订餐记录、修改资料和密码、管理收餐地址； 2）显示菜单、在线订餐，支持不同的折扣率； 3）购物蓝、在线结算； 4）会员查看订单的送餐的状态。 功能模块采用用户控件，与网站界面分离。 2、后台 1）配送订单：订餐管理、更改订餐状态、订餐、送餐归类； 2）食品信息：发布、修改、编辑食品项目、食品配料及价格，可以上架和下架； 3）会员

0

查看详情

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">
        @@##@@
    </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 仅仅代表浏览器是否能访问网络，更精确的判断需要后端配合心跳检测。

以上就是使用 JavaScript 检测用户在线/离线状态的详细内容，更多请关注php中文网其它相关文章！