敞开生长之旅！这是我参与「日新计划 12 月更文应战」的第11天，点击查看活动详情

我最近遇到一个需求，要给网站增加一个用户网络离线提示。要求咱们要实时监测用户的网络状况，当用户断网了，咱们要立马给用户弹出一个断网提示。

那你可能会问，为什么要做这么一个需求呢？用户断网了，网页不就加载不出来了吗？用户不就知道了吗？

哈哈这确实也是一种状况，可是这只其间一种状况，在现实中更多的状况是，用户在访问咱们的网站时产生断网，这时咱们的网站数据现已被浏览器缓存，因而在网站上并看不出有什么不同。只需在加载新内容的状况下才会有所区别。那当然这样给用户的体会是十分欠好的，所以咱们要在用户网络断开的时候，给用户弹出一个弹框。来告知用户网站新内容加载不出来的原因。来进步用户的体会感

怎么检查是否有网络

咱们能够使用navigator.onLineAPI 来检测网络状况。navigator.onLine会回来一个布尔值来显现用户是否在线。true表明在线，false表明离线，只需浏览器连接到网络的状况产生改动，特点值就会产生改动

咱们能够监听网页加载事情，在网页加载时获取navigator.onLine的值

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

上面的做法在网站最开端加载的时，是能够精确获取用户的网站状况的。可是有一个缺点，就是当获取完用户的网络状况后，网络又产生改动，状况值会无法及时更新！！！

怎样才干解决这个问题呢？

咱们能够写一个监听断网和联网来解决这个问题

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

那咱们来做一个完整的小案例来监测咱们的用户是否断网

小案例

HTML

<div class="status">
  <div class="offline-msg">你的网络断开了  </div>
  <div class="online-msg"> 你现已连上网络 </div>
</div>

CSS

html, body {
    padding: 0;
    margin: 0;
}
.status {
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.offline .online-msg {
    display: none;
}
.offline .offline-msg {
    display: block;
}
 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;
}

JavaScript

const status1 = document.querySelector(".status");
//load 监听网页加载事情
window.addEventListener("load", () => {
  const handleNetworkChange = () => {
    if (navigator.onLine) {
      //给status下的offline-msg和online-msg增加类名样式
      status1.classList.remove("offline");
    } else {
      //给status下的offline-msg和online-msg增加类名样式
      status1.classList.add("offline");
    }
  };
// online该事情在浏览器开端在线作业时触发
  window.addEventListener("online", handleNetworkChange);
  // offline该事情在浏览器开端离线作业时触发。
  window.addEventListener("offline", handleNetworkChange);
});