| Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера |
Самый простой способ обработки событий истории браузера при гет запросах by Apocalypse для uCoz
| 24.06.14, 17:04:04 | |
 Здравствуйте. Я очень люблю простые решения сложных проблем и данная статья будет полезна всем тем, кто хочет достичь того функционала, что и в популярных социалках. Менять значение в адресной строке при гет запросах - пожалуй, самый часто задаваемый мне вопрос и я уже писал статью, как это делать, но вот как обрабатывать событие при клике по кнопкам "вперёд" и "назад" в браузерах - это просто пипец Для шаблона apo-ucoz 2012 года мне пришлось потратить очень много времени на то, чтобы обработчик кнопок вперёд и назад полностью функционировал на ajax, но до сих пор не видел идеально простого способа, который работал бы без ошибок. Вообще на текущий момент лично моё мнение - нужно соблюдать ту золотую середину между гет запросами и обычными с обновлением страницы. Тот способ, который я покажу, считаю идеальным сочетанием скорости обработки и здравым смыслом Для начала давайте сделаем тег запрос и создадим новую запись в истории: Код <script> $.get('/load', function(getme) { alert('Мы получили данные со страницы /load: ' + $(getme).text()); // Создаём запись в истории с адресом /load history.pushState(null,null,'/load'); }); </script> Это простой наглядный пример. Гет запрос послан, данные получены. В истории записан новый пункт /load. Адрес в адресной строке у нас также теперь вашсайт.ru/load, но, если покликать теперь назад - вперёд, то адрес будет меняться, но никаких изменений не произойдёт, так как в записи истории нет никаких данных о действиях, которые браузер должен выполнить. Мы поможем браузеру и создадим свой обработчик onpopstate, который будет обрабатывать наши события для ajax запросов. Следующий код в самый низ страницы после < /body >, чтобы скрипт обрабатывался самым последним: Код <script>var mainlocationhref = location.href; setTimeout(function() { // Запускаем обработчик через одну секунду после загрузки страницы window.onpopstate = function() { // При событиях "Вперёд" и "Назад" запускаем нужные нам функции if(mainlocationhref != location.href) { // Проверяем, изменился ли адрес в адресной строке и, если изменился, обновляем страницу с новым адресом location.replace(location.href); }; }; }, 1000); // Мини-урок от Apocalypse</script> Суть обработчика очень проста - он отлавливает изменения в адресной строке и, если их находит после кликов "Назад" и "Вперёд" в браузере, обновляет страницу с адресом, взятым из текущего значения в истории. В качестве примера вот вам пять кнопок, которые будут менять адрес страницы напрямую, а потом покликайте по кнопкам "Назад" и "Вперёд": Код <a href="#" onclick="history.pushState(null,null,'/load');return false">Запись с адресом /load</a> <a href="#" onclick="history.pushState(null,null,'/load/1');return false">Запись с адресом /load/1</a> <a href="#" onclick="history.pushState(null,null,'/load/2');return false">Запись с адресом /load/2</a> <a href="#" onclick="history.pushState(null,null,'/load/3');return false">Запись с адресом /load/3</a> <a href="#" onclick="history.pushState(null,null,'/load/4');return false">Запись с адресом /load/4</a> Урок подготовлен Apocalypse. По всем вопросам пишите в комментариях | |
| Просмотров: 513 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |