Привет. Думаю многим интересно как сделана смена адреса в адресной строке браузера (попросту смена URL без перезагрузки страницы) на таких сайтах, как Facebook, Vk.com и других.
На самом деле сложного нет ничего! Это всё новое API для работы с историей браузера. Есть такая функция:
window.history.pushState("object or string", "Title", "/new-url");
Собственно говоря, для реализации смена URL без перезагрузки страницы больше ничего и не нужно.
При нажатии на кнопку, которая должна сменить URL, вы вызываете эту функцию, в истории показывается, что вы находитесь в состоянии, переданном в первом параметре (это может быть объект или строка), а адрес в строке браузера поменяется на указанный в 3-м параметре.
Для вас мы подготовили пример реализации смены URL без перезагрузки на простеньком сайте: http://htmler.ru/history.demo/
Если покликать по пунктам верхнего меню адрес сайта поменяется, а перезагрузки не произойдет.
Как сделать смена URL без перезагрузки?
Для удобства обработки кликов на кнопки мы использовали jquery, но код самой смены будет работать и без jQuery.
$(function(){ doHistoryLogic(); $('.dolink').click(function(e){ e.preventDefault(); $('.nav li').removeClass('active'); $(this).parent().addClass('active'); window.history.pushState($(this).attr('id'), "Title", $(this).attr('href')); doHistoryLogic(); }); }); var doHistoryLogic=function(){ switch(window.history.state){ case "home": $('.about,.contact').fadeOut(); $('.home').fadeIn(); break; case "about": $('.home,.contact').fadeOut(); $('.about').fadeIn(); break; case "contact": $('.about,.home').fadeOut(); $('.contact').fadeIn(); break; default: $('.about,.contact').fadeOut(); $('.home').fadeIn(); break; } }
Опишу немного код:
После загрузки страницы (когда срабатывает document.ready) мы вызываем функцию doHistoryLogic (о ней чуть позже), а потом навязываем обработчики на события кликов мышки по кнопкам верхнего меню. Грубо говоря мы отменяем через e.preventDefault() стандартное действие при клике (переход по указанной ссылке), и делаем своё — ставим отметку, что ссылка активна, засовываем новое состояние с новым URL в историю и опять вызываем функцию doHistoryLogic.
Что же это за функция? Она просто берет текущее состояние истории и на основе этого состояния скрывает или показывает нужное содержимое. Тут может идти и простое скрытие элементов, как у нас, и прогрузка элементов через ajax — в общем тут уже дело ваших потребностей и фантазии.
Где работает смена URL без перезагрузки?
Работает во всех современных версиях Chrome, Safari, Firefox. В IE9 ещё не работает.