Я пытаюсь реализовать просмотр контента, как это делается в Facebook, когда пользователь просматривает фотографии. Я думаю, что все знакомы с просмотром этой фотографии, где вы можете нажать «Далее» и «Предыдущее» и сразу же получить следующую или предыдущую фотографию (вы также можете перемещаться с помощью клавиш со стрелками).
Когда вы, например, нажимаете «Далее», вы замечаете, что страница не обновляется - только содержимое. Сначала я подумал, что это делается с помощью простых вызовов ajax, которые обновляют только «контент», в данном случае изображение, описание и комментарии. Но потом я заметил, что также изменился URL на панели инструментов «Местоположение» моего браузера!
Я попытался проверить это с помощью Firebug и обнаружил, что при нажатии «Далее» загружается только следующая фотография, и я до сих пор не знаю, откуда загружаются комментарии и метаданные изображения (описание, время, теги, ...) ,
Может кто-нибудь объяснить, как осуществляется этот метод - URL-адрес страницы изменяется без обновления страницы (или даже без «мерцания» страницы, если она обновляется из кэша).
Я знаю, как изменить содержимое страницы с помощью ajax, но URL-адрес этой страницы остается неизменным все время. Если я нажму кнопку «обновить», я снова получу первую страницу. Но не на Facebook, так как даже "window.location" изменяется каждый раз без фактического перенаправления.
Еще одна вещь, которую я заметил, это то, что нижняя панель инструментов (приложения, чат, ...) "всегда сверху". Даже если вы измените страницу, эта панель инструментов не обновляется и всегда остается сверху - она даже не мигает, как другие обновленные страницы (либо с веб-сервера, либо из локального кэша). Я предполагаю, что это та же самая техника, что и выше - какая-то «фальшивая» переадресация или что-то еще?
Ответ - pushState
if (window.history.pushState)
window.history.pushState([object or string], [title], [new link]);
Ты улыбнешься:)