-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (61 loc) · 2.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现查看网络状态</title>
</head>
<body>
<div>
<h3>改变网络状态测试效果</h3>
<h1 id="p1">获取网络在线状态：</h1>
<h1 id="p2">获取网络具体状态：</h1>
<h1 id="p3">获取网络速度：</h1>
</div>
<script>
window.onload = function() {
// getNetworkConnectionChange();
// getNetworkOnLineChange();
};
// connection 的兼容性较低，谨慎使用
// 通过navigator.connection获取当前网络状态，可对connection进行监听，从而及时获取网络状态的变更
function getNetworkConnectionChange() {
// connection 的兼容性较低
const connection = navigator.connection || navigator.webkitConnection || navigator.mozConnection;
updateText("p2", "网络状态：" + connection.effectiveType);
updateText("p3", "网络下行速度：" + connection.downlink + "MB/S");
// 对connection变更监听
connection.addEventListener("change", () => {
// connection.effectiveType返回的是具体的网络状态：4g/3g/2g
updateText("p2", "网络状态：" + connection.effectiveType);
updateText("p3", "网络下行速度：" + connection.downlink + "MB/S");
});
}
// 通过navigator.online判断当前网络是否在线，对navigator进行监听，从而及时获取网络状态的变更
function getNetworkOnLineChange() {
updateText("p1", "您的网络是否在线：" + window.navigator.onLine);
// 对online网络在线变更监听
window.addEventListener("online", function() {
updateText("p1", "您的网络是否在线：" + window.navigator.onLine);
});
// 对offline断网变更监听
window.addEventListener("offline", function() {
updateText("p1", "您的网络是否在线：" + window.navigator.onLine);
});
}
function updateText(id, msg) {
document.getElementById(id).textContent = msg;
console.log(msg);
}
setInterval(() => {
var ua = navigator.userAgent;
var networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other';
networkStr = networkStr.toLowerCase().replace('nettype/', '');
let isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isIOS) {
}
updateText("p1", "平台类型是否iOS：" + isIOS);
updateText("p2", "定时器网络状态：" + ua);
}, 2000);
</script>
</body>
</html>