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

Учимся заменять адрес в адресной строке (Работать с историей) через HTML5 History API by Apocalypse для uCoz
24.06.14, 16:34:58



Меня давно просили на примерах показать, как заменять адрес в адресной строке при гет запросах, чтобы ajax переходы были полноценными и пользователь видел, что он действительно переходит по страницам. Я не буду плавить вам мозг, разъясняя, что такое хистори апи и какие особенности его использования нужно знать, а просто покажу на примерах, как использовать эту мощь в ваших скриптах

Мы рассмотрим работу:

history.pushState - создание новой записи в истории
history.replaceState - перезапись текущей позиции истории

Отличие history.pushState от history.replaceState очень простое. history.pushState каждый раз будет создавать новую запись и вы сможете кнопочками вперёд и назад в браузере переходить по этим записям, а history.replaceState будет постоянно перезаписывать текущую запись в истории и вы не сможете перемещаться при помощи кнопок вперёд и назад

Вы должны помнить, что обработчик истории работает только на одном вашем домене и вы не сможете заменит сайт.ру на сайт2.ру, имитируя фейк адрес. Обработчик может работать только с данными после доменного имени

1) Пример с гет запросом:
Код
$.get('/news/', function(apo) {
// Заменяем html код body на код body, полученный из модуля Новости сайта
$('body').html($('body', apo).html());
// Заменяем тег title на тот, что получили со станицы, откуда гетили информацию
$('title').html($(apo).filter('title').html());
// Создаём новую запись в истории с адресом /news/
history.pushState(null, null, '/news/');
});

Создать то запись в истории просто, но, если вы несколько раз создадите записи и попробуете походить по ним при помощи стрелочек в браузере, вы увидите, что адрес то меняется, но ничего не происходит. Это потому, что мы передаём только адрес, а обработчика события нет. Мы его сейчас напишем:
Код
window.onpopstate = function(){
// При событии перехода по истории сменяется адрес страницы и это нам даёт возможность отловить его через location.href
$.get(location.href, function(apohis) {
// Мы выполняем гет запрос при каждом переходе по истории и заменяем html код body
$('body').html($('body', apohis).html());
});
}
Как видите, всё очень просто и трудностей с использованием истории нет. Давайте ещё рассмотрим пример с заменой записи в истории:

2) Пример с заменой записи в адресной строке при простом клике по ссылкам:
Код
<a href="#" onclick="history.replaceState(null, null, '/load');return false;">Ссылка 1</a>
<a href="#" onclick="history.replaceState(null, null, '/photo');return false;">Ссылка 1</a>
<a href="#" onclick="history.replaceState(null, null, '/index/8');return false;">Ссылка 1</a>
<a href="#" onclick="history.replaceState(null, null, '/forum/1-1-1');return false;">Ссылка 1</a>
<!-- Данные ссылки просто заменят текущую запись в истории и, сколько бы вы ни кликали по ним, кнопка назад в браузере не восстановит последовательность этих кликов -->


Думаю, этих двух примеров будет достаточно, чтобы вы поняли, как работает хистори апи и как использовать эти коды для своих целей. Если у вас остались вопросы - задавайте их в комментариях

Статья подготовлена Apocalypse

Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: History, адрес, (Работать, заменять, Через, историей), адресной, HTML5, Учимся, строке
Просмотров: 504 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: