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

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

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

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

利用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