用JavaScript检测用户是否在线

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

有时候，我们需要知道当前网络的状态来做一些事情，以提升用户体验，这节课，我们来看一下，如何使用 JavaScript 来检测用户是否在线。

检测连接状态

我们可以利用navigator.onLine API来检测连接状态，它返回一个布尔值来表示用户是否在线。

注意：请注意各浏览器的实现方式不同，因此结果可能不同。

代码语言：javascript复制

window.addEventListener('load', () => {
  const status = navigator.onLine;
});

这种方式，我们不知道加载后网络状态是否发生变化，这并不理想。

我们可以订阅 offline 和 online 事件，来监听这些具体的变化：

代码语言：javascript复制

window.addEventListener('offline', (e) => {
  console.log('offline');
});

window.addEventListener('online', (e) => {
  console.log('online');
});

事例

我们通过一个背景色的变化来演示当前的网络状态：

代码语言：javascript复制

<div class="status">
  <div class="offline-msg">You're offline 


	

https 网络安全 github 编程算法 git 


	




	
 0 人点赞