我们的应用有时候需要知道用户的网络连接是否在线？比如根据网络是否正常访问，页面渲染不同的内容，或提示用户的操作等。

检测连接状态

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

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

window.addEventListener('load', () => {
  const status = navigator.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>

css(scss)

.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

注意事项：

在某些情况下，浏览器可能会错误地“认为”它已连接，例如，如果连接到没有连接到 Internet 的网络。如果状态为“离线”则没有连接，但“在线”并不一定意味着存在连接。

由于这个API太不稳定的情况，我们还可以通过获取网络资源来判断，比如：插入一个网络图片，等同于发起请求：

let img = new Image();
img.src = './text.png?t='+Date.parse(new Date());
img.onload = function() {
	alert('有网');
};
img.onerror = function() {
	alert('没网');
};

或者通过ajax请求判断有没有网，如果ajax请求写的都是对的，那么请求成功既有网，请求失败既没网。

链接: https://fly63.com/article/detial/12296