如何在JS中检查已连接的互联网

在Web开发中，有时我们需要检查客户端浏览器是否已经连接到互联网，这有助于我们在设计应用程序时作出相应的调整。本文将介绍几种方法来检查浏览器是否已连接到互联网。

方法一：navigator.online 属性

navigator.online属性可用于检查浏览器是否连接到互联网。

if (navigator.onLine) {
  console.log("已连接到互联网");
} else {
  console.log("未连接到互联网");
}

方法二：使用XMLHttpRequest对象

XMLHttpRequest对象是一个用于在Web浏览器和Web服务器之间传输数据的JavaScript API。我们可以使用它来测试是否连接到互联网。

var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'https://www.baidu.com', true); // 尝试请求百度网站的头部
xhr.onreadystatechange = function() {
  if (this.readyState === this.DONE) {
    if (this.status === 200) {
      console.log("已连接到互联网");
    } else {
      console.log("未连接到互联网");
    }
  }
};
xhr.send();

方法三：使用navigator.connection属性

navigator.connection属性提供了更多的连接细节和设备信息。但是，该属性只有在Firefox浏览器中可用，其他浏览器不支持。

if (navigator.connection && navigator.connection.type === "wifi") {
  console.log("已连接到互联网");
} else {
  console.log("未连接到互联网");
}

方法四：使用ping

使用ping来测试是否连接到互联网。这个方法需要服务器端支持ping命令。

function testInternet() {
  var img = document.createElement("img");
  img.onload = function() { console.log("已连接到互联网"); };
  img.onerror = function() { console.log("未连接到互联网"); };
  img.src = "http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?" + Math.random(); // 向谷歌服务器发送ping请求
}
testInternet();

以上是几种在JS中检查已连接的互联网的方法。根据不同的需求和浏览器兼容性，可以选择其中的一种或多种方法来实现。