在线状态检测

如果 Web 应用程序仅仅是一些静态页面的组合，那么通过 cache manifest 缓存资源文件以后，就可以支持离线访问了。但是随着互联网的发展，特别是 Web2.0 概念流行以来，用户的提交的数据渐渐成为互联网的主流。那么在开发支持离线的 Web 应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时，把数据存储在本地；在线以后，再把数据同步到服务器上。为了做到这一点，开发者首先必须知道浏览器是否在线。HTML5 提供了两种检测是否在线的方式：navigator.online 和 online/offline 事件。
 navigator.onLine
    navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。
 online/offline 事件
    当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。

时间： 2024-10-25 09:20:14

在线状态检测的相关文章

大熊君学习html5系列之------Online && Offline（在线状态检测）

一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, online,offline 事件用来监测浏览器处于在线或离线状态.HTML5提出的离线存储,web应用程序可以在不连接互联网的情况下满足用户的部分需求,

读javascript高级程序设计17-在线检测,cookie,子cookie

一.在线状态检测 开发离线应用时,往往在离线状态时把数据存在本地,而在联机状态时再把数据发送到服务器.html5提供了检测在线状态的方法:navigator.onLine和online/offline事件. 1.navigator.onLine属性 表示当前的网络状态是否在线,true表示在线,false表示离线.当网络状态变化时,该属性也会随之变化. 2.online和offline事件 HTML5提供了这两个事件,会在网络状态变化时触发.online在网络由离线变为在线时触发:offline

CentOS 7以yum方式安装zabbix3.2及配置文件详解

一.zabbix简介与环境准备 简介详见 ---> zabbix简介 环境准备: CentOS 7(node7):zabbix-server,web,mysql,agent mariadb:5.5.50 zabbix组件:3.2.1 apache:2.4.6 二.安装与配置 1.安装数据库(mariadb),可直接yum安装 [[email protected] ~]# vim /etc/yum.repos.d/MariaDB.repo [mariadb]  name = MariaDB  ba

利用HTML5开发Android(6)---构建HTML5离线应用

需要提供一个cache manifest文件,理出所有需要在离线状态下使用的资源例如 Manifest代码 1 CACHE MANIFEST 2 #这是注释 3 images/sound-icon.png 4 images/background.png 5 clock.html 6 clock.css 7 clock.js 8 9 NETWORK: 10 test.cgi 11 12 CACHE: 13 style/default.css 14 15 FALLBACK: 16 /files/pr

Javascript中关于cookie的那些事儿

Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什么组成? Cookie的形式: Cookie是由name=value形式成对存在的,Cookie字符串必须以分号作为结束符,Cookie除了name属性之外还存在其他4个相关属性. 设置Cookie的语法如下: set-Cookie:name=value;[expires=date];[path=d

HTML5 离线应用程序 接口实现离线数据缓存【精心收藏】

1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest文件名称:name.appcache作用:用于配置需要缓存的文件 2.使用方法 在服务器上添加MIME TYPE在apache virtual host 中添加 1 AddType text/cache-manifest .appcache 创建 name.manifest,文件后缀可自定义,定义后需要在服务器上添加对应的MIME TYPE 1 CACHE MANIFEST 2 3 #VER

利用HTML5开发Android笔记（下篇）

资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 (上)包括Android设备多分辨率的问题,Android中构建HTML5应用程序基础 (中)包括Android与JS之间的互动,Android处理JS的警告对话框等,Android中的调试 (下)包括本地储存在Android中的应用,地理位置的应用,离线应用的构建 —————————————————

离线web存储

本地缓存与浏览器网页的缓存 本地缓存与浏览器网页缓存的区别 离线缓存需要 本地缓存web应用程序的所有html css. js 文件本地缓存服务于整个web应用 浏览器网页缓存只服务于单个网页, 任何网页都具有缓存,而本地缓存只缓存你指定缓存的网页.网页缓存不安全.不可靠,我们不知道网站中缓存了哪些网页,缓存了哪些网页上的资源.本地缓存是可靠,我们可以控制对那些没内容进行缓存,开发人员还可用编程的手段来控制缓存的更新,利用缓存对象的属性.状态事件开发更强大的离线web应用. manifest文件

Html5开发总结

[Html5能够离线操作.能否开发Html5离线网络应用程序] 按常理Html5开发出来的是Web网页应用,则需网络连接才能下载并使用,作为Html5对离线应用开发的支持最大的特殊,支持离线需要满足如下条件: 离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件.这样,浏览器才能在在线状态时,把这些文件缓存到本地.此后,当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用.HTML5 中,通过 cache manifest 文件指明需要缓存的资源,并支持自动和手动两种