Привет. Думаю многим интересно как сделана смена адреса в адресной строке браузера (попросту смена 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 ещё не работает.