用JavaScript检测用户是否在线

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

简阳网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联公司从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

检测连接状态

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

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

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

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

我们可以订阅 offline​ 和 online

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

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

事例

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

  
You're offline 

  
You're connected 

对应的 css:

.status {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  div {
    padding: 1rem 2rem;
    font-size: 3rem;
    border-radius: 1rem;
    color: white;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  .online-msg {
    background: green;
    display: block;
  }
  .offline-msg {
    background: red;
    display: none;
  }
}

默认情况下，显示在线信息。然后我们添加一个条件，如果状态元素有一个 offline 类，我们就切换这两个div。

.status {
  &.offline {
    .online-msg {
      display: none;
    }
    .offline-msg {
      display: block;
    }
  }
}

那么，我们如何根据网络状态来切换呢：

const status = document.querySelector('.status');
window.addEventListener('load', () => {
  const handleNetworkChange = () => {
    if (navigator.onLine) {
      status.classList.remove('offline');
    } else {
      status.classList.add('offline');
    }
  };

  window.addEventListener('online', handleNetworkChange);
  window.addEventListener('offline', handleNetworkChange);
});

代码很简单，这里就不过多的介绍了。

事例地址：https://codepen.io/rebelchris/pen/PoaQjqr

原文：https://dev.to/dailydevtips1/detecting-if-the-user-is-online-with-javascript-58ne

分享名称：用JavaScript检测用户是否在线
当前网址：http://www.shufengxianlan.com/qtweb/news17/90767.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联