Big Bear learn HTML5 series------online && Offline (online status detection)

First, the opening analysis

Hi, everyone, for everyone to worship an old age! Big Bear June again and everyone met, (*^__^*) hehe ..., this series of articles is mainly to learn HTML5 related knowledge points, to learn API knowledge points for the entrance, the introduction of an example of the first-order, let everyone step by step experience "H5" can do what, As well as in the actual project how to use the reasonable application to achieve the freedom, the perfect harness O (∩_∩) o~, well, nonsense not to say, directly into today's theme,

online , offline the event is used to monitor the browser's online or offline status. HTML5 's proposed offline storage, Web applications can meet some of the user's needs, such as online notepad, without connecting to the Internet. When the internet is not connected, that is offline, we can save the user's data locally, when the user connected to the Internet, that is, online, we can send data to the server.

Two, chestnut description

One property, two events

(1), property:window.navigator.onLine

The Navigator.online property indicates whether it is currently online. If true, indicates online, or if False, is offline. When the network state changes, the value of the navigator.online changes as well. The developer can get the network status by reading its value.

　　

if (navigator.online) {  alert (' OnLine ');} else {  alert (' Offline ');}

　　

(2), two events

　　window.addEventListener(‘online‘, function(){});

    Window. Addeventlistener ( ' offline '  
                 /strong>  

　When developing offline applications, it is often not enough to get the network state via Navigator.online. Developers also need to be notified immediately when the network status changes, so HTML5 also provides online/offline events. When the online/offline status switch occurs, the Online/offline event is triggered on the body element and bubbled along the order of document.body,document and window. As a result, developers can learn about network status by listening to their online/offline events.

Here is a complete example of what I have written, the following code:

　

(function (Win) {function Bbnetwork (callback) {this.navigator = Win.navigator; this.callback = callback; This._init ();}; var bbnetworkproto = bbnetwork.prototype; bbnetworkproto._init = function () {var = 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 ("currently offline (>_<) ~ ~ ~ ~ ~ ~ ~ ~ ~ ~"). Show (); Else{el.hide ();}}) if (!bbnetwork.isonline ()) {el.html ("currently offline * ~ ~ ~ (>_<) ~ ~ ~ ~ ~ ~"). Show ();});

Run effect (Disconnect network first)

　　

Support situation:

　　Desktop Apps

　　

Mobile Apps

　　

Third, instance sharing

(1), HTML

　

1 <Bodyonload= "loaded ()">2   <DivID= "status"><PID= "State"/></Div>3   <DivID= "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 functionUpdateonlinestatus (msg) {2   varStatus = document.getElementById ("status");3   varCondition = Navigator.online? "ONLINE": "OFFLINE";4Status.setattribute ("Class", condition);5   varState = document.getElementById ("state");6state.innerhtml =condition;7   varLog = document.getElementById ("Log");8Log.appendchild (document.createTextNode ("Event:" + msg + "; Status= "+ condition +" \ n "));9 }Ten functionloaded () { OneUpdateonlinestatus ("Load"); ADocument.body.addEventListener ("Offline",function() {Updateonlinestatus ("Offline")},false); -Document.body.addEventListener ("Online",function() {updateonlinestatus ("online")},false); -}

Operation Result:

　　

(iv), concluding

(1), understand how the online and Offline API is used and what is used in specific instances to solve problems.

(2) To understand this sentence (when developing offline applications, it is usually not enough to get the network state via Navigator.online. Developers also need to be notified immediately when the network status changes, so HTML5 also provides online/offline events. When the online/offline status switch occurs, the Online/offline event is triggered on the body element and bubbled along the order of document.body,document and window. As a result, developers can learn about network status by listening to their online/offline events. ）。

(3), skilled in using the above API, and constantly practice and reconstruct the chestnut in the article.

　　　　　　　　hahaha, the end of this article, not to be continued, hope and we have enough communication, common progress ... To shout ... (*^__^*), if you feel the harvest, point a recommendation (⊙o⊙) OH

(*^__^*) Xi hee hee ...

Big Bear learn HTML5 series------online && Offline (online status detection)