文章目录

HTML5的navigator对象有个onLine属性,可以简单判断当前浏览器是在线还是离线状态。挺有意思的,如果设置了监听事件,当你网线被拨掉时就会调用。

有些系统支持一个连接网络判定,还比较有意思,支持查看当前网络是2G还是3G。虽然说明上写的支持的系统有以下几个,但在我的android手机和ipad上都试过不行,是极少机型么?

  • iOS
  • Android
  • BlackBerry WebWorks
  • Windows Phone 7

简单的写了个DEMO,存为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
<html>
<meta charset="utf-8" />
<title>HTML5之网络状态测试DEMO</title>
<style type="text/css">
.result{
margin: 50 auto;
width: 60%;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<article class="result" id="result">
<section id="connectbar">连通状态:<span id="connect"></span></section>
<section id="statusbar">网络连接:<span id="status"></span>
</article>
</body>
<script>
//var supportNet=navigator.onLine||false; 之前写成了这样,发现有点小问题
var supportNet=(typeof(navigator.onLine)=='boolean');
var supportCheck=navigator.network && navigator.network.connection;
if(!supportNet){
document.getElementById('connectbar').innerHTML='什么破烂浏览器,不支持HTML5';
}
if(typeof(supportCheck)=='undefined'){
document.getElementById('statusbar').innerHTML='啊哎!你的系统或浏览器不支持。嘻嘻。';
}
function checkNet(){
if(supportNet){
document.getElementById('connect').innerHTML=navigator.onLine?'在线 online':'离线 offline';
}
if(supportCheck){
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = '未知网络';
states[Connection.ETHERNET] = '网线';
states[Connection.WIFI] = 'WIFI网络';
states[Connection.CELL_2G] = '2G网络';
states[Connection.CELL_3G] = '3G网络';
states[Connection.CELL_4G] = '4G网络';
states[Connection.NONE] = '没有网络';
document.getElementById('status').innerHTML=states[networkState];
}
}
//每秒检测一次网络状态
window.setInterval(checkNet,1000);
</script>
</html>

上面的代码不一能跑,可以说一般都不能跑,如果手机系统没有开放相应的native则可能调用不成功。

文章目录