Страница "Переадресация" без обновления (стиль фотографий Facebook)

Я пытаюсь реализовать просмотр содержимого, как это делается на Facebook, когда пользователь просматривает фотографии. Я предполагаю, что все знакомы с тем просмотром фотографий, где вы можете нажать "следующий" и "предыдущий" и сразу получить следующую или предыдущую фотографию (вы также можете перемещаться с помощью клавиш со стрелками).

Когда вы нажимаете "Далее", например, вы замечаете, что страница не обновляется - только контент. Сначала я думал, что это делается с помощью простых вызовов ajax, которые обновляют только "контент" в этом случае изображение, описание и комментарии. Но потом я заметил, что также изменился URL-адрес на панели инструментов "Местоположение" моего браузера! Я попытался проверить это с помощью Firebug и обнаружил, что при нажатии "next" загружается только следующая фотография, и я до сих пор не знаю, откуда загружаются комментарии и метаданные изображений (описание, время, теги,...),

Может кто-нибудь объяснить, как этот метод будет выполнен - ​​изменение URL-адреса страницы без обновления страницы (или даже без "мигания страницы", если она обновляется из кеша). Я знаю, как изменять содержимое страницы с помощью ajax, но URL-адрес этой страницы остается неизменным. Если я нажму кнопку "Обновить", я снова получу первую страницу. Но не на Facebook, так как даже "window.location" изменяется каждый раз без фактического перенаправления.

Другое, что я заметил, это то, что нижняя панель инструментов (приложения, чат,...) всегда "сверху". Даже если вы меняете страницу, эта панель инструментов не обновляется и всегда остается на вершине - она ​​даже не "мигает", как другие обновленные страницы (либо с веб-сервера, либо из локального кеша). Я предполагаю, что это та же техника, что и выше, - какие-то "поддельные" перенаправления или что-то еще?

Ответ - pushState

if (window.history.pushState)
    window.history.pushState([object or string], [title], [new link]);

Вы будете улыбаться:)

Ответ 1

Я попытался изменить изображения через facebook, и вот что я увидел:

В Firefox:

URL страницы не изменяется. Изменяется только хеш. Это метод, позволяющий сканерам индексировать контент. Что происходит:

  • Пользователь нажимает кнопку "Далее"
  • JS загружает следующее изображение с тегами, комментариями и т.д. и заменяет их старым контентом.
  • JS изменяет хэш для соответствия новому изображению

URL-адреса выглядят следующим образом:   http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (обратите внимание на хэш)

Что касается второго вопроса, это только преимущество вышеописанной техники. Когда вы находитесь на facebook, страница редко обновляется. Изменяется только хэш, поэтому вы можете отправлять ссылки другим пользователям, а искатели могут индексировать контент.

В Google Chrome:

Кажется, что chrome hassome способ изменить URL-адреса, не обновляя страницу. Он делает это с помощью window.history.pushState. Читайте об этом здесь.

URL-адреса выглядят следующим образом: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (обратите внимание, что здесь нет хэша, но все же URL-адрес меняется вместе с изображениями)

В Epiphany:

Epiphany не изменяет URL-адрес при изменении изображения.

URL-адреса выглядят следующим образом: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (нет хеша, и URL-адрес остается неизменным при изменении изображения)

(не нужно проверять другие браузеры прямо сейчас)

Ответ 2

Один метод, не упомянутый здесь, - это метод window.onhashchange() (поддерживается в ie8 + и большинстве других), который они могли бы использовать

Ответ 3

Вы можете заметить, что URL-адрес страницы остается прежним. Однако, что изменилось, это хеш-страница (часть после # в URL-адресе).

Вам нужно что-то вроде этого: http://code.google.com/p/reallysimplehistory/