老师,如果我是直接从页面1到页面3,那么页面3回退就有问题了,如果这里回退要先进行判断上个页面是几,这里该怎么写呢?

老师,如果我是直接从页面1到页面3,那么页面3回退就有问题了,如果这里回退要先进行判断上个页面是几,这里该怎么写呢?

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>页面1</title>

</head>


<body>

    <h2>我是页面1</h2>

    <a href="./页面2.html">去页面2</a>

    <a href="./页面3.html">去页面3</a>

</body>


</html>


<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>


<body>

    <h2>我是页面2</h2>

    <a href="javascript:history.back();">回退到页面1</a>

    <a href="./页面3.html">去页面3</a>

</body>


</html>


<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>


<body>

    <h2>我是页面3</h2>

    <button id="btn1">返回页面1</button>

    <button id="btn2">返回页面2</button>

    <script>

        var n = document.getElementById('btn1');

        var t = document.getElementById('btn2');

        n.onclick = function() {

            history.go(-2);

        }

        t.onclick = function() {

            history.go(-1);

        }

    </script>

</body>


</html>






正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,使用window.history.length判断浏览了几个页面,然后再设置相应的回退步数即可,具体设置如下:

http://img1.sycdn.imooc.com//climg/6045d2c1090a7fc006890412.jpg

演示效果:

http://img1.sycdn.imooc.com//climg/6045d3880a0b784900000000.jpg

祝学习愉快!

  • 慕田峪6072870 提问者 #1

    如果从页面1进入到页面3,然后在从页面3退回页面2,该怎么实现呢?

    2021-03-08 16:27:27
  • 樱桃小胖子 回复 提问者 慕田峪6072870 #2

    同学你好,关于同学的问题解答如下:

    http://img1.sycdn.imooc.com//climg/6045ee3c098c7f3111520300.jpg

    祝学习愉快!

    2021-03-08 17:28:54
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师