X.d 笔记

小Web,大世界

0%

使用JavaScript进行网络检测

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

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

  • iOS
  • Android
  • BlackBerry WebWorks
  • Windows Phone 7

简单的写了个DEMO,存为HTML就可以运行了,可以拿去试试

<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则可能调用不成功。