使用 JavaScript 检测用户在线/离线状态-html教程-PHP中文网

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

花韻仙語

发布： 2025-08-24 23:14:18

原创

812人浏览过

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

本文旨在帮助开发者解决使用 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:

wifi优化大师app v1.0.1 安卓版

Wifi优化大师最新版是一款免费的手机应用程序，专为优化 Wi-Fi 体验而设计。它提供以下功能：增强信号：提高 Wi-Fi 信号强度，防止网络中断。加速 Wi-Fi：提升上网速度，带来更流畅的体验。 Wi-Fi 安检：检测同时在线设备，防止蹭网。硬件加速：优化硬件传输性能，提升连接效率。网速测试：实时监控网络速度，轻松获取网络状态。 Wifi优化大师还支持一键连接、密码记录和上网安全测试，为用户提供全面的 Wi-Fi 管理体验。

查看详情

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

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