一，开篇分析

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（在线状态检测）的更多相关文章

  1. 大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  2. 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  3. 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  4. 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  5. 大熊君学习html5系列之------History API（SPA单页应用的必备）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  6. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ProcessBar）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  7. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  8. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  9. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了一个“Tab”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方 ...

随机推荐

  1. JQuery判断元素是否存在

    JQuery判断元素是否存在的原理与javascript略有不同,因为$选择器选择的元素无论是否存在都不会返回null或undefined,要使用JQuery判断元素是否存在,只能使用length属性 ...

  2. 基础SQL语句/语法

    SQL是现在进入互联网工作人们的必须技能之一,下面分享自己觉得很nice的SQL基本语句,从网上找了,觉得很不错,就分享给大家!简要介绍基础语句: 1.说明:创建数据库  Create DATABAS ...

  3. 【2016-11-6】【坚持学习】【Day21】【主窗口关闭时，同步关闭它的子窗口】

    本来想用委托实现的.但是又觉得没有必要. 方法如下: public MainWindow() { InitializeComponent(); this.Closing += MainWindow_C ...

  4. Python+selenium自动化脚本编辑过程中遇到的问题和小技巧

    应该也不算是问题和技巧,算是实践中学习到的Python,记录下,也不定时更新 1.通过截取url判断 实例: self.assertEqual(self.broswer.current_url[sel ...

  5. AC日记——寻找道路 洛谷 P2296

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足条 ...

  6. idea如何设置类头注释和方法注释

    CSDN 2016博客之星评选结果公布      [系列直播]算法与游戏实战技术      "我的2016"主题征文活动 详细:idea如何设置类头注释和方法注释 标签: idea ...

  7. 深入理解Java之泛型

    原文出处: absfree 1. Why ——引入泛型机制的原因 假如我们想要实现一个String数组,并且要求它可以动态改变大小,这时我们都会想到用ArrayList来聚合String对象.然而,过 ...

  8. C++学习笔记(1)

    本学习笔记是C++ primer plus(第六版)学习笔记.复习C++基础知识的可以瞄瞄. 转载请注明出处http://www.cnblogs.com/zrtqsk/p/3874148.html,谢 ...

  9. Qt——消息对话框的设计

    1.消息对话框是什么 消息对话框(MessageBox)提供了一个模态对话框,用来通知用户某些信息,或者用来询问用户一个问题并获得一个答复. 先看下面2张图—— 第一张图是网易云音乐的界面截图,在删除 ...

  10. 搭建一套自己实用的.net架构(2)【日志模块-log4net】

    先谈谈简单的模块,日志.在系统中日志模块是必须的,什么系统日志,操作日志,调试日志.这里用的是log4net. 对log4net还不熟悉的小伙伴们赶快去搜索基础教程哦, 我这里就不温故了. 那么有人要 ...