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

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

2024-09-23 05:32:48   217人阅读

页面一：

<!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 (与检测网络代码相结合，更直观看到结果)






























        

            
                
                  
                
                

                    联系

                    我们