方法一、H5的屬性 online和offline
online,offline事件用來監測浏覽器處于線上或離線狀态。HTML5提出的離線存儲,web應用程式可以在不連接配接網際網路的情況下滿足使用者的部分需求,比如線上記事本。當沒有連接配接網際網路,也就是offline的時候,我們可以把使用者的資料儲存在本地,當使用者連接配接到網際網路的時候,也就是online,我們可以把資料發送到伺服器。
(1),屬性:
window.navigator.onLinenavigator.onLine 屬性表示目前是否線上。如果為 true, 表示線上;如果為 false, 表示離線。當網絡狀态發生變化時,navigator.onLine 的值也随之變化。開發者可以通過讀取它的值擷取網絡狀态。
(function(){
// console.log('已經執行!');
if(!navigator.onLine) {
//alert('請檢查網絡是否連接配接!');
var URLerr = document.getElementsByTagName("body")[0];
URLerr.innerHTML = "網絡已斷開連接配接";
document.getElementsByTagName("body")[0].style.textAlign="center";
return false;
}
}())
(2)兩個事件
當開發離線應用時,通過 navigator.onLine 擷取網絡狀态通常是不夠的。開發者還需要在網絡狀态發生變化時立刻得到通知,是以 HTML5 還提供了 online/offline 事件。當線上 / 離線狀态切換時,online/offline 事件将觸發在 body 元素上,并且沿着 document.body,document 和 window 的順序冒泡。是以,開發者可以通過監聽它們的 online/offline 事件來獲悉網絡狀态。
window.addEventListener('online', function(){}); window.addEventListener('offline', function(){}); 參考檔案位址: https://www.cnblogs.com/bigbearbb/p/4299003.html方法二、ping.js
安裝ping.js npm imstall ping.js
在需要的元件引入 import Ping from 'ping.js'
具體使用看代碼:
