js 判断是否网络断了
发布在JSLite.io2015年3月4日view:9331开源项目前端开发BrettBat
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

最佳方法:

结合下面的几种方法混合使用

IEFirefox上使用Ajax轮询检查网络是否断了,其他浏览器上使用 onlineoffline事件 侦听网络。

下载地址:onlinenetwork for github

引用

<head>
    <script type="text/javascript" src="online.js"></script>
</head>

设置轮询时间和地址

time: 时间不设置默认2000
url:不设置默认所有浏览器用 onlineoffline事件

var net = onlinenetwork({
    "time":1000,
    "url":"http://*******.com/ping.php"
})

连上网络执行

net.onLineHandler(function(){
    console.log("连上了!")
})

断开网络执行

net.offLineHandler(function(){
    console.log("断开网络!")
})

一般判断方法:

方法一:利用online和offline事件

此方法是通过 onlineoffline 事件来侦听是否断网,但是这个在 IEFirefox 中,并非断网了就是真的断网了。(如火狐中在选择 菜单>>文件>>脱机工作才会触发 onlineoffline 事件)

总之在IEFirefox中一般情况下不能触发这俩事件,只有在选择脱机状态下才能触发此事件。

window.addEventListener('load', function() {
    var status = document.getElementById("status");
    function updateOnlineStatus(event) {
        var condition = navigator.onLine ? "online" : "offline";
        status.className = condition;
        status.innerHTML = condition.toUpperCase();
    }
    window.addEventListener('online',  updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
});

方法二:Ajax轮询

你懂的

setInterval(function(){
    //Ajax...
},1000)

方法三:利用IMG的onerror事件

通过轮询生成 IMG 通过 imgonerror 事件判断是否断网
此方法弱点就是耗流量(一像素的空gif 轮询一次 1.43KB )手机上用那就蛋疼了(这个样子就会偷偷跑流量...)。

setInterval(function(){
    var $img = $('<img src="http://jslite.io/blank.gif?'+(new Date())+'">')
    $img.appendTo('body').css("display","none").load(function(){
        console.log("连接成功!")
        $(this).remove()
    }).error(function(){
        console.log("断网了!")
        $(this).remove()
    })
},2000)
评论
发表评论
暂无评论
WRITTEN BY
小弟调调
前端开发工程师,JSLite.io求关注,求star。
TA的新浪微博
PUBLISHED IN
JSLite.io

官网:JSLite.io。JSLite 是一个 JavaScript 库,与 jQuery 有着类似的 API,通用库只有 5-10k,让 Web 开发更迅速,下载执行更快、量级更轻只针对先进浏览器(支持HTML5、CSS3)移动端浏览器编写的 JavaScript 库。与jQuery有着类似的api,模仿jQuery的语法规范,并不是100%的覆盖。如果你会用jQuery,那么你也会用JSLite。

推进前端开发标准对于攻城师来说,人人有责。

我的收藏