使用 JavaScript 检测用户是否在线

news2024/11/18 1:27:14

有时您可能希望增强您的应用程序以通知用户他们可能已经失去了互联网连接。

用户可能正在访问您的网站并收到缓存版本,因此通常看起来他们的互联网仍在工作。
然而,他们失去了引擎盖下的连接,并且不会加载任何新内容。

在这里向他们显示一些消息以让他们知道他们应该检查他们的连接可能是有益的。

检测连接状态

我们可以利用navigator.onLineAPI 来检测连接状态。
这将返回一个布尔值来指示用户是否在线。

注意:请注意浏览器的实现方式不同,因此结果可能会有所不同。

这在初始加载时效果很好,所以我们可以做这样的事情。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">addEventListener</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">load</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">status</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">navigator</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">onLine</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>

但是我们不知道加载后网络状态是否发生变化,这是不理想的。

我们可以订阅离线和在线事件来监听这些特定的变化。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">addEventListener</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">offline</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">offline</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">});</span>

<span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">addEventListener</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">online</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">online</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>

演示

让我们设置一个快速演示来演示这一点。
我们将在屏幕中央使用一个基本的文本元素,但您当然可以按照您喜欢的任何方式设置样式和实现它。

注意:我正在使用 SCSS 来设置样式

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><div</span> <span style="color:var(--syntax-name-color)">class=</span><span style="color:var(--syntax-string-color)">"status"</span><span style="color:var(--syntax-error-color)">></span>
  <span style="color:var(--syntax-error-color)"><div</span> <span style="color:var(--syntax-name-color)">class=</span><span style="color:var(--syntax-string-color)">"offline-msg"</span><span style="color:var(--syntax-error-color)">></span>You're offline 😢<span style="color:var(--syntax-error-color)"></div></span>
  <span style="color:var(--syntax-error-color)"><div</span> <span style="color:var(--syntax-name-color)">class=</span><span style="color:var(--syntax-string-color)">"online-msg"</span><span style="color:var(--syntax-error-color)">></span>You're connected 🔗<span style="color:var(--syntax-error-color)"></div></span>
<span style="color:var(--syntax-error-color)"></div></span>
</code></span></span>

我们在默认为连接状态的前提下构建它。

让我们添加一些基本样式。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">.status</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">background</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">#efefef</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">flex</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">justify-content</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">center</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">align-items</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">center</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">min-height</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">100vh</span><span style="color:var(--syntax-text-color)">;</span>
  div {
    <span style="color:var(--syntax-text-color)">padding</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1rem</span> <span style="color:var(--syntax-literal-color)">2rem</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">font-size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">3rem</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">border-radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1rem</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">white</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">font-family</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Roboto</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'Helvetica Neue'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">Arial</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">sans-serif</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-name-color)">.online-msg</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-text-color)">background</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">green</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">block</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-name-color)">.offline-msg</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-text-color)">background</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">red</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">none</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>
}
</code></span></span>

默认情况下,这只会显示在线消息。
让我们添加一个条件,如果状态元素有一个离线类,我们切换两个 div。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">.status</span> <span style="color:var(--syntax-text-color)">{</span>
  &.offline {
    .online-msg {
      <span style="color:var(--syntax-text-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">none</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">}</span>
    <span style="color:var(--syntax-name-color)">.offline-msg</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-text-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">block</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">}</span>
  }
}
</code></span></span>

现在,如果我们将离线类添加到状态 div,我们应该会看到离线消息。

那么我们如何根据网络状态切换这些呢?

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">status</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">document</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">querySelector</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">.status</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">addEventListener</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">load</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">handleNetworkChange</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-text-color)">navigator</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">onLine</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">classList</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">remove</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">offline</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">classList</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">add</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">offline</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">};</span>

  <span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">addEventListener</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">online</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">handleNetworkChange</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-text-color)">window</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">addEventListener</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">offline</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">handleNetworkChange</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>

是的,这段代码可以解决问题!
我们在第一次加载时对其进行了初始化,并创建了一个新函数来检查导航器状态。

