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......
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
