判斷網路是否連線

前端小白ML發表於2019-11-26

判斷網路是否連線

判斷網路是否連線

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屬性值）

  1. 事件相容封裝
    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
      }
    }
複製程式碼
  1. 全域性監聽網路連線狀態是否變化 （將狀態儲存在 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)
    })
複製程式碼
  1. 根據業務場景來 （比如在上傳檔案時，沒有網路時，直接阻止）
    if (window.navigator.onLine === false || this.$store.state.isonLine === false) {
        this.$notify({
          title: '警告',
          message: '請檢查網路是否連線',
          type: 'warning'
        })
      } else {
        this.isDragMaskShow = true
        this.fileList = fileList
      }
複製程式碼

相關文章