如何處理內容更改的history.pushState

Question

盡管Mozilla有一個有關history.pushState和history.replaceState的易於理解的文檔 ，但是它沒有向我展示在按下后退按鈕和動態更改內容時如何處理內容。

假設foo.html有一個表單並執行AJAX調用以替換其提交時的內容，則pushState如下所示：

history.pushState({content:$('#content').html()}, '', 'bar.html');

當用戶單擊“后退”按鈕時，URL會更改回foo.html，但是頁面不會顯示該表單。 如何顯示表格？ 我查看了popState，但無法使其正常工作。

Answer 1

您需要存儲重新呈現舊內容所需的所有狀態，然后使用該狀態在popstate上重新創建popstate 。

諸如Knockout.js（或完整的MVC框架）之類的模型綁定技術可以使此操作變得更加容易。

Answer 2

所以這是我為解決該問題所做的事情：

加載foo.html時，我執行history.replaceState({container:$(#container').html()},'', window.location);

然后，在用ajax調用替換內容之后，執行以下命令： history.pushState({container:$(#container').html()},'', 'bar.html');

在頁面加載時，我綁定popstate以檢查事件是否具有包含這樣的容器的狀態對象：

$(window).bind("popstate", function(event) {
    if (event.state != null){
        if ('container' in event.state){
            $(#container').html(event.state.container);
        }
    }
});