如何通過javascript檢查瀏覽器的在線/離線狀態？

Question

我想要一個簡單的代碼，它檢查瀏覽器內的互聯網連接，以及一個處理各種代碼的處理，它會回來。

我已經嘗試了一個 http-get-request 來處理返回的狀態代碼，但最后，我在同源策略方面遇到了一些問題。

我還嘗試了 ononline- 和 onoffline-event，但這些都被棄用了，並且在我的目標瀏覽器中不起作用。

我的第三個選擇是使用 navigator.onLine。 當瀏覽器獲得 Internet 連接時，輸出為 true。 但是，當我的瀏覽器沒有連接時，navigator.onLine 的答案不是錯誤的...

我的主要用例是檢查瀏覽器是否連接到互聯網。 如果他有 Internet 連接，那么他應該打開 www.abc.de 但如果沒有 Internet 連接，他應該打開一個本地應用程序 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