在做一個網頁的項目，有個功能的需求是“有一個頁面轉跳后，不要讓返回鍵能回到上一頁，而是直接回到主頁”。
有一個表單提交，但是不想有返回鍵能回到表單提交頁面，所以，想要返回鍵返回時回到首頁。
實現原理：
利用HTML5 的window.history對象實現對歷史記錄的訪問
實現代碼：
一,在需求頁面之前的頁面修改歷史記錄
// 前提：假設我們在index.html頁面,將要進入到order.html進行表單提交 // 思路 // 1.實現我們大概可以知道pushState函數的作用是修改當前頁面的地址，但是不刷新當前頁面或者跳轉到其他頁面 // 2.因為當前頁面的地址被改變了，所以我們通過返回鍵的時候，返回的是index頁面 // 過程 // 我來到了一個表單顯示的頁面 // orderRead.html // 此時回退會回到前一頁面，但是前一頁面的URL被修改為index.html // 所以，我們跳轉到了index.html // 也就是我們需要跳轉的頁面 //加載頁面時，自動執行下面下列代碼 //index頁面是我們按返回鍵后，要跳轉的頁面 function pushHistory() { window.history.pushState({}, "index", "index.html"); } pushHistory(); // 影響 // 當前url本應該是order.html,但是因為上述代碼改變為index.html
二,在需求頁的頁面修改歷史記錄
這個方法與之前的方法不同的地方是就在當前頁面寫代碼
//該方法修改地址后，會變成order# //此時返回是變成order.html //但是，執行了一次popstate //我們通過捕捉這個popstate完成手動跳轉 function pushHistory() { window.history.pushState({}, "index", "#"); } //執行代碼 pushHistory(); //添加監聽事件，監聽后退，前進 window.addEventListener("popstate", function (e) { window.location.href = "index.html"; }, false);
三.pushState介紹
HTML5引進了history.pushState()方法和history.replaceState()方法，它們允許你逐條地添加和修改歷史記錄條目。
這些方法可以協同window.onpopstate事件一起工作。
方法：修改網站路徑並創建新的歷史記錄
history.pushState(state, "title", "url");
| 參數 | 作用 |
|---|---|
| 狀態對象（state object） | 一個JavaScript對象，與用pushState()方法創建的新歷史記錄條目關聯。無論何時用戶導航到新創建的狀態，popstate事件都會被觸發，並且事件對象的state屬性都包含歷史記錄條目的狀態對象的拷貝。任何可序列化的對象都可以被當做狀態對象。 |
| 標題（title） | FireFox瀏覽器目前會忽略該參數，但是我們不能保證以后是否會被用到。 |
| 地址（URL） | 新的歷史記錄條目的地址。瀏覽器不會在調用pushState()方法后加載該地址，可以理解為當前地址被更改，不指定的話則為文檔當前URL |
1.參數URL必須和當前URL同源
2.修改網站路徑但不操作
四.popstate事件
調用history.back()、history.forward()、history.go()等方法，會觸發popstate事件，單純調用pushState()或replaceState()不觸發popstate事件。
訪問事件的state屬性可獲取當初pushState()或replaceState()設置的狀態數據。
- history.back()和history.forward() ： 分別表示向后一頁和向前一頁。
- history.go(num) ： 表示向前或向后翻多少頁，num為正數表示向前翻，為負數則向后翻。
- History.back() ： 等價於history.go(-1)，history.forward()等價於history.go(1)。
五.總結
對於這些也是在項目需求的時候上網找的資料，本身沒有很深入的研究，只是將其實現，在代碼上可能存在一定的缺陷。
來源於：https://blog.csdn.net/u010433704/article/details/82661289
參考：
https://www.jb51.net/article/82673.htm#