JS 检测客户端断网情况

常用方法

1 navigator.onLine 2 window.addEventListener() 3 获取网络资源 4 ajax请求

1. navigator.onLine

只会在机器未连上路由或者局域网才返回false；也就是连上路由，断网的情况也是返回true

if (navigator.onLine) {
   console.log(网络已连接);
} else {
  console.log(已断网);
}

2. window.addEventListener()

这个方法会有一个很隐蔽的bug。 电脑有个虚拟机桥接的网卡，就算拔掉网线浏览器也认为你是有网； 此时应该把电脑的以太网vm 禁用掉

window.addEventListener(online, function() {
    console.log(网络已连接);
});
window.addEventListener(offline, function() {
    console.log(已断网);
});

3 获取网络资源 (利用IMG的onerror事件)

通过轮询生成 IMG 通过 img 的 onerror 事件判断是否断网,此方法弱点就是耗流量（一像素的空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)

4 ajax请求轮询

缺点也是耗资源

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

常用方法 1 navigator.onLine 2 window.addEventListener() 3 获取网络资源 4 ajax请求 1. navigator.onLine 只会在机器未连上路由或者局域网才返回false；也就是连上路由，断网的情况也是返回true if (navigator.onLine) { console.log(网络已连接); } else { console.log(已断网); } 2. window.addEventListener() 这个方法会有一个很隐蔽的bug。 电脑有个虚拟机桥接的网卡，就算拔掉网线浏览器也认为你是有网； 此时应该把电脑的以太网vm 禁用掉 window.addEventListener(online, function() { console.log(网络已连接); }); window.addEventListener(offline, function() { console.log(已断网); }); 3 获取网络资源 (利用IMG的onerror事件) 通过轮询生成 IMG 通过 img 的 onerror 事件判断是否断网,此方法弱点就是耗流量（一像素的空gif 轮询一次 1.43KB setInterval(function(){ var $img = $( ) $img.appendTo(body).css("display","none").load(function(){ console.log("连接成功！") $(this).remove() }).error(function(){ console.log("断网了！") $(this).remove() }) },2000) 4 ajax请求轮询 缺点也是耗资源 setInterval(function(){ //Ajax... },1000)