關於彈出狀態不能正常工作

Question

我有一些圖像，當我點擊一個特定的圖像時，網址變爲該ID。但問題是，I can only go back once（比每次按下後退按鈕時都會重複相同的網址）和forward button does not work。任何想法我做錯了什麼？

<img id="1" src=""> 
<img id="2" src=""> 
<img id="3" src=""> 

$('img').click(function() { 
    update($(this).attr('id')); 
}); 

function update(photo_id) { 
    var state = { photo_id: photo_id}, 
    title = "", 
    path = "/mysite/" + photo_id; 

    window.history.pushState(state, title, path); 
} 

window.onpopstate = function(event) { 
    var photo_id= document.location.href.split('/').slice(-1)[0]; 

    update(photo_id); 
} 

Answer 1

你爲什麼要呼籲onpopstateupdate(photo_id)？你的update函數調用window.history.pushstate。

這意味着當您按下「返回」按鈕時，您會將該URL推回歷史堆棧。這就是爲什麼你一次又一次得到相同的URL。

例如：

1. 訪問你的頁面圖片1 /mysite/
2. 點擊圖片1，更改URL以/mysite/1
3. 按壓狀態
4. 點擊圖片2，更改URL以/mysite/2
5. 圖2的推狀態
6. 按返回，更改url爲/mysite/1影像1
7. 按壓狀態發生在這裏
8. 按返回，停留的url在/mysite/1

取決於你打算做什麼，你可能剛剛從onpopstate刪除update(photo_id)。我用以下修補程序測試了它，它工作。我可以在Chrome上正確地來回移動。

window.onpopstate = function(event) { 
    var photo_id= document.location.href.split('/').slice(-1)[0]; 

    //Remove this line: update(photo_id); 
}