Javascript pushState - 后退/前進按鈕未按預期工作

Question

我能夠使用 javascript window.history.pushState 成功地將 url 推送到瀏覽器歷史記錄中。

我可以單擊瀏覽器的后退和前進按鈕，網址會按預期更改。 但是，它實際上並沒有帶回上一頁的內容。

我可以通過單擊 url 欄並按回車鍵來手動實現這一點，但我想在單擊后退或前進瀏覽器按鈕時以編程方式執行此操作。

我已經試過了：

$(window).on("popstate", function() {
  alert("Back/Forward button was pressed.");
  window.location.reload(); // <-- brings back the page, but ruins the browser history stack. 
});

和

$(window).on("popstate", function() {
  alert("Back/Forward button was pressed.");
  window.location.href = window.location.href;
});

我的 pushState 函數：

var qstring = "?q=mysearchquery";

function addURLToHistoryAPI(qstring) {
  if (window.history && window.history.pushState) {
    window.history.pushState(null, null, qstring);
  }
}

Answer 1

您必須自己使用推送到歷史記錄的數據來渲染內容。

您應該使用數據為pushState函數提供第一個參數。 這可以是一些頁面 ID 或純 HTML 內容。 例如：

window.history.pushState(currentPageID, null, qstring);

或者

window.history.pushState($("main").html(), null, qstring);

然后在事件偵聽器中，您可以訪問此數據並使用它來呈現您的頁面，例如：

$(window).on("popstate", e => {
    alert("Back/Forward button was pressed.");

    // "e.originalEvent.state" contains the data passed in the first argument
    console.log(e.originalEvent.state);
    $("main").html(e.originalEvent.state);
});