在做一個網頁的項目，有個功能的需求是“有一個頁面轉跳后，不要讓返回鍵能回到上一頁，而是直接回到主頁”。

有一個表單提交，但是不想有返回鍵能回到表單提交頁面，所以，想要返回鍵返回時回到首頁。

實現原理：
利用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

總結

以上是生活随笔為你收集整理的浏览器按返回键回到指定页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。