JS 检测客户端断网情况

时间：2021-10-25 20:54:32

常用方法

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 禁用掉

JS 检测客户端断网情况

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)

标签：检测客户端

相关文章

