Тематические статьи →

History API и HASH-навигация на Ajax-сайтах

Загрузка кон­тента при помощи Ajax и нави­га­ция, постро­ен­ная на этой схе­ме, поз­во­ляют зна­чи­тельно повы­сить отзыв­чи­вость интер­фейса раз­ра­ба­ты­ва­е­мого сайта или веб-при­ло­же­ния. Однако такой под­ход застав­ляет решать про­бле­мы, свя­зан­ные с отоб­ра­же­нием адреса в браузере.

Непо­сред­ственно сама загрузка через AJAX отдель­ных бло­ков на стра­нице (или даже всего содер­жа­ния стра­ницы) не вызы­вает смены адреса в бра­у­зе­ре. Минус такого пове­де­ния в том, что поль­зо­ва­тель не может рабо­тать с исто­рией про­смот­ров — кнопка «назад» рабо­тает не как ожи­да­ется (не про­ис­хо­дит «отката» послед­ней AJAX-загруз­ки, а осу­ществ­ля­ется пере­ход на стра­ни­цу, кото­рая была про­смот­рена до теку­щей и до всех AJAX-запро­сов), а URL в соот­вет­ству­ю­щей строке бра­у­зера не кор­ре­ли­рует с теку­щим содер­жа­нием стра­ницы.

В совре­мен­ных бра­у­зерах, кото­рый под­дер­жи­вают спецификацию HTML5, для устра­не­ния этого неже­ла­тель­ного пове­де­ния есть методы History API. History API — это набор функ­ций для работы с исто­рией бра­у­зера, кото­рый поз­во­ляет запи­сы­вать в исто­рию адреса стра­ниц и пере­ме­щаться по этой самой исто­рии. Функция window.history.pushState(data, title [, url]) — запи­сы­вает в исто­рию новый пере­ход и отоб­ра­жа­е­мый на стра­нице адрес изме­ня­ет­ся.

History API — заме­ча­тель­ная шту­ка, но в уста­рев­ших бра­у­зерах не рабо­тает. Тут на замену при­хо­дит нави­га­ция, постро­ен­ная на location.hash («якор­ная» или hash-нави­га­ция). Этот тип нави­га­ции построен на базе пере­дачи пара­мет­ров в виде «яко­рей», напри­мер, при Ajax-пере­ходе на стра­ницы /contacts адрес­ная строка будет выгля­деть так: site.ru/#!/contacts

Оба мето­да, как пра­ви­ло, исполь­зуют JavaScript-собы­тия, кото­рые сра­ба­ты­вают при загрузке стра­ницы и при пере­ходах по AJAX-ссыл­кам и осу­ществ­ляют работу с History API или обра­ботку location.hash.

В библиотеках Turbolinks и Wiselinks такое пове­де­ние уже встро­ено в базо­вый функционал.

Поделитесь с друзьями:


Информация о публикации:

Материал опубликован в 2014 году. Эта статья о веб-разработке, про фронтенд-разработку и о веб-технологиях. При пере­пуб­ли­ка­ции обя­за­тельно ука­за­ние пер­во­ис­точ­ника в виде гипер­тек­сто­вой ссылки на сайт web-creator.ru

Воспользуйтесь нашими
знаниями и опытом

Отправьте нам сообщение при помощи формы. Или напишите на e-mail s@web-creator.ru

Мы максимально оперативно ответим Вам по электронной почте или перезвоним.

При отправке сообщения через форму, укажите пожалуйста предпочтительный способ связи с Вами: телефон или адрес электронной почты. Мы сможем ответить Вам подробнее, если Вы напишете что-то о запланированном проекте или предполагаемых задачах.

Либо просто позвоните нам по номеру: +7 495 215-1501

Мы работаем по будним дням с 10 до 19 часов.

Комплексные услуги

Реализация «под ключ» проектов по созданию различных видов сайтов, разработка веб-приложений для автоматизации бизнес-процессов, ведение контекстных и медийных рекламных кампаний, поисковое продвижение, комплексная поддержка веб-проектов, консалтинговые услуги.