Как Facebook переписывает исходный URL страницы в адресной строке браузера? - PullRequest
Новая
       11

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

60 голосов
/ 03 октября 2010

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

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

Ответы [ 4 ]

64 голосов
/ 03 октября 2010

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

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

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

19 голосов
/ 03 октября 2010

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

На данный момент это 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, это может быстро устареть.

0 голосов
/ 22 октября 2010

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

0 голосов
/ 03 октября 2010

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

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

...