2010-10-03 3 views
60

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

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

+2

Я вижу много голосов и фаворитов, но у кого есть ответ? – Snoob

+0

И есть индикатор загрузки на вкладке браузера. – jcubic

+0

Есть ли у кого есть answeer? – Snoob

ответ

64

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

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

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

-8

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

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

+0

Спасибо, я попробовал использовать Firebug, чтобы изменить somethings один facebook, затем я нажимаю вкладку информации и то, что я сделал еще «живым» -> Это не полный запрос – Snoob

+0

Могут ли они использовать клиентскую память для ускорения работы? – Michael

+0

Какой браузер вы используете, в моем Firefox (Mac) это URL-адрес, в котором я заканчиваю http://www.facebook.com/facebook?v=wall#!/facebook?v=info, определенно, хэш-метод истории , – Michael

19

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


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

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

Где Chrome просто показывает:

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

Это имеет смысл, given this is how you make AJAX Content crawlable with the Google search engine, поэтому их браузер распознает, откуда идет контент.

Коррекция по специфике: Webkit браузеры показывают укороченный URL Facebook хочет с помощью функции HTML 5 История you can see the code here (посмотрите на HistoryManager) в данном случае конкретно они используют .replaceState() заменить URL вы пошли с прямым доступным.

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

+0

Отличная находка Ник. Обратите внимание, что это, вероятно, специфическая вещь WebKit, так как она работает в Safari одинаково. – anddoutoi

+0

@anddoutoi - У меня нет Safari для тестирования :) Я обновлю, чтобы включить это ... и заметьте, что этот ответ может быть устаревшим быстро, поскольку другие поддерживают HTML5-бит все больше и больше. –

+0

Интересно, что просмотр нового дизайна Twitter в браузере Webkit делает ** не ** следовать той же схеме, что мы видим на Facebook, т.е. я все еще вижу '/ #!' В URL-адресах Twitter, но не в URL-адресах Facebook , – chigley

0

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