很多时候 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
[HTML5 API中Network Information API]:(https://github.com/AurelioDeRosa/HTML5-API-demos):
我们可以通过事件的件的监听,去实时获取到网络状态的变化 window.addEventListener(‘offline’, function(e) {alert(‘offline’);}) window.addEventListener(‘online’, function(e) {alert(‘online“’);})
拓展[HTML5 API中Network Information API]:(https://github.com/AurelioDeRosa/HTML5-API-demos):
connection connection也是navigator的一个属性,他包含了一些当前连接的基本信息,其中connection.type值的就是当前的网络类型。其值包含了一下几个:
当网络类型发生变化时,同样的也是可以通过事件监听的方式来实时获取到网络类型。代码实现如下: var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; var type = connection.type; function updateConnectionStatus() { alert(“网络由 ” + type + ” 变化为 ” + connection.type); } //监听网络类型发生变化 connection.addEventListener(‘typechange’, updateConnectionStatus);