Попсовое состояние не работает должным образом

Question

У меня есть несколько изображений, и когда я нажимаю на определенное изображение, URL-адрес изменяется на этот идентификатор. Но проблема в том, что I can only go back once (чем тот же URL-адрес повторяется каждый раз, когда я нажимаю кнопку «Назад») и 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

Почему вы называете update(photo_id) на onpopstate? Ваши update функции звонят window.history.pushstate.

Это означает, что когда вы нажимаете кнопку «Назад», вы возвращаете этот URL обратно в стек истории. Вот почему вы получаете один и тот же URL снова и снова.

Например:

1. Посетите вашу страницу /mysite/
2. Нажмите на изображение 1, Изменить URL для /mysite/1
3. принудительного состояния для изображения 1
4. Нажмите на изображение 2, Изменить URL в /mysite/2
5. Состояние нажатия для изображения 2
6. Нажмите Назад, смените URL-адрес на /mysite/1
7. Нажмите состояние для изображения 1 происходит здесь
8. Нажмите Назад, Urls остается на /mysite/1

В зависимости от того, что вы собираетесь делать, вы, вероятно, можете просто удалить update(photo_id) из onpopstate. Я проверил это со следующим исправлением, и это сработало. Я смог правильно вернуться в Chrome.

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

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