然后我们添加事件监听器来监听变化,这样我们就可以根据它们采取行动。
在更改时,它可以添加或删除类名。

如果我们尝试一下,它看起来像这样。

动图

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/63330.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

博客系统(页面设计)

努力经营当下&#xff0c;直至未来明朗&#xff01; 文章目录前言一、【博客列表页】blog_list.html参考代码&#xff1a;二、【博客详情页】 blog_detail.html参考代码&#xff1a;三、【博客登录页】login.html参考代码&#xff1a;四、【博客编辑页】参考代码&#xff1a;【…

QFtp的使用

1. 环境 Win10 QT5.9.9 2. 相关说明 Qt5.0之后移除了QFtp类&#xff08;基于FTP协议实现的一个类&#xff09;&#xff0c;并且使用 QNetworkAccessManager 实现了 Ftp 的上传/下载功能。尽管后者在性能上和稳定性上有所提升&#xff0c;但有些原本 QFtp 有的功能 QNetwork…

什么是微服务?

文章目录什么是微服务微服务技术栈单体架构分布式架构认识微服务微服务技术框架SpringCloud什么是微服务 当我们提到微服务&#xff0c;很多人第一反应就是SpringCloud&#xff0c;但是微服务技术并不能与SpringCloud完全划等号&#xff1a; 微服务是分布式架构的一种&#x…

AI视频监控在畜牧养殖中的技术应用解决方案

一、方案概况 随着养殖业迅猛发展的同时也给养殖业主带来了严峻挑战。对养殖业来说&#xff0c;养殖场大多建立在偏远地区&#xff0c;给集中管理带来不便&#xff1b;畜禽养殖成本大&#xff0c;丢失、偷盗等情况时有发生&#xff0c;容易造成巨大的经济损失。建立一套远程视…

013. N 皇后

1.题目链接&#xff1a; 51. N 皇后 2.解题思路&#xff1a; 2.1.题目要求&#xff1a; 给一个数字 n &#xff0c;要求返回所有 n 个 皇后能在 n X n 的棋盘上 不相互攻击 的情况。 能攻击到的情况&#xff1a;以皇后自身为原点&#xff0c;横、竖、同斜线&#xff08;45度…

Linux搭建单机多进程zookeeper集群

01 ZooKeeper是什么 ZooKeeper 是一个开放源码的分布式协调服务&#xff0c;它是集群的管理者&#xff0c;监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作。最终&#xff0c;将简单易用的接口和性能高效、功能稳定的系统提供给用户。 分布式应用程序可以基…

用数字隔离器取代传统的光耦合器

介绍 光耦合器是一种已有几十年历史的技术&#xff0c;广泛用于信号隔离&#xff0c;通常提供安全隔离、信号电平移位和地面回路缓解。它们通常用于广泛的终端应用中&#xff0c;包括数据通信电路、开关模式电源系统、测量和测试系统&#xff0c;以及孤立的数据采集系统。光耦…

【入门】初识深度学习

文档背景 机器学习和深度学习的概念十分火热。听上去也很难&#xff0c;不慌&#xff0c;有时候就需要行动在前脑子在后。不管&#xff0c;干就完啦。 前言 人工智能&#xff08;ArtificialIntelligence&#xff0c;AI&#xff09;是最宽泛的概念&#xff0c;是研发用于模拟、延…

数据库基本语法

SQL常用语句总结 mysql -u root -p mysql会提示你输入密码&#xff0c;输入安装配置MySQL服务时设置的密码即可。 输入如下命令生成样例数据库&#xff1a; CREATE DATABASE university; USE university; SOURCE <DLL.sql文件路径>; SOURCE <InsertStatements.sql文…

Jenkins实践指南--pipeline概述

1.pipeline概述 1.1 什么是pipeline 从某种抽象层次上讲&#xff0c;部署流水线&#xff08;Deployment pipeline&#xff09;是指从软件版本控制库到用户手中这一过程的自动化表现形式。——《持续交付-发布可靠软件的系统方法》 pipeline 英语愿意为管道&#xff0c;在Jen…

