История HTML5, хранящая только одно состояние

Я разрабатываю AJAX-приложение Google Maps на JS/PHP и хочу реализовать API истории HTML5. Я уже внедрил пользовательские диплинки, чтобы ко всему можно было получить доступ с помощью красивых URL-адресов.

Теперь на AJAX get я делаю следующее для сохранения истории:

var stateObj = { id: obj.id };
history.pushState(stateObj, null, obj.deeplink);

и чтобы получить его обратно в браузере, я делаю:

window.onpopstate = function(event) {
google.maps.event.trigger(markersArray[JSON.parse(event.state.id)], 'click');
};

Однако сохраняется только 1 шаг назад, поэтому, когда я несколько раз нажимаю назад, он вызывает то же самое, что и при первом вызове назад.

Что случилось?

Дополнительные пояснения

Хорошо, кажется, я не предоставил достаточно кода. Это общий слушатель onpopstate:

//get popstate event
window.onpopstate = function(event) {
   console.log('onpopstate: '+JSON.parse(event.state.id));
    google.maps.event.trigger(markersArray[JSON.parse(event.state.id)], 'click');
    };

При нажатии на маркер карты я делаю следующее:

//change URL, save state
history.pushState({ objId: obj.id }, obj.pagetitle, obj.deeplink);

Но, конечно, триггер щелчка маркера по popstate также приводит к history.pushState, поэтому я думаю, что он перезаписывает последнее значение.

В объекте «история» есть только один объект, независимо от того, сколько маркеров было нажато.


person Raphael Jeger    schedule 09.04.2015    source источник
comment
Я подозреваю, что проблема заключается в перезаписи объекта stateObj, но я думал, что pushState не заменит, а поместит объекты в хранилище...   -  person Raphael Jeger    schedule 09.04.2015
comment
отлично, минус без комментария. Если бы вы только могли объяснить, что в этом не так?!   -  person Raphael Jeger    schedule 09.04.2015
comment
Трудно сказать с кодом, который вы предоставили. Каков результат stateObj на разных этапах?   -  person MrUpsidown    schedule 09.04.2015
comment
@MrUpsidown Я добавил дополнительную информацию, надеюсь, это поможет.   -  person Raphael Jeger    schedule 09.04.2015
comment
Взгляните на этот ответ и, наконец, history.js, который может помочь вам поддерживать различные браузеры.   -  person MrUpsidown    schedule 09.04.2015


Ответы (1)


Вероятно, что происходит, когда вы щелкаете элемент, который вы делаете .pushState(), но onpopstate() вы просто вызываете функцию onclick(), которая снова отправляет ту же информацию о состоянии, навсегда удерживая вас на этом идентификаторе.

В качестве решения вы должны использовать только .pushState() if (history.state.id != this.id) или ваш текущий идентификатор объекта.

person Gungnir    schedule 02.08.2017
comment
Именно в этом была проблема. Спасибо - person NetVicious; 10.03.2018