有关页面跳转

最新推荐文章于 2022-04-29 20:27:14 发布

原创最新推荐文章于 2022-04-29 20:27:14 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了多种页面跳转方法，包括a标签、window.location.href、window.location.replace、window.history.forward及back等，并对比了它们对history.length的影响及数据缓存特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现跳转的方式大概有如下几种：

<body>
    <div>...b页面...</div>
    <input type="text" placeholder="请输入...">
    <div>
        <a href="/a.html">[a标签]跳转到a页</a>
    </div>
    <div id="_b1">[window.location.href]跳转到a页</div>
    <div id="_b2">[window.location.replace()]跳转到a页</div>
    <div id="_b3">[window.history.forward()]前进一页</div>
    <div id="_b4">[window.history.back()]后退一页</div>
    <script>
        alert('b页面重新执行啦')
        document.getElementById('_b1').onclick=function(){
            window.location.href = '/a.html';
        }
        document.getElementById('_b2').onclick=function(){
            window.location.replace('/a.html');
        }
        document.getElementById('_b3').onclick=function(){
            window.history.forward();
            // 或者写成
            // window.history.go(1);
        }
        document.getElementById('_b4').onclick=function(){
            window.history.back();
            // 或者写成
            // window.history.go(-1);
        } 
    </script>
</body>

除此之外，还包括浏览器自带的 "前进" 和 "后退" 按钮;

以上所有的页面跳转方式都会导致页面js的重新执行；

"前进" 按钮效果等同于 window.history.forward() 或者 window.history.go(1)；

>>>>>> 这种方式只是前进到下一个页面，不会更改history.length，前进到的页面也会缓存之前的数据；

"后退" 按钮效果等同于 window.history.back() 或者 window.history.go(-1)；

>>>>>> 这种方式只是后退到下一个页面，不会更改history.length，后退到的页面也会缓存之前的数据；

例如：在b页面输入一些内容，然后再跳转到a页面，然后再从a页面点击"后退" 按钮或者执行window.history.back() 或者执行window.history.go(-1) 这三种方式回到b页面，那么b页面之前输入的内容依然会存在。

a标签和 window.location.href 实现的页面跳转则会增加 window.history.length;

window.location.replace() 该方法实现的页面跳转则是替换当前的页面地址，同样也不会改变 window.history.length;