h5 網絡斷網時，返回上一個頁面 demo (與檢測網絡代碼相結合，更直觀看到結果)
阿新 • • 發佈：2017-05-18
oct width 加載 doctype lin 測試 htm mini offline
頁面一：
<!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="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 (與檢測網絡代碼相結合，更直觀看到結果)