js 判断是否网络断了

时间 2019-11-05

原文原文链接

最佳方法：

结合下面的方法混合使用javascript

在IE和Firefox上使用Ajax轮询检查网络是否断了，其余浏览器上使用 online 和offline事件侦听网络。php

引用

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

设置轮询时间和地址

time：时间不设置默认2000
url：不设置默认全部浏览器用 online 和 offline事件html

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

连上网络执行

jsnet.onLineHandler(function(){
    console.log("连上了！")
})

断开网络执行

jsnet.offLineHandler(function(){
    console.log("断开网络！")
})

通常判断方法:

方法一：利用online和offline事件

此方法是经过 online 和 offline 事件来侦听是否断网，可是这个在 IE 和 Firefox 中，并不是断网了就是真的断网了。（如火狐中在选择 菜单>>文件>>脱机工做才会触发 online 和 offline 事件）java

总之在IE和Firefox中通常状况下不能触发这俩事件，只有在选择脱机状态下才能触发此事件。git

jswindow.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轮询

你懂的github

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

方法三：利用IMG的onerror事件

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

jssetInterval(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)