位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 支持离线行为

提问人:刘团圆发布时间:2020-11-17

    假设要构建一个包含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>


继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部