zoukankan      html  css  js  c++  java
  • 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="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页面"按钮时,也可以跳转到已经记录过的第二个页面。


    
    
    Lyn小娜签名:聪明出于勤奋,天才在于积累。
  • 相关阅读:
    bzoj2555-SubString
    离散对数
    xsy1436-括号游戏
    bzoj1143-祭祀
    连通分量
    bzoj3864-hdu4899-Hero meet devil
    bzoj3238-差异
    poj1065-Wooden Sticks
    多项式除法
    JavaScript 对象
  • 原文地址:https://www.cnblogs.com/lynna/p/6874846.html
Copyright © 2011-2022 走看看