有時候,我們會希望網頁自動跳轉,應用場景包括:
- 提交表單後自動轉到另外一個頁面,
- 頁面地址變了,希望訪問老地址時能自動轉到新地址,等等。
下面總結下如何在前端頁面中控制跳轉的方法:
利用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