Работаем с историей в 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>

Комментарии

Популярные сообщения из этого блога

MODx Evo и ReCaptcha v2

P3D – 3D модель в браузере

Подключение тяжелых библиотек