大熊君學習html5系列之------Online && Offline（在線狀態檢測）

時間 2019-12-14

標籤學習 html5 html 系列 online offline 在線狀態檢測欄目 HTML5 简体版

原文原文鏈接

一，開篇分析javascript

Hi，你們好，給你們拜個晚年！大熊君又和你們見面了，(*^__^*) 嘻嘻……，這系列文章主要是學習Html5相關的知識點，以學習API知識點爲入口，由淺入深的引入實例，讓你們一步一步的體會"h5"可以作什麼，以及在實際項目中如何去合理的運用達到使用自如，完美駕馭O(∩_∩)O~，好了，廢話很少說，直接進入今天的主題，css

online，offline 事件用來監測瀏覽器處於在線或離線狀態。HTML5提出的離線存儲，web應用程序能夠在不鏈接互聯網的狀況下知足用戶的部分需求，好比在線記事本。當沒有鏈接互聯網，也就是offline的時候，咱們能夠把用戶的數據保存在本地，當用戶鏈接到互聯網的時候，也就是online，咱們能夠把數據發送到服務器。html

二，栗子說明java

一個屬性，兩個事件web

（1），屬性：window.navigator.onLine瀏覽器

navigator.onLine 屬性表示當前是否在線。若是爲 true, 表示在線；若是爲 false, 表示離線。當網絡狀態發生變化時，navigator.onLine 的值也隨之變化。開發者能夠經過讀取它的值獲取網絡狀態。服務器

if (navigator.onLine) {
  alert('online');
} else {
  alert('offline');
}

　（2），兩個事件網絡

　　window.addEventListener('online', function(){});app

 window.addEventListener('offline',  function(){});

　　當開發離線應用時，經過 navigator.onLine 獲取網絡狀態一般是不夠的。開發者還須要在網絡狀態發生變化時馬上獲得通知，所以 HTML5 還提供了 online/offline 事件。當在線 / 離線狀態切換時，online/offline 事件將觸發在 body 元素上，而且沿着 document.body，document 和 window 的順序冒泡。所以，開發者能夠經過監聽它們的 online/offline 事件來獲悉網絡狀態。ide

下面給一個我寫過的完整例子，以下代碼：

(function(win){
	function BBNetwork(callback){
		this.navigator = win.navigator ;
		this.callback = callback ;
		this._init() ;
	} ;
	var bbNetworkProto = BBNetwork.prototype ;
	bbNetworkProto._init = function(){
		var that = this ;
		win.addEventListener("online",function(){
			that._fnNetworkHandler() ;
		},true) ;
		win.addEventListener("offline",function(){
			that._fnNetworkHandler() ;
		},true) ;
	} ;
	bbNetworkProto._fnNetworkHandler = function(){
		this.callback && this.callback(this.navigator.onLine ? "online" : "offline") ;
	} ;
	bbNetworkProto.isOnline = function(){
		return this.navigator.onLine ;
	} ;
	win.BBNetwork = BBNetwork ;
})(window) ;
$(function(){
	var el = $("#h5Native") ;
	var bbNetwork = new BBNetwork(function(status){
		var tipMsg = "" ;
		if("online" != status){
			el.html("目前處於離線狀態~~~~(>_<)~~~~ ").show() ;
		}
		else{
			el.hide() ;
		}
	}) ;
	if(!bbNetwork.isOnline()){
		el.html("目前處於離線狀態~~~~(>_<)~~~~ ").show() ;
	}
}) ;

　　運行效果（首先斷開網絡）

支持狀況：

　　桌面應用

　　移動應用

三，實例分享

（1），html

1 <body onload="loaded()">
2   <div id="status"><p id="state"/></div>
3   <div id="log"/>
4 </body>

（2），css

1 #status { height:200px; text-align:center; }
2 #status.online { background:green; }
3 #status.offline { background:red; }
4 #log { background:yellow; border:2px solid black; white-space:pre; max-height:200px; overflow:auto; }

（3），js

 1 function updateOnlineStatus(msg) {
 2   var status = document.getElementById("status");
 3   var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
 4   status.setAttribute("class", condition);
 5   var state = document.getElementById("state");
 6   state.innerHTML = condition;
 7   var log = document.getElementById("log");
 8   log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
 9 }
10 function loaded() {
11   updateOnlineStatus("load");
12   document.body.addEventListener("offline", function () { updateOnlineStatus("offline") }, false);
13   document.body.addEventListener("online", function () { updateOnlineStatus("online") }, false);
14 }

運行結果：

（四），最後總結

　　（1），理解Online AND Offline Api的使用方式以及具體實例中使用的目的是爲了解決哪些問題。

　　（2），理解這句話（當開發離線應用時，經過 navigator.onLine 獲取網絡狀態一般是不夠的。開發者還須要在網絡狀態發生變化時馬上獲得通知，所以 HTML5 還提供了 online/offline 事件。當在線 / 離線狀態切換時，online/offline 事件將觸發在 body 元素上，而且沿着 document.body，document 和 window 的順序冒泡。所以，開發者能夠經過監聽它們的 online/offline 事件來獲悉網絡狀態。）。

　　（3），熟練使用以上API，不斷實踐與重構文章中的栗子。

　　　　　　　　哈哈哈，本篇結束，未完待續，但願和你們多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)　　, 若是您以爲有收穫，點個推薦(⊙o⊙)哦

(*^__^*) 嘻嘻嘻嘻嘻……