一，開篇分析
Hi，大家好，給大家拜個晚年！大熊君又和大家見面了，(*^__^*) 嘻嘻……，這系列文章主要是學習Html5相關的知識點，以學習API知識點為入口，由淺入深的引入實例，讓大家一步一步的體會"h5"能夠做什么，以及在實際項目中如何去合理的運用達到使用自如，完美駕馭O(∩_∩)O~，好了，廢話不多說，直接進入今天的主題，
online，offline 事件用來監測瀏覽器處於在線或離線狀態。HTML5提出的離線存儲，web應用程序可以在不連接互聯網的情況下滿足用戶的部分需求，比如在線記事本。當沒有連接互聯網，也就是offline的時候，我們可以把用戶的數據保存在本地，當用戶連接到互聯網的時候，也就是online，我們可以把數據發送到服務器。
二，栗子說明
一個屬性，兩個事件
（1），屬性：window.navigator.onLine
navigator.onLine 屬性表示當前是否在線。如果為 true, 表示在線；如果為 false, 表示離線。當網絡狀態發生變化時，navigator.onLine 的值也隨之變化。開發者可以通過讀取它的值獲取網絡狀態。
if (navigator.onLine) {
alert('online');
} else {
alert('offline');
}
（2），兩個事件
window.addEventListener('online', function(){});
window.addEventListener('offline', function(){});
當開發離線應用時，通過 navigator.onLine 獲取網絡狀態通常是不夠的。開發者還需要在網絡狀態發生變化時立刻得到通知，因此 HTML5 還提供了 online/offline 事件。當在線 / 離線狀態切換時，online/offline 事件將觸發在 body 元素上，並且沿着 document.body，document 和 window 的順序冒泡。因此，開發者可以通過監聽它們的 online/offline 事件來獲悉網絡狀態。
下面給一個我寫過的完整例子，如下代碼：
(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⊙)哦
(*^__^*) 嘻嘻嘻嘻嘻……