當用戶點擊後退按鈕時，如何重建客戶端修改的頁面？

假設我使用無限滾動或「加載更多結果」按鈕來實現搜索結果，其中Ajaxes將更多結果顯示在初始結果頁面上。因此用戶可以在不離開相同搜索結果頁面的情況下移動結果。當用戶點擊後退按鈕時，如何重建客戶端修改的頁面？

我的用戶會滾動一段時間，然後找到一個特定的結果並點擊它。這不是他們需要的，所以他們回頭。

如何讓結果頁返回到它們離開時的狀態，並將它們向下滾動到正確的位置？最初的搜索可能產生了10個結果，如果我們再加載20個，那麼在頁面上是30，並且說他們在離開頁面時滾動到結果23。

這樣做的接受方法是什麼？（請注意，這不是特定於搜索結果的，一般來說，如果我在頁面加載到瀏覽器後弄亂頁面，當用戶回到頁面時，如何保留/重構此頁面的狀態？）

2012-04-18 Deane

-1

一種方法是以編程方式模擬瀏覽器。使用javascript歷史對象。您可以點擊按鈕並調用go（）函數，如下所示：

history.go(-1)

這會將您帶到上一頁。

See here瞭解更多詳情。

2012-04-18 03:11:14 Santosh

當用戶按下「後退」按鈕時，這不起作用。此外，該頁面仍將「重置」 - 沒有運行客戶端腳本。 – Deane 2012-04-18 14:44:18

你試過這個選項嗎？我用谷歌結果頁面測試了這個。我配置了它顯示100個結果。我點擊了最後的結果，然後使用此功能可以返回到相同的滾動位置，頁面不會重置。 – Santosh 2012-04-18 15:03:24

這個問題有多種方法。

假設您正在處理搜索結果。無論何時將更多結果加載到視圖中，下一個搜索結果的起始索引都會增加。

10種元素的第三加載完成之後，你開始指數將40

現在，你可以把這個指數動態到URL作爲哈希，例如，延長它http://mysite.com/search?q=searchterm#startindex=40。現在，如果用戶點擊搜索結果，然後再點擊，您將能夠從URL中提取該值，並將適量的其他結果加載到視圖中。
可選將用戶滾動至或多或少最後一個位置。

這個原理的作用與使用cookies，localStorage，會話參數類似，或者你使用什麼而不是URL哈希。
您可以將完整的搜索結果保存在客戶端，比如localStorage和（在「後退」按鈕之後）從那裏讀取並將其注入頁面。這樣，您不必再從服務器請求它，並且反應性可能會更好。

此時，您還可以保存並恢復用戶的滾動位置，以使其回到他在頁面上的位置。

我目前正在處理類似的問題，並會使用第二種方法，我認爲。

回答