У меня есть страница, на которой есть несколько кнопок поиска/фильтра, которые при щелчке обновляют содержимое списка ниже через AJAX.
В процессе я изменяю историю (через pushstate), чтобы новая отфильтрованная страница была заклассифицирована, и поэтому работает кнопка "Назад" . Я также слушаю событие popstate, чтобы реагировать на Назад.
Мой код выглядит примерно так:
window.addEventListener("popstate", function(ev) {
if (!window.history_ready) { return; } // Avoid the one time it runs on load
refreshFilter(window.location.href, true);
});
refreshFilter: function(newURL, backButtonPressed){
$.ajax({ url: newURL}).done( blah );
if (!backButtonPressed) {
window.history_ready = true;
history.pushState(null, null, newURL);
}
}
Это прекрасно работает, за исключением одного странного случая...
- Пользователь находится на странице "A"
- Они нажимают ссылку, чтобы перейти на эту страницу, которая играет с историей (пусть назовет ее "B" )
- Они запускают несколько фильтров, затем несколько раз нажмите "Назад" , чтобы вернуться в исходное состояние "B"
- Они снова нажимают кнопку "Назад" , которая возвращает их "A"
- В это время, если они нажимают "Вперед", вместо того, чтобы снова отправить запрос на сервер для страницы "B" , браузер просто отображает кучу кода JSON в качестве содержимого страницы (этот JSOn является ответом одного из моих AJAX просит фильтровать материал)
По крайней мере, в последнем Chrome
Почему это происходит и как я могу его избежать?