Learn the html5 series ------ Online & amp; Offline (online status detection), html5 ------ Online

Source: Internet
Author: User

Learn the html5 series ------ Online & Offline (online status detection), html5 ------ Online

I. Opening Analysis

Hi, everybody. I want to thank you for your old age! I met you again, (* ^__ ^ ......, This series of articles mainly focus on Html5-related knowledge points, taking Learning API knowledge points as the entrance and introducing instances from a simple perspective, so that you can understand what "h5" can do step by step, and how to use it properly in actual projects to achieve ease of use, and to perfectly control O (strong _ strong) O ~, Well, let's talk a little bit about it. Let's go directly to today's topic,

online,offlineEvents are used to monitor whether the browser is online or offline. For offline storage proposed by HTML5, web applications can meet some user needs without connecting to the Internet, such as online notepad. When there is no connection to the Internet, that is, offline, we can save the user data locally. When the user is connected to the Internet, that is, online, we can send the data to the server.

 

2. Description of chestnuts

One attribute and two events

(1), attributes:Window. navigator. onLine

The navigator. onLine attribute indicates whether the current status is onLine. True indicates online. false indicates offline. When the network status changes, the value of navigator. onLine also changes. Developers can obtain 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',  function(){});

When developing offline applications, it is usually not enough to obtain the network status through 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 is switched, the online/offline Event is triggered on the body element and bubbles along the order of document. body, document, and window. Therefore, developers can learn the network status by listening to their online/offline events.

The following code provides a complete example that I have written:

 

(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)cancel.html ("currently offline ~~~~ (>_< )~~~~ "). Show () ;}else {el. hide () ;}}); if (! Bbnetwork.isonline(~~el.html ("offline currently ~~~~ (>_< )~~~~ "). Show ();}});

 

Running Effect (disconnect the network first)

  

 

 

 

Support:

 Desktop applications

  

 

Mobile applications

  

 

 

Iii. instance sharing

(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 }

 

Running result:

  

 

 

(4). Conclusion

(1) understand how to use the Online AND Offline APIs AND the problems used in specific instances.

(2) Understand this sentence (when developing offline applications, it is usually not enough to obtain the network status through 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 is switched, the online/offline Event is triggered on the body element and bubbles along the order of document. body, document, and window. Therefore, developers can learn the network status by listening to their online/offline events .).

(3) be familiar with the above APIs and constantly practice and reconstruct the chestnuts in the article.

 

 

        Hahaha, this article is over and is not to be continued. I hope to communicate with you more and make progress together ...... Call ...... (* ^__ ^ *). If you think there are gains, click a recommendation (⊙ o ⊙ ).

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.