大熊君学习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”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方 ...
随机推荐
- 运用PCA进行降维的好处
运用PCA对高维数据进行降维,有一下几个特点: (1)数据从高维空间降到低维,因为求方差的缘故,相似的特征会被合并掉,因此数据会缩减,特征的个数会减小,这有利于防止过拟合现象的出现.但PCA并不是一种 ...
- POJ1275 Cashier Employment[差分约束系统 || 单纯形法]
Cashier Employment Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7997 Accepted: 305 ...
- 第7章 权限管理（1）_ACL权限
1. ACL权限 1.1 ACL权限简介与开启 (1)ACL权限简介 ①ACL是Access Control List的缩写,主要目的是在提供传统的owner,group,others的read,wr ...
- webpack中字体配置，可以引入bootstrap
{test:/\.(eot|ttf|woff|woff2|svg)$/,loader:'file?name=fonts/[name].[ext]'} 将css中用到的字体全部提取存放到fonts目录下 ...
- jquery的css详解（二）
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- PHP用法
链接: php编写app接口(一)-JSON方式封装接口数据方法 php 非常有用的高级函数PATH_SEPARATOR常量和set_include_path date_default_timezon ...
- Win10系统出问题？简单一招即可修复win10！
时至今日,win10系统的普及率越来越高,在微软多种策略的强推下,10月份win10系统的市场份额已达22.59%,但win10系统也不是完美的,总有些还是会出现一些诸如打开应用程序出现闪退.乱码.总 ...
- vc++2013中使用MySQL connector/C++ 1.1.4静态链接报错
包含头文件 #include <mysql_connection.h> #include <mysql_driver.h> #include <cppconn/state ...
- Microsoft.VisualStudio.TestTools.UnitTesting 命名空间
类 说明 AfterAssemblyCleanupEventArgs 为 AfterAssemblyCleanup 事件提供数据. AfterAssemblyInitializeEventArgs ...
- 【深度分享】千团大战：看今天商业WiFi乱局及其破解之道
不知道还有没有人记得起始于2010年的千团大战.从2010年初开始,第一家团购网站上线以来,到2011年底,团购网站的数量超过了5000家.当时就有很多媒体预言,2013年,团购的泡沫就将褪去,将有9 ...