Python之路—200行Python代码搞了个打飞机游戏!!

早就知道pygame模块&#xff0c;就是没怎么深入研究过&#xff0c;恰逢这周未没约到妹子&#xff0c;只能自己在家玩自己啦&#xff0c;一时兴起&#xff0c;花了几个小时写了个打飞机程序。 很有意思&#xff0c;跟大家分享下。 先看一下项目结构 1 2 3 4 5 6 7 8 9 10 11 1…

盒子模型-css

个人学习笔记 文章目录1.什么是盒子模型&#xff1f;2.外边距3.css边框4.内边距1.什么是盒子模型&#xff1f; HTML文档中的每个元素都被描绘成矩形盒子&#xff0c;这些矩形盒子通过一个模型来描述其占用的空间&#xff0c;这个模型称为盒子模型。 盒子模型用四个边界描述&am…

打字的哪阿空扥

打字的那些事之快速移动光标 一## 、提出快速移动光标的原因 &#xff08;1&#xff09;键盘移动光标方向键不合理 情景再现&#xff1a; 当我们在打出一句话时&#xff0c;其中一个字打错&#xff0c;我们就需要去删除它&#xff0c;此时我们做的动作&#xff0c;无非有两种…

Linux知识结构体系简述

Linux 是一套免费使用和自由传播的类 Unix 操作系统&#xff0c;是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统。严格来讲&#xff0c;Linux 这个词本身只表示 Linux 内核&#xff0c;但实际上人们已经习惯了用 Linux 来形容整个基于 Linux 内核&…

QFtp编译

QFtp下载&#xff1a;https://github.com/qt/qtftp 打开源码 修改头文件(不然编译会报错) 打开qftp.pro CONFIG static CONFIG - shared改成 CONFIG - static CONFIG shared也就是 - 号互换位置 4. 编译生成文件 linux下&#xff1a;*.a文件为.lib文件 windows下&#xf…

Python学习基础笔记二十六——推导式

列表推导式&#xff1a; 例1&#xff1a;30以内能被3整除的数&#xff1a; print([i for i in range(30) if i % 3 0]) 结果&#xff1a; 例2&#xff1a; 30以内能被3整除的数的平方&#xff1a; print([i**2 for i in range(30) if i % 3 0]) 结果&#xff1a; 例3&…

Golang sync.Map 原理(两个map实现 读写分离、适用读多写少场景)

参考&#xff1a; 由浅入深聊聊Golang的sync.Map 通过对源码的逐行分析&#xff0c;清晰易懂Golang sync.Map原理 通过向 sync.Map 中增删改查来介绍sync.Map的底层原理Golang中sync.Map的实现原理是什么 很好的概括了sync.Map的原理手摸手Go 深入理解sync.Map 知乎大佬 大家…

CentOS7.9系统部署(nginx+uwsgi+flask)项目

一、概述 上次&#xff0c;我们介绍了如何将CentOS服务器自带的Python3.6.8版本升级到Python3.8.0版本&#xff0c;现在我们开始介绍如何将flask项目部署的CentOS7.9版本的Linux服务器上。 二、环境准备 2.1安装git 我们通常会将自己的项目托管在Github或者gitee平台&#…

地址锁存器,总线控制器,双向总线驱动器(数据缓冲器),时钟发生器。8088最小工作模式。

这几个芯片你知道它叫什么干什么用&#xff0c;跟CPU怎么接就可以。一般就是考填空 目录 这几个芯片你知道它叫什么干什么用&#xff0c;跟CPU怎么接就可以。一般就是考填空 地址锁存器&#xff08;74LS373&#xff0c;8282&#xff09; 数据缓冲器 8286&#xff0c;74LS24…

Spring MVC 常用注解的使用

ResponseBody 由于 Spring MVC 是基于 MVC 这个设计模式的&#xff0c;所以在不加上注解的情况下&#xff0c;页面和前端交互的时候返回的默认是一个视图 View&#xff0c;或者说静态页面&#xff0c;而实际上用的比较多的是将处理完的数据发送给前端&#xff0c;所以我们可以…