Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера

Самый простой способ обработки событий истории браузера при гет запросах 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. По всем вопросам пишите в комментариях
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: способ, браузера, событий, при, самый, истории, обработки, запросах, геТ, простой
Просмотров: 367 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: