添加到瀏覽器歷史記錄而不改變當前 URL

Question

我有一個 3 步注冊過程，其中每個步驟都使用 javascript 顯示在頁面上，無需刷新頁面。 我現在想做的是添加一個向后引用，指向用戶正在進行的步驟，這樣如果他們點擊瀏覽器的后退按鈕，他們就不會丟失所有的進度。

因此，例如，當用戶從第 2 步導航到第 3 步時，URL 停留在www.example.com 。 然后用戶單擊瀏覽器后退按鈕。 URL 現在應該是www.example.com?step-2 。

我想我會以某種方式需要使用歷史記錄 API 來完成此操作，但如果我使用 window.history.pushState(null, null, 'www.example.com?step-2')，則當前的 URL 將被更改以及。

如何在不更改當前 URL 的情況下完成添加到歷史記錄？

Answer 1

如果您的目標是不更改 URL，但仍允許來回歷史 state 更改，則最好的辦法是利用窗口的hashchange事件偵聽器。 這當然會在 URL 中使用 hash 引用，但基數 URL 不會改變：

function locationHashChanged() {
  if (location.hash === '#step-2') {
    // Do something here
  }
}

window.onhashchange = locationHashChanged;