Изменение адресной строки без перезагрузки страницы.

Данную фитчу совершенно недавно обнаружил сначала в Фейсбуке, потом Вконтакте. Странным было то, что url изменялся, а страница не перезагружалась. Например, вы просматриваете последние новости, и решили увеличить фотографию, чтобы посмотреть ее поближе. Фотография открывается в новом фрейме, где можно ее откомментировать. Но на заднем фоне все так же видны новости. Все бы ничего, но ссылка в адресной строке уже другая! Довольно интересных подход. Помучив Firebug и Google ответ был найден.

Раньше контакт использовал хеш-урлы, например h__p://site/test.php?param=1#/HASH!. В ява-скрипте доступ к нему можно получить из переменной location.hash. В принципе это рабочий вариант, все что требуется - при загрузки страницы считать значение из хеш-урла и выполнить необходимые действия, например, подгрузку фрейма с фото.

Согласитесь, красивее бы было передавать именно целую ссылку. Причем в url хорошо бы помещать сразу постоянную ссылку на фотографию. HTML5 появился относительно недавно и поддерживается небольшим количеством браузеров, однако он позволяет заменить url в адресной строке. Данная фитча работает в Chrome и FF4. Думаю, что в скором времени будет работать практически во всех браузерах.

Работает это довольно просто: мы добавляем в историю просмотра урл!

Код: Выделить всё

void pushState(state, title, url); // Добавление
void replaceState(state, title, url); // Замена текущего

Основные параметры
1. state может быть любой структурой данных JSON. Он передается обратно обработчику событий popstate.
2. title может быть любой строкой. Этот параметр в настоящее время не используется основными браузерами. Если вы хотите установить заголовок страницы, вы должны сохранить его в аргументе state и установить вручную в popstate.
3. url может быть, ну, любым URL. Это URL, который должен отображаться в адресной строке браузера.

Событие popstate вызывается после смещения истории, когда пользователь нажимает кнопку "Назад" в браузере.

Код: Выделить всё

window.addEventListener("popstate", function(event) {
    // какое то событие, например, открытие фото с фреймом
    // Если вы использовали переменную state, то она доступна в event.state 
}

Так как это поддерживают не все браузеры, то в качестве второго варианта можно использовать хеш-урлы. Например, вот так:

Код: Выделить всё

function setLocation(curLoc){
		try {
		  history.pushState(null, null, curLoc);
		  return;
		} catch(e) {}
		location.hash = '#' + curLoc;
	}

Собственно все. Удачи.

---
Ссылка на статью: http://citylive.ru/blog/webcoders/193.html*