Работаем с историей в JavaScript
Разрабатывая браузерное приложение (CRM) столкнулся с необходимостью использования объекта истории браузера. Дело в том, что основная масса навигационных переходов внутри CRM осуществляется посредством выполнения Ajax-запросов, как следствие записей в истории не ведется, и если пользователь войдет к примеру в карточку объекта, то нажав "назад" ничего не произойдет. Чтобы устранить это недоразумение, мы и будем использовать объект истории браузера.
Итак, работа с историей базируется нет, не на трех)) на двух китах: eventListener "onpopstate" и методе window.history.pushstate(), который принимает в себя три параметра: Объект, который может быть JavaScript-сущностью, Заголовок вкладки браузера и URL окна. Обратите внимание, что при изменении текущей записи истории перехода по указанному URL не произойдет, он будет проставлен в адресную строку, не более. При этом, поскольку браузер не открывает URL, он может привести на несуществующую страницу, и это на совести разработчика. Отслеживаем внимательно.
Итак, приступаем. Для построения документа нам нужен некий JavaScript объект, на основании его строим документ
<script>
//Слушаем изменения в истории
window.onpopstate = function(event){
var template = event.state.template;
var data = event.state.data;
BuildFunction(template, data);
}
var BuildFunction = function(template, data){
//Тело построения функции на основе объекта
var templaeEngine = new TemplateEngine(template,data);
templateEngine.render();
}
// Генерируем данные
var data = {
dummyData: "some data"
}
var template = "<p>{{dummyData}}</p>";
var historyEntry = {
data: data,
emplate: template
}
window.history.puhstate(historyEntry, 'New Title', '#new_url');
BuildFunction(template, data);
</script>
Комментарии
Отправить комментарий