用JavaScript检测用户是否在线
有时候，我们需要知道当前网络的状态来做一些事情，以提升用户体验，这节课，我们来看一下，如何使用 JavaScript 来检测用户是否在线。
检测连接状态
我们可以利用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');
});
<div class="status"> <div class="offline-msg">You're offline </div> <div class="online-msg">You're connected </div> </div>
.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...点击查看剩余70%
{{collectdata}}
网友评论