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

时间：2022-06-25 18:16:09 编辑：袖梨来源：一聚教程网

在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封装的网页也支持





网络在线与离线

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";}

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程