首页 > 代码库 > h5 网络断网时,返回上一个页面 demo (与检测网络代码相结合,更直观看到结果)

h5 网络断网时,返回上一个页面 demo (与检测网络代码相结合,更直观看到结果)

页面一:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网络在线与离线</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

</head>

<body>
<p><a href="http://www.mamicode.com/one.html" onclick="goNext()">这是index页面</a></p>

<div id="status"></div>
<!--这个方法是用来跳转下一页的-->
<script>
function goNext(){
    //前进下一页
window.history.go(1)
}
</script>

<!--这个是用来测试有没有网络js 对你来说没啥用 就是检测网络的-->
<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>



第二个页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>two</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<p onclick="goBack()">返回上一个页面</p>
<p>这是第二个页面</p>
<!--这个方法是用来返回上一页的-->
<script>
function goBack(){
window.history.go(-1)
}
</script>
</body>
</html>


当连网时,你打开了第一个页面以及第二个页面,当忽然断网时,你本身处在第二个页面,点击<p>"返回上一个页面"按钮时,可以返回到历史纪录的第一个页面,并且再次点击第一个页面的<p>"这是index页面"按钮时,也可以跳转到已经记录过的第二个页面。


h5 网络断网时,返回上一个页面 demo (与检测网络代码相结合,更直观看到结果)