很多时候 web 网页上需要判断或监听浏览器(系统)的网络状态。
Navigator onLine 属性
onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。
注：在 IE 4+ 中，用户可以在浏览器中选择脱机工作，当脱机工作被选后，系统就进入了脱机状态，内容将从缓存进行读取。
语法：navigator.onLine
所有主要浏览器都支持 onLine 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>网络状态</title>
<style type="text/css">
</style>
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
if (navigator.onLine) {
console.log("online");
$("div").append("网络正常\t");
} else {
console.log("offline");
$("div").append("网络离线\t");
}
});
});
</script>
</head>
<body>
<button>获取网络状态</button>
<div></div>
</body>
</html>
PC 端亲测结果：
1）当将电脑网络禁用，或者直接拔掉网线，点击按钮时，navigator.onLine 返回 false
2）当浏览器能正常上网，点击按钮时，navigator.onLine 返回 true
3）当手动修改电脑 IP 地址，使 ip 异常浏览器无法上网时，点击按钮，navigator.onLine 返回 taue，
手机端亲测结果：
1）当关闭 WIFI 与 流量时，点击按钮时，navigator.onLine 返回 false
2）当打开 WIFI 或者 流量时，点击按钮，navigator.onLine 返回 true