HTML5 --- navigator.onLine 離線檢測

標籤：

navigator.onLine，是一個屬性，返回瀏覽器的連網狀態。主要用於查看你是否串連上了互連網。

在正常連網的情況下會返回true，沒有連網即離線的狀態下返回false。

一旦瀏覽器的連網狀態發生改變時，該屬性值也會隨之變化。

        // 查看你是否串連上了互連網，通過window.navigator.onLine 的值進行判斷,        // 如果是true，則說明連上了互聯        if (navigator.onLine) {            console.log("online");        }else{            console.log("offline");        }

 

實際應用中，navagator.online在不同的瀏覽器之間存在著差異。
在Chrome和Safari中，如果瀏覽器串連不上區域網路 (LAN)或者路由器，就是離線狀態；否則就是線上狀態。
在Firefox和Internet Explorer中，如果瀏覽器處於"離線工作"狀態，則返回 false,其他情況都返回true.
所以當該屬性值為false的時候，你可以說瀏覽器不能正常連網，但如果該屬性值為true的時候，並不意味著瀏覽器一定能串連上互連網。

 

因此為了更好地確定網路連接是否可用，HTML5還為我們定義了兩個事件：online和offline。

可以使用addEventListener在window.onOnline和window.onOffline上監聽事件,來擷取瀏覽器連網狀態的改變情況.

        // 使用window.onOnline和window.onOffline事件, 監聽瀏覽器的連網狀態        window.addEventListener("online", function(){            console.log("瀏覽器連上了網路");        });        window.addEventListener("offline", function(){            console.log("瀏覽器未連上了網路");        });

 

注意：
　　1、檢測ononline事件,要綁定在window對象上
　　2、當瀏覽器從線上和離線的狀態中進行切換死，這兩個事件會在頁面的body上觸發。
　　　  online與offline事件會從document.body冒泡到document上，最後到達window。這兩個事件都無法被取消，因為你無法阻止使用者進入線上或離線狀態。

 

Link:

https://developer.mozilla.org/zh-CN/docs/Web/API/NavigatorOnLine/onLine

https://developer.mozilla.org/zh-CN/docs/Online_and_offline_events

 

HTML5 --- navigator.onLine 離線檢測