Смена URL без перезагрузки страницы?

Question

[makecode]

Здравствуйте.

Обнаружил, что во время листания фотографий вКонтакте стрелками, меняется URL в адресной строке. При этом страница не перезагружается. Firebug показывает что тянется только фото и все. Работает только в последних Chrome и Firefox. В остальных браузерах ссылка получается с хэшэм (#).

location.hash понятно что можно менять без перезагрузки страницы, но как реализована полная смена URL в данном случае? Ведь location.href не позволяет менять URL без перезагрузки.

Comments

[makecode]

Решение нашел для Firefox

developer.mozilla.org/en/DOM/Manipulating_the_browser_history

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Попробуйте выполнить скрипт выше в Firebug, URL сменится а страница не перегрузится.

[sajgak]

В хроме это тоже работает)

[makecode]

Да, господа. Оказывается это называется HTML5 History/State APIs.
Вот несколько ссылок, кому-нибудь пригодится.
www.whatwg.org/specs/web-apps/current-work/multipage/history.html
html5demos.com/history/
github.com/balupton/History.js/

Answer 1

[siegerstein]

history.pushState(null, null, '/anypath');

Answer 2

[sajgak]

var setLoc = function(loc) {
//curLoc = fixEncode(loc.replace(/#(\/|!)?/, ''));
curLoc = fixEncode(loc);
var l = (location.toString().match(/#(.*)/) || {})[1] || '';
if (!l && vk.al > 1) {
l = (location.pathname || '') + (location.search || '');
}
l = fixEncode(l);
if (l.replace(/^(\/|!)/, '') != curLoc) {
if (vk.al == 3) {
try {
history.pushState({}, '', '/' + curLoc);
return;
} catch(e) {}
}
window.chHashFlag = true;
location.hash = '#' + vk.navPrefix + curLoc;
if (withFrame && getLoc() != curLoc) {
setFrameContent(curLoc);
}
}
}
Выдернуто fireBug-ом из VK. так что вы ен ошиблись)

Answer 3

[MastaEx]

Да, в Хроме тоже работает.
Вот, нагуглил: www.w3.org/TR/html5/author/history.html#session-history-entry

Comments

[sajgak]

Странно, что в опере до сих пор эта фича не поддерживается. Вроде у них с html5 все в порядке

Answer 4

[devote]

habrahabr.ru/post/144071/ — polyfill для старых браузеров

Answer 5

[Melanitsky]

почему нельзя, можно:
window.location.href=/qa/6436/#photo"
если в урле есть # и сам урл совадает — перезагрузки не будет

Comments

[Aecktann]

а теперь зайдите в вКонтакте, про который говорил автор, и посмотрите, как это реализовано там.

Answer 6

[AlexAdmiral]

pjax, как неплохая альтернатива.

Answer 7

[Константин Романов]

Возможно такой вариант подойдет
diveintohtml5.info/examples/history/gallery/casey.html
тут подробнее htmlbook.ru/html5/history

Answer 8

[Emir Mamashov]

https://github.com/devote/HTML5-History-API