Как facebook переписывает исходный URL-адрес страницы в адресной строке браузера?

Перейдите в http://www.facebook.com/facebook?v=wall, затем щелкните вкладку с информацией. Содержимое будет загружено, а адресная строка теперь станет http://www.facebook.com/facebook?v=info, но веб-страница не перезагрузится.

Сначала я думаю, что это Ajax, но мой вопрос в том, как изменить адресную строку без перезагрузки? Я знаю, что я могу изменить якорь (#wall) с помощью JS, но querystring (? V = wall), как?

Ответ 1

Он использует HTML5 новую history.pushState() функцию, позволяющую странице маскироваться под другим URL-адресом, чем тот, из которого она была изначально выбрана.

В данный момент это похоже на поддержку WebKit, поэтому остальные из нас видят ?v=wall#!/facebook?v=info вместо ?v=info.

Эта функция позволяет загружать страницы с динамической загрузкой должным образом закладок, обмениваться и т.д. между поддерживающими JS и не поддерживающими JS пользовательскими агентами. Потому что, если вы как пользователь JS связали кого-то с ?v=wall#!/facebook?v=info, и их браузер не поддерживал JS и XMLHttpRequest, страница не сработала бы для них. #! также используется в качестве подсказки для поисковых систем для загрузки версии, отличной от AJAX.

Ответ 2

@Snoob - Я был бы признателен, если бы вы приняли @bobince answer вместо этого, он был на правильном пути по поводу особенностей здесь. Поскольку я не могу удалить/удалить это до тех пор, пока он не будет принят, я обновлю его как можно более корректный.


На данный момент это WebKit (Chrome, Safari и т.д.) конкретная вещь, которую вы видите (а точнее, не видите), как @bobince указывает, что в других браузерах вы можете увидеть реальный URL-адрес в панели:

http://www.facebook.com/facebook?v=wall#!/facebook?v=info\

Если Chrome просто показывает:

http://www.facebook.com/facebook?v=info

Это имеет смысл, учитывая, что вы создаете AJAX Content для сканирования с помощью поисковой системы Google, поэтому их браузер распознает, где содержание также происходит.

Исправление по специфике: браузеры Webkit показывают сокращенный URL-адрес facebook, который хочет использовать функции истории HTML 5 вы можете увидеть здесь код ( взгляните на HistoryManager), в этом случае они специально используют .replaceState(), чтобы заменить URL, с которым вы столкнулись, с прямым один доступный.

Примечание.. Этот ответ может быть недействительным позже (конкретный бит WebKit), поскольку другие браузеры поддерживают функции HTML5 все больше и больше, это может быстро устареть.

Ответ 3

Для разработчиков MooTools я рекомендую проверить плагин cpojer mootools-history, который обеспечивает поддержку собственного API истории, когда он доступен, с резервным доступом к хэшам.

Ответ 4

У меня нет Facebook, поэтому я не могу проверить. Но я на 95% уверен, что он должен быть полным запросом страницы, панель местоположений не может быть написана, потому что это будет очень полезной функцией, чтобы отлаживать фишинг-сайты (вместо http://fakeonlinebank.com переписать на http://yourtrustybank). Вероятно, это так быстро, что ваш браузер загружает только эту часть?

Но мне любопытно посмотреть, не изменит ли меня кто-нибудь по этому поводу, потому что это будет означать, что у них есть ответ, который вы хотите услышать;)