| Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера |
Учимся заменять адрес в адресной строке (Работать с историей) через 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 | |
| Просмотров: 571 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |