HTML5 支持离线行为
假设要构建一个包含css、js、HTML的单页应用,同时要为这个单页应用添加离线支持。要将描述文件与页面关联起来,需要使用HTML标签的manifest特性指定描述文件的路径,代码如下:
<html manifest='./offline.appcche'>
开发离线应用的第一步就是检测设备是否离线。 _
HTML5新增了navigator.onLine属性。当它为true的时候,表示联网;值为false的时候,表示离线,代码如下:
if (navigator.onLine) {
//联网
}else{
//离线
}
1.online事件(IE9+浏览器支持)
当网络从离线变为在线的时候,触发该事件,在Window上触发该事件,不需要刷新,代码如下:
window.online = function(){
//需要触发的事件
}
2.offline事件(IE+浏览器支持)
当网络从在线变为离线的时候,触发该事件。和online事件一样,在Window上触发该事件,不需要刷新,代码如下:
window.offline = function(){
//需要触发的事件
}
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function loadState(){
if(navigator.online){
console.log("在线");
}else{
console.log("离线");
}
//添加事件监听器,实时监听
window.addEventListener("在线"function(){
console.log("在线");
},true);
window.addEventListener("离线"function(){
console.log("离线");
},true);
}
</script>
</head>
<body>
</body>
</html>
点击加载更多评论>>