如何通过JavaScript在浏览器中查看在线/离线状态

Question

我想要一个简单的代码，它可以检查浏览器内的Internet连接以及处理各种代码的处理，这些代码将返回。

我已经尝试了http-get-Request来处理返回状态代码，但是最后，我遇到了一些相同原产的问题。

我还尝试了OnOnline和Onoffline事件，但是这些已被描述，并且在我的Target-Browser中不起作用。

我的第三个选项是Navigator.online。当浏览器获得Internet连接时，输出为真。但是，当我的浏览器没有连接时，navigator.online的答案不是错误的...

我的主要用例是检查浏览器是否具有Internet连接。如果他有互联网连接，那么他应该打开www.abc.de但是，如果没有互联网连接，他应该使用Localhost打开本地应用程序：8080/abc。

Answer 1

原则上这是为什么navigator.online不一致的重复？有可靠的解决方案吗？

但是我亲自尝试了

之类的东西

if (location.host.indexOf("localhost")==-1) { // we are not already on localhost
  var img = new Image();
  img.onerror=function() { location.replace("http://localhost:8080/abc"); }
  img.src="http://servertotest.com/favicon.ico?rnd="+new Date().getTime();
}

Answer 2

要检测离线和在线状态，您需要使用以下示例。

代码样本

// add "is-offline" class to the html element if user is offline and remove when online again
window.addEventListener('load', function() {
  function updateOnlineStatus(event) {
    if (navigator.onLine) {
      document.documentElement.classList.remove('is-offline');
      document.querySelector('.connection-status').innerHTML = 'Online';
    } else {
      document.documentElement.classList.add('is-offline');
      document.querySelector('.connection-status').innerHTML = 'Offline';
    }
  }
  window.addEventListener('online', updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

.connection-status {
  font-size: 19px;
  font-weight: 600;
  color: #58b05c;
}
.is-offline .connection-status {
  color: red;
}

<center>
  <p class="connection-status">Online</p>
</center>

Answer 3

尝试使用此

window.navigator.onLine;

有关更多信息，请参考

https://developer.mozilla.org/en-us/docs/web/api/navigatoronline/online