js 监听网络链接状态

最近公司的后台管理系统提了这项需求，故从网上搜集了一些方法，如今记录一下以便往后方便查阅。

首先我把需求贴出来

经过图中的图标告知用户网络链接是否正常，而不是经过信息弹窗的方式提醒，优化了用户体验。

废话就很少说了，直接上代码，本项目是基于vue.js的

mouted () {

this.checkNetwork()
复制代码

},

methods: {

// 监听网络链接状态
checkNetwork() {
  const that = this
  const EventUtil = {
    addHandler: function(element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false)
      } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler)
      } else {
        element['on' + type] = handler
      }
    }
  }
  EventUtil.addHandler(window, 'online', function(e) {
    if (e.type === 'online') {
      that.network = true
    } else {
      that.network = false
    }
  })
  EventUtil.addHandler(window, 'offline', function(e) {
    if (e.type === 'offline') {
      that.network = false
    } else {
      that.network = true
    }
  })
复制代码

}

通过测试，此方法有效。

另外附上网上提供的几种方法，但本人未去测试，有兴趣的童鞋能够试试

一、navigator.onLine

if （navigator.onLine）{
    ...  //正常工做
} else {
    ... //离线工做
}
复制代码

navigator.onLine只会在机器未链接到局域网或路由器时返回false，其余状况下均返回true，挺简单的一种方法。。。

二、Ajax轮询

setInterval (function() {

//Ajax...
复制代码

},1000)

三、利用IMG的onerror事件

鉴于本人水平有限，代码中若有错误或者须要改进的地方欢迎各位童鞋常来共同交流，如需转载请附上本博客地址，谢谢。