html5离线存储中用js检测用户是否联网

在hmtl5移动应用中,离线浏览技术越来越流行。但是,新技术的出现有时会给我们WEB开发人员带领额外的苦恼,比如,如何判断用户现在是在线还是离线?幸好,有矛就有盾,JavaScript里的navigator对象帮我们解决这个问题。

navigator.onLine

navigator.onLine属性能给我们提供一个布尔值,用来判断用户是否连接了互联网。你可以这样访问它:

if(navigator.onLine) { // true|false
    // ...
}

没有比这更简单的了!

事件

我们除了能检测这个离线/在线属性值外,还可以绑定offline 和 online事件:

function updateIndicator() {
    // 这时可以根据offline/online按钮的颜色
}

// 根据网络连接情况更新在线状态
window.addEventListener('online',  updateIndicator);
window.addEventListener('offline', updateIndicator);
updateIndicator();

当然,老式的技术里也提供了相应的方法,在body标记上使用ononline 和 onoffline 方法。

我可以想象到很多地方都需要使用这些事件和属性。比如一种情况,当用户正在工作时,断网了,如果我们的WEB应用可以检测出这种状态,可以将用户的写作保持到本地的Web Storage里,等网络恢复后,再提交到服务器上,这样,断网将不会给用户的写作带来影响。这只是一个简单的例子,相信你能想出更多。

需要提醒的是,这个API并不是那么可靠。最古老的定时刷新的技术可以当做一种备案。

HTML5判断设备在线离线及监听网络状态变化例子

经测试android ipad默认的浏览器支持,用appcan封装的网页也支持

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>网络在线与离线</title>
</head>
<body>
<div id="status"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
$$=function(id){return document.getElementById(id);};
 
if(navigator.onLine){$$("status").innerHTML="第一次加载时在线";}else{$$("status").innerHTML="第一次加载时离线";}
 
window.addEventListener("online",online,false);
function online(){$$("status").innerHTML="on";}
 
window.addEventListener("offline",offline,false);
function offline(){$$("status").innerHTML="off";}
</script>
</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索网络
, 应用
, 事件
, 属性
用户
gta5离线模式也要联网、gta5离线模式必须联网、不联网gta5离线模式、不联网的离线导航、html5离线存储,以便于您获取更多的相关知识。

时间: 2024-12-21 17:03:41

html5离线存储中用js检测用户是否联网的相关文章

js检测用户是否联网代码

最简单粗暴的方式就是加载网络资源,JS文件或者图片文件.  代码如下 复制代码 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> typeof window.jQuery === "undefined" // return false or ture 用jQuery变量来检测是否联网  代码如下 复制代码 function d

HTML5离线存储 初探

本文主要内容归纳如下: 一.离线存储的作用:二.如何实现离线存储:三.applicationCache对象,及属性.事件.接口 四.访问缓存应用,相应触发事件,及其对应状态:五.如何更新离线缓存 六.demo演示:update后是否调用swapCache的区别:七.写在后面   一.离线存储的作用 1.用户可离线访问你的应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要 2.用户访问本地的缓存文件,通常意味着更快的访问速度 3.仅仅加载被修改过的资源,避免同一资源对服务器多次的请求,大大

HTML5离线存储归纳及使用实例

HTML5离线存储归纳 一.离线存储的作用 1.用户可离线访问你的应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要 2.用户访问本地的缓存文件,通常意味着更快的访问速度 3.仅仅加载被修改过的资源,避免同一资源对服务器多次的请求,大大降低了对服务器的访问压力 二.如何实现离线存储 1.在html标签里通过manifest属性引用一个cache.manifest文件,该文件里声明了浏览器需缓存的所有资源文件,如下所示: <!DOCTYPE html><html manifest=

js检测用户输入密码强度_javascript技巧

一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱. 2. 如果输入的密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则判定为弱. 3. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的两种组成,则判定为中. 4. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的三种以上组成,则判定为强. 先来看看这个实现的效

HTML5 离线存储之Web SQL

本篇没有考虑异步,多线程及SQL注入 WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite),且不说这些,单看在HTML5中如何实现离线数据的CRUD,最基本的用法(入门级别) 1,打开数据库 2,创建表 3,新增数据 4,更新数据 5,读取数据 6,删除数据 事实上,关键点在于如何拿到一个可执行SQL语句的上下文,像创建表,删除表,CRUD操作等仅区别于SQL语句的写法.OK,貌似 "SqlHelper"啊,换个名字,dataBaseOpe

js检测用户浏览器支持flash版本号实现代码

 代码如下 复制代码 (function(){ ver has=0, ver=0; try{ has=new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if(has) { ver = +(has.GetVariable("$version").match(/d+/)); } } catch(e){ has=navigator.plugins["Shockwave Flash"]; if(has) { ver =

js检测用户与年龄有效验证代码

此JavaScript检查是否姓名和年龄的形式包含有效的字符 <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function validate(){ var digits="0123456789" var temp if (document.testform.Name.value=="") { alert("No Name !") return false } if (d

js检测用户浏览器类型

提示:您可以先修改部分代码再运行 浏览器名称: 版本号: 代码名称: 用户代理标识: 提示:您可以先修改部分代码再运行

让 JavaScript 拯救 HTML5 的离线存储

在 Internet 连接无处不在的今天,我们忽然有了另外一个需求,离线 Web.Gmail, Google Reader, Zoho 这些优秀的 Web 应用都支持离线使用,这归功于 Google Gears.然而真正的离线 Web 要靠 HTML 5,这个未来的 Web 语言明星将为  Web 的离线存储制定一套标准,W3C已经发布 HTML5 离线存储细则.   有人可能会说,离线 Web 毫无意义,你得到的只是一个蹩脚的桌面程序,在 wi-fi, 3G 无处不在的今天,我们大部分时间都是