Ajax / HTML5歷史狀態（popState，pushState等）-后退按鈕行為

Question

關於HTML5的pushState功能，存在幾個問題，但是我找不到關於兩個問題的任何信息。 我的popstate處理程序的定義如下：

$(window).bind('popstate', function (e) {
    if (!e.originalEvent.state)
        return;

    LoadContent({ url: e.originalEvent.state.path });
}

LoadContent調用僅使用ajax填充內容窗格。

問題1：讓我們想象一下，從瀏覽我的網站的第1 page1開始。 因為沒有state所以不會調用LoadContent 。 假設我的瀏覽歷史如下：

page1 -> (ajax)page2 -> (ajax)page3 -> (back pressed)page2 -> (back pressed)page1

當我按瀏覽器的后退按鈕轉到page2 ，一切都很好。 但是，當我再次按回該鍵（應加載page1的內容）時， e.originalEvent.state為null ，這意味着不會調用LoadContent，因此內容將與page2相同。 返回時如何獲取page1的內容？

問題2：假設我們從page3退回到page2 ，這意味着我們通過ajax加載了第二頁的內容。 現在想象一下，我們再次瀏覽 （即，將URL手動輸入到瀏覽器的地址欄中）到page3 ， 然后再次按回去到page2 。 瀏覽器將不顯示第二頁，而是僅顯示我們之前檢索的page2內容的ajax結果 ，從而不會加載頁面的其余部分。 如何解決？

謝謝你的幫助！

Answer 1

對於您的問題1：

您需要重新加載整個頁面或通過ajax將其重新加載，因為初始頁面中的數據不會被推送到歷史記錄中。 否則，您可以更改頁面加載事件以從ajax加載數據並動態加載內容，那么您將需要將必要的json數據推送到歷史記錄中。

Answer 2

我剛剛遇到了與您的問題2相同的問題。

您可以發送HTTP標頭，以防止Web瀏覽器緩存和顯示XHR內容。 在執行History對象JS的頁面上執行此操作。

在PHP中：

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");