乾貨：網頁跳轉的寫法大全及其用途區別

有時候，我們會希望網頁自動跳轉，應用場景包括：

• 提交表單後自動轉到另外一個頁面，
• 頁面地址變了，希望訪問老地址時能自動轉到新地址，等等。

下面總結下如何在前端頁面中控制跳轉的方法：

利用html的refresh

其中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