在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离线存储,以便于您获取更多的相关知识。