大熊君学习html5系列之------Online && Offline(在线状态检测)
一,开篇分析
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
<body onload="loaded()">
<div id="status"><p id="state"/></div>
<div id="log"/>
</body>
(2),css
#status { height:200px; text-align:center; }
#status.online { background:green; }
#status.offline { background:red; }
#log { background:yellow; border:2px solid black; white-space:pre; max-height:200px; overflow:auto; }
(3),js
function updateOnlineStatus(msg) {
var status = document.getElementById("status");
var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
status.setAttribute("class", condition);
var state = document.getElementById("state");
state.innerHTML = condition;
var log = document.getElementById("log");
log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
}
function loaded() {
updateOnlineStatus("load");
document.body.addEventListener("offline", function () { updateOnlineStatus("offline") }, false);
document.body.addEventListener("online", function () { updateOnlineStatus("online") }, false);
}
运行结果:
(四),最后总结
(1),理解Online AND Offline Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。
(2),理解这句话(当开发离线应用时,通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知,因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时,online/offline 事件将触发在 body 元素上,并且沿着 document.body,document 和 window 的顺序冒泡。因此,开发者可以通过监听它们的 online/offline 事件来获悉网络状态。)。
(3),熟练使用以上API,不断实践与重构文章中的栗子。
哈哈哈,本篇结束,未完待续,希望和大家多多交流够沟通,共同进步。。。。。。呼呼呼……(*^__^*) , 如果您觉得有收获,点个推荐(⊙o⊙)哦
(*^__^*) 嘻嘻嘻嘻嘻……
大熊君学习html5系列之------Online && Offline(在线状态检测)的更多相关文章
- 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------XHR2(XMLHttpRequest Level 2)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------WebStorage(客户端轻量级存储方案)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ProcessBar)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...
- 大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...
- 大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...
- 大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ Tab功能扩展完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了一个“Tab”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方 ...
随机推荐
- CST时间转换成 yyyy-MM-dd格式
将 "Tue Oct 28 12:12:10 CST 2010" 时间格式转成 "2010-10-28 12:12:10" 格式: + (NSString *) ...
- ASP.NET Core AD 域登录
在选择AD登录时,其实可以直接选择 Windows 授权,不过因为有些网站需要的是LDAP获取信息进行授权,而非直接依赖Web Server自带的Windows 授权功能. 当然如果使用的是Azure ...
- spark standalone ha spark submit
when you build a spark standalone ha cluster, when you submit your app, you should send it to the l ...
- 【2016-11-10】【坚持学习】【Day23】【Socket 编程初步了解】
网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.
- opencv_haar分类器的训练
本文为作者原创,未经允许不得转载:原文由作者发表在博客园: http://www.cnblogs.com/panxiaochun/p/5345412.html 因为工作的原因,本人需要用到分类器来检测 ...
- NOIP模拟赛20161022
NOIP模拟赛2016-10-22 题目名 东风谷早苗 西行寺幽幽子 琪露诺 上白泽慧音 源文件 robot.cpp/c/pas spring.cpp/c/pas iceroad.cpp/c/pas ...
- [tem]Longest Increasing Subsequence(LIS)
Longest Increasing Subsequence(LIS) 一个美丽的名字 非常经典的线性结构dp [朴素]:O(n^2) d(i)=max{0,d(j) :j<i&& ...
- @Autowired 与@Resource的区别
1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2 @Autowired默认按类型装配(这个注解是属业spring的),默认情况下 ...
- play with make
1) the VPATH variable In make world, the VPATH variable guide you where to find the .c/.o file 2) th ...
- 断今天日期和指定日期相等和两者的时间差为两年的sql
1. ---判断今天日期和指定日期相等 update store set Status =1 where CONVERT(varchar(12) ,opendate, 105 )= CONVERT ...