JavaScript 检查互联网

Question

我有一个网络应用程序，需要在调用以下函数时检查网络浏览器是否已连接到互联网。

function ping(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // Typical action to be performed when the document is ready:
            console.log("response: " + xhttp.responseText);
        }
    };
    xhttp.open("GET", "http://www.google.com", true);
    xhttp.send();
}

以下是 google chrome 控制台的函数结果。它有点作用...

连接到互联网时:

Failed to load https://www.google.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

没有互联网连接时:

GET https://www.google.com/ 0 ()

所以，如果我能区分错误，就会有我的功能，但我也有一种感觉，这是一种完全奇怪的做法。

是否有更好/更简单的方法来检查互联网连接？

Answer 1

更新

运行脚本，尝试断开互联网连接。

window.addEventListener('load', function() {
  var status = document.getElementById("status");
  var log = document.getElementById("log");

  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";

    status.className = condition;
    status.innerHTML = condition.toUpperCase();

    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

#status {
  position: fixed;
  width: 100%;
  font: bold 1em sans-serif;
  color: #FFF;
  padding: 0.5em;
}

#log {
  padding: 2.5em 0.5em 0.5em;
  font: 1em sans-serif;
}

.online {
  background: green;
}

.offline {
  background: red;
}

<div id="status"></div>
<div id="log"></div>
<p>This is a test, Try to disconnect your internet</p>

if(window.navigator.onLine)
  alert('Internet connected')
 else
  alert('internet is not connected')

主流浏览器现在支持window.navigator.onLine

window.navigator.onLine

返回浏览器的在线状态。该属性返回一个 bool 值，true 表示在线，false 表示离线。只要浏览器连接网络的能力发生变化，该属性就会发送更新。当用户点击链接或脚本请求远程页面时，就会发生更新。例如，当用户在失去互联网连接后不久单击链接时，该属性应返回 false。引用MDN Navigator.onLine