判断网络是否连接MDN：各浏览器对该属性的实现有些不同。在Chrome和Safari中，如果浏览器连接不上局域网 (L

判断网络是否连接

1、H5的navigator新特性的onLine属性可以判断

window.navigato.onLine (true: 在线；false: 离线)

注意：

MDN：各浏览器对该属性的实现有些不同。

在Chrome和Safari中，如果浏览器连接不上局域网 (LAN)或者路由器，就是离线状态；否则就是在线状态。所以当该属性值为false的时候，你可以说浏览器不能正常联网，但如果该属性值为true的时候，并不意味着浏览器一定能连接上互联网。还有其他一些可能引起误判的原因，比如你的电脑安装了虚拟化软件，可能会有一个虚拟网卡，这时它总是会显示正常联网。因此，如果你想得到浏览器确切的联网状态，应该使用其他额外的检查手段。

你可以在 window.onOnline 和 window.onOffline 上监听事件,来获取浏览器联网状态的改变情况.

2、使用window.onOnline和window.onOffline事件

window.addEventListener("offline", function(e) {alert("offline");})

window.addEventListener("online", function(e) {alert("online");})

兼容性写法

为了检测应用是否离线，通过监听事件：online和offline。当网络从离线变为在线或者从在线变为离线时，（在window对象上触发）分别触发这两个事件。
首先：在页面加载后，最好先通过navigator.onLine取得初始的状态。
其次：通过对上述两个事件的监听来确定网络连接状态是否变化。（navigator.onLine属性值）

事件兼容封装
utils.js

    export const checkLineHandler = (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
      }
    }

全局监听网络连接状态是否变化（将状态保存在 vuex中）

    checkLineHandler(window, 'offline', () => {
      this.$notify({
        title: '警告',
        message: '请检查网络是否连接',
        type: 'warning'
      })
      this.$store.commit(types.SET_LINE_STATE, false)
    })
    checkLineHandler(window, 'online', () => {
      this.$notify({
        title: '成功',
        message: '网络已连接',
        type: 'success'
      })
      this.$store.commit(types.SET_LINE_STATE, true)
    })

根据业务场景来（比如在上传文件时，没有网络时，直接阻止）

    if (window.navigator.onLine === false || this.$store.state.isonLine === false) {
        this.$notify({
          title: '警告',
          message: '请检查网络是否连接',
          type: 'warning'
        })
      } else {
        this.isDragMaskShow = true
        this.fileList = fileList
      }