干货：网页跳转的写法大全及其用途区别

时候，我们会希望网页自动跳转，应用场景包括：

提交表单后自动转到另外一个页面，
页面地址变了，希望访问老地址时能自动转到新地址，等等。

下面总结下如何在前端页面中控制跳转的方法：

利用html的refresh

<meta http-equiv="refresh" content="0;url=index.html">

其中0表示0秒以后跳转，可以自行设定时间。

利用js的href属性

window.location.href='index.html';

如果要设定延迟时间，则加上setTimeout

setTimeout("javascript：location.href='index.html'", 5000);

利用js的navigate方式

window.navigate("index.html");

自动刷新页面

在上述方式中，如果跳转的页面就是本页面，那么就是自动刷新页面的功能。

或者使用reload

location.reload()

window.history.go(-1);

其中 -1 表示上一页，如果没有负号的就是表示下一页

如果不是1而是 2,3,4......n 则表示前进或者后退 n 页

后退还可以用

window.history.back();

两者的区别是：
go(-1):返回上一页，原页面表单中的内容会丢失；
back():返回上一页，原页表表单中的内容会保留。

前进则对应的是：

history.forward()：

此外，还有一个参数 history.length 记录了页面前进的序号，如果等于0表示第一页

怎么选择

至此，自动跳转页面、刷新页面、前后切换的方法都齐了！方法多了就有了选择恐惧症？

基本原则：
单纯的页面跳转建议就用html的refresh方法，无需js代码，很简洁。
如果比较复杂，涉及js代码的业务功能，再加上跳转功能的，就用js的各种方法。
此外还要考虑页面是否刷新的问题，希望刷新就用go，否则用back/forward

久都没有去慕课网学习学习了，刚恰好就看见了一个用的比较多的小例子——页面回到顶部，记得之前自己也是在初学web时，被这个坑了一回，因此今天特地拿来分享分享……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面回到顶部</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <script type="text/javascript" src="myjs.js"></script>    
</head>
<body>
    <a href="javascript：;" id="btn" title="回到顶部"></a>
    <div class="bg">
        <img src="images/tb_bg.jpg" alt="" />
    </div>
</body>
</html>

其中需要引入自己写的一个样式文件和一个js文件：

    #btn {
        width: 40px;
        height: 40px;
        position: fixed;
        display: none;
        right: 65px;
        bottom: 10px;
        background: url(images/top_bg.png) no-repeat left top;
    }
    
    #btn:hover {
        background: url(images/top_bg.png) no-repeat 0 -39px;
    }
    
    .bg {
        width: 1190px;
        margin: 0 auto;
    }

js文件：

//页面加载完毕后触发
window.onload = function {
    var obtn = document.getElementById('btn');
    var clientHeight=document.documentElement.clientHeight;//获取页面可视区域的高度
    var timer = null; //存放定时器
    var isTop=true;
    //滚动条滚动时触发
    window.onscroll=function{
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(osTop>=clientHeight){
 obtn.style.display="block";
        }else{
 obtn.style.display="none";
        }
        if(!isTop){
 clearInterval(timer);
        }
        isTop=false;
    }
    obtn.onclick = function {
        timer = setInterval(function { //设置定时器
 //获取滚动条距离顶部的高度
 var osTop = document.documentElement.scrollTop || document.body.scrollTop;
 var ispeed=osTop/5;
 document.documentElement.scrollTop = document.body.scrollTop =osTop-ispeed;
 isTop=true;
 if(osTop==0){
 clearInterval(timer);
 }
        }, 30);
    }
}

文件存放路径：

基本“回到顶部”效果就这样子实现，只是我不会在文章中添加动态效果（就是实时的添加这个动态效果图），求大神赐教！

        window.history.pushState(null, null, window.location.href);
        window.addEventListener("popstate", function () {
            window.history.pushState(null, null, window.location.href);
        });

品同学总是会提出各种稀奇古怪的需求，比如qj用户的返回操作。。。

上面的代码经常被用来禁止网页页面的返回，经过个人的测试(Chrome/92.0.4497.0)，必须在用户有了交互之后才能生效，否则不生效；

在线咨询

上一篇：「测试开发全栈-HTML」(19) select下拉表单和textarea
下一篇：Matplotlib从入门到高级4-曲线和标记的设置

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

干货：网页跳转的写法大全及其用途区别

您的项目需求