HTML5歷史API部分頁面加載後退按鈕

Question

爲了提高我網站的性能/響應能力，我使用AJAX，replaceState，pushState和popstate監聽器實現了部分頁面加載。

我基本上將我的頁面的中心部分（HTML）作爲我的狀態對象存儲在歷史記錄中。當點擊一個鏈接時，我只需要從服務器獲取頁面的中心位（用不同的Accept頭標識這些請求）並用javascript代替它。在popstate上，我抓住了前面的中心部分，並將它推回到dom中。

這大多工作正常，但我發現了一個特定的問題，我卡住了。這是一個有點複雜的解釋，所以我很抱歉，如果這不是很清楚。

在我們的大部分網頁上都有搜索表單。通過ajax的部分頁面加載僅在GET請求上，並且表單執行POST，導致整頁加載。

如果我瀏覽下面的一組頁面，我結束了由ONLY中心內容格式不正確的部分頁面上，沒有任何周圍的DOM：

開始在主頁上（通過全頁負載） - 進行搜索（重定向後得到）
帶您到搜索結果（通過全頁面加載） - 然後點擊首頁
返回到主頁（通過動態GET） - 點擊瀏覽器的後退
搜索結果（來自popstate listener） - 點擊瀏覽器返回
格式不正確的家庭頁面即

當出現格式錯誤的主頁時，我的popstate偵聽器根本不存在。

我認爲正在發生，主頁的第二次加載（動態，部分）正在被瀏覽器緩存，然後當整頁返回時，瀏覽器僅顯示緩存的部分反應而不是整頁。

要嘗試解決這個我添加了一個有所不同：接受頭的響應，讓瀏覽器知道的內容可基於在接受頭。我還將Cache-Control max-age = 0，雜注無緩存和過期失效日期添加到部分加載的內容，以試圖強制瀏覽器不緩存此內容，但是這些都無法解決此問題。

不幸的是，我的公司不允許外部流量到我們的開發服務器，所以我不能告訴你這個問題。我在這裏查看了各種類似的問題，但沒有一個看起來完全相同，所提出的解決方案似乎也沒有工作。

如果我添加一個毫無意義的參數（廢話=等等），以我的動態GET請求，這解決了這個問題。然而，這是一個醜陋的黑客，我寧願不做。這看起來應該可以通過頭文件解決，因爲我認爲這是一個緩存問題。任何人都可以解釋發生了什麼？

Answer 1

這是一個緩存問題。響應頭緩存控制設置爲no-cache或max-age=0，問題不會發生在FF中（如您所說），但它仍然存在於Chrome中。

爲我工作的頭是的Cache-Control：no-store。這並不是所有瀏覽器都能一致實現的（你可以找到問題，詢問無緩存和無存儲之間有什麼區別），但在Chrome中也有你期望的結果。

Answer 2

我有類似的問題。我正在構建一個基於Web的嚮導，並使用jquery ajax加載每個步驟（後端的ASP.NET MVC）。

初始路線類似於/ Questions/Show - 加載整個頁面並顯示第一個問題（問題0）。當用戶點擊下一張圖片時，它會用url/Questions/Save/0做一個jquery .load（）。這將保存答案並返回下一個問題的局部視圖。下一個保存做一個jQuery .load（）with/Questions/Save/1 ...

我實現了History.js，以便用戶可以前進（前進？）。它將問題編號存儲在狀態數據中。當它檢測到statechange（並且狀態的問題編號與頁面上的問題編號不同）時，它會執行jquery .load（）來加載正確的問題。

起初，我使用的是與初始頁面加載時相同的路徑（/ Questions/Show/X，其中X是問題編號）。在後端我檢測到它是否是ajax請求，如果是這樣，返回的是部分視圖而不是全視圖。問題出現的地方與您的問題類似：假設我在問題3中，回去後再轉發，然後轉到www.google.com，然後點擊後退按鈕。它顯示了問題3，但它是部分視圖 - 因爲瀏覽器爲該路線緩存了部分內容。

我的解決方案是爲ajax調用創建一個單獨的路由：/ Questions/Load/X（它在後端使用通用代碼）。現在有兩種不同的路由（非問題的Ajax和/ Questions/Load for Ajax），瀏覽器在上述情況下正確顯示整個頁面。

所以，也許一個類似的解決方案可以爲你工作......即爲你的主頁提供兩種不同的路線 - 一個用於整頁和一個用於部分。希望有所幫助。

Answer 3

當鏈接被點擊我請求只是頁面的中央位從服務器（識別與不同這些請求Accept首）和與JavaScript替換它。

太棒了。這是實現它的RESTful方式。但是還有一件事需要做：將一個Vary頭添加到響應中。

Vary: Accept 

這告訴瀏覽器具有不同Accept頭的請求可能會得到不同的響應。由於這兩個請求使用不同的Accept頭，因此瀏覽器（以及任何緩存代理）將分別緩存響應。

與設置Cache-Control: no-store不同，這仍然允許您使用緩存。