使用 JavaScript 检测用户在线/离线状态：一份实用指南-html教程-PHP中文网

使用 JavaScript 检测用户在线/离线状态：一份实用指南

霞舞

发布： 2025-08-24 23:36:01

原创

321人浏览过

使用 javascript 检测用户在线/离线状态：一份实用指南

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

<div class="profile_avatar">
    <div class="profile_avatar_holder">
        <img src="https://example.com/profile_image.jpg" alt="">
    </div>
    <div id="user_status" class="user_status"></div>
</div>

登录后复制

接下来，在 JavaScript 中获取该元素，并编写 updateOnlineStatus 函数来更新其 data-status 属性。

Eva Design System

基于深度学习的色彩生成器

查看详情

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:

<div class="profile_avatar">
    <div class="profile_avatar_holder">
        <img src="https://example.com/profile_image.jpg" alt="">
    </div>
    <div id="user_status" class="user_status"></div>
</div>

登录后复制

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 列表带来的问题。

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