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)