Javascript — История браузера AJAX POST
У меня очень раздражающая проблема, которая еще не выяснилась.
Я разрабатываю веб-систему с использованием «Парадигмы одностраничного приложения», но без какой-либо основы, такой как angular, backbone и т. Д.
Мы загружаем страницу один раз, и почти все другие страницы загружаются через ajax. Проблема начинается, когда пользователь нажимает кнопку «Назад» браузера.
Поскольку нет перезагрузки страницы, после входа пользователя в систему, URL-адрес не изменяется, и когда пользователи пытаются использовать кнопку «Назад» из браузера, он перенаправляется на страницу входа, потому что это последняя страница, которую он «посетил».
Весь контент загружается через пост ajax (не очень горжусь), и теперь мы должны поддерживать кнопку назад / вперед. Я пытался использовать HTML5 History API, но безуспешно. Мне удалось зарегистрировать обратный вызов popstate и попытаться смоделировать сообщение снова. Но на странице есть поля, которые я должен восстановить. Я не уверен, смогу ли я найти его, но мне нужно восстановить состояние страницы до отправки запроса, например, снимок.
Кто-нибудь может мне помочь?
Спасибо! (Я в отчаянии: D)
Решение
Вот простой пример того, как это сделать:
var state = null;
$(document).ready(function($) {
//this is my menu... I created a simple menu just for testing :)
$('nav li').on('click', function(){
var title = $(this).text().toLowerCase();
loadPage(title);
window.history.pushState(title, null, '#'+title);
});window.addEventListener('popstate', function(event) {
state = event.state;
console.log("State: "+state);
if(state != null && state != "null"){
loadPage(state);
}
});
});
function loadPage(page) {
$("#content").load(page+".html");
}
Ура;)
Другие решения
Вы можете использовать идентификатор фрагмента (вещи после # в URL), чтобы отслеживать, на какой «странице» вы находитесь, и это то, что делают некоторые фреймворки. Большинство браузеров могут прислушиваться к изменениям, и история браузера хорошо с ней работает, поэтому вы можете извлечь значение при его изменении и предпринять соответствующие действия.
detector