2013-10-18 263 views
1

在測試場景中,我有兩個頁面pageA和pageB。pushState加擾瀏覽器歷史記錄

在第一步中,一個按鈕觸發window.history.pushState調用,並在pageB的地址欄中顯示地址。

在第二步中,瀏覽器的地址欄用於請求pageB。瀏覽器呈現pageB的內容。顯示pageB的地址欄地址。

在最後一步中,瀏覽器的後退按鈕用於返回pageA。在地址欄中pageA的地址顯示爲。然而,瀏覽器顯示頁面B的內容,我期待看到pageA的內容。

我知道我做錯了什麼。即使我不知道如何描述這種行爲。你有什麼建議嗎?

在這裏,您可以在演示的jsfiddle發現:http://jsfiddle.net/HqECT/3/show/

您可能會看到執行:http://jsfiddle.net/HqECT/3/

注:測試是在Chrome v30.0.1599.101

+1

如果您正在某個特定的瀏覽器上進行測試,那麼確實指出您正在使用的瀏覽器可能會很好。 –

+1

您的意思是'window.history.pushState' :-) –

+0

當您遍歷通過'pushState'添加的歷史元素時,瀏覽器不加載頁面。你需要使用'window.onpopstate'事件來做到這一點。 –

回答

2

你要聽的運行popstate event。當您調用pushState時,事件對象將包含一個state屬性,其中包含您放入歷史記錄中的任何數據。如果您在其中放入正確的數據,則可以使用該數據將頁面恢復到舊URL的狀態。

+0

謝謝@Quentin。由於在第二步中發出的是http請求而不是'pushState',因此在第三步中,state屬性始終爲'null'。 – kokeksibir

+0

@kokeksibir:除非您已將狀態對象(第一個參數)傳遞給'pushState',否則'state'屬性將爲'null'。 –

+0

@RocketHazmat nope,即使我在第一步設置狀態,它不起作用。看到更新的問題,我已經在jsFiddle中添加了演示。 – kokeksibir