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

Question

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

60

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

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

Snoob 03 окт. 2010, в 14:24

Источник

2

Я вижу много голосов и фаворитов, но у кого-нибудь есть ответ?
cdxf 03 окт. 2010, в 12:44
0

И есть также индикатор загрузки во вкладке браузера.
jcubic 03 окт. 2010, в 12:45
0

У кого-нибудь есть ответ?
cdxf 03 окт. 2010, в 12:47
2

@ Snoob: Дай ему немного времени, давай. Люди голосуют, потому что они тоже хотят знать ответ ...
Felix Kling 03 окт. 2010, в 12:49
0

Потому что я очень плохо говорю по-английски, поэтому мне нужен кто-то helpme, чтобы переписать (сделать его более понятным) этот вопрос, спасибо
cdxf 03 окт. 2010, в 12:53
0

Разве это не так же, как на вкладках StackOverflow?
Sandeep Singh Rawat 03 окт. 2010, в 12:53
1

Подобное поведение можно увидеть и в Flickr. Откройте любую фотографию в Flickr, и вы увидите наборы фотографий с правой стороны. Нажмите на название набора фотографий, и значение адресной строки изменится без перезагрузки страницы.
Veera 03 окт. 2010, в 13:14
1

Отредактировал лучший английский для вас ... пожалуйста, скажите мне, если есть ошибка, которую я не видел :)
chakrit 04 окт. 2010, в 03:03
0

@Sandeep: Нет, потому что Stack Overflow не использует Ajax для загрузки содержимого страницы.
Sasha Chedygov 18 окт. 2010, в 22:58

Показать ещё 7 комментариев

Теги:

javascript

ajax

html5

webkit

fragment-identifier

4 ответа

19

@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 все больше и больше, это может быстро устареть.

Nick Craver 03 окт. 2010, в 14:14

0

Отличная находка Ник. Еще одно замечание: это, вероятно, специфическая вещь для WebKit, так же, как и в Safari.
anddoutoi 03 окт. 2010, в 13:11
0

@anddoutoi - у меня нет Safari для тестирования :) Я обновлю, чтобы включить это ... и заметьте, что этот ответ может быть устаревшим быстро, так как другие все больше и больше поддерживают HTML5.
Nick Craver♦ 03 окт. 2010, в 13:12
0

Интересно, что просмотр нового дизайна Twitter в браузере Webkit не следует той же схеме, что мы видим в Facebook, то есть я все еще вижу /#! в URL-адресах Twitter, но не в URL-адресах Facebook.
chigley 03 окт. 2010, в 13:20
0

@chigley - в этом случае причина, по которой он работает в WebKit, заключается в том, что он поддерживает history HTML5, @bobince имеет правильную идею, хотя для этого конкретного примера он использует .replaceState() вместо .pushState() (хотя Facebook использует его в других местах) , Проверьте HistoryManager объект здесь: static.ak.fbcdn.net/rsrc.php/zF/r/4A0A_IDcjJ7.js
Nick Craver♦ 03 окт. 2010, в 13:27
3

#! Информация тоже полезна. Я раньше не видел, чтобы это указывалось как стандартное поведение паука, надеюсь, другие движки тоже его подберут.
bobince 03 окт. 2010, в 21:11
5

@bobince - Есть другие поисковые системы?
Nick Craver♦ 04 окт. 2010, в 03:05

Показать ещё 4 комментария

0

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

Ronny 22 окт. 2010, в 00:17

-8

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

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

CharlesLeaf 03 окт. 2010, в 14:12

0

Спасибо, я попытался с помощью Firebug изменить что-то на одном Facebook, затем я щелкаю вкладку «Информация» и то, что я сделал до сих пор «живым» -> Это не полный запрос страницы
cdxf 03 окт. 2010, в 12:58
0

Могут ли они использовать хранилище на стороне клиента, чтобы ускорить процесс?
Michael 03 окт. 2010, в 12:58
0

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

Показать ещё 1 комментарий

Ещё вопросы

Я вижу много голосов и фаворитов, но у кого-нибудь есть ответ?
И есть также индикатор загрузки во вкладке браузера.
@ Snoob: Дай ему немного времени, давай. Люди голосуют, потому что они тоже хотят знать ответ ...
Потому что я очень плохо говорю по-английски, поэтому мне нужен кто-то helpme, чтобы переписать (сделать его более понятным) этот вопрос, спасибо
Разве это не так же, как на вкладках StackOverflow?
Подобное поведение можно увидеть и в Flickr. Откройте любую фотографию в Flickr, и вы увидите наборы фотографий с правой стороны. Нажмите на название набора фотографий, и значение адресной строки изменится без перезагрузки страницы.
Отредактировал лучший английский для вас ... пожалуйста, скажите мне, если есть ошибка, которую я не видел :)
@Sandeep: Нет, потому что Stack Overflow не использует Ajax для загрузки содержимого страницы.
Отличная находка Ник. Еще одно замечание: это, вероятно, специфическая вещь для WebKit, так же, как и в Safari.
@anddoutoi - у меня нет Safari для тестирования :) Я обновлю, чтобы включить это ... и заметьте, что этот ответ может быть устаревшим быстро, так как другие все больше и больше поддерживают HTML5.
Интересно, что просмотр нового дизайна Twitter в браузере Webkit не следует той же схеме, что мы видим в Facebook, то есть я все еще вижу /#! в URL-адресах Twitter, но не в URL-адресах Facebook.
@chigley - в этом случае причина, по которой он работает в WebKit, заключается в том, что он поддерживает history HTML5, @bobince имеет правильную идею, хотя для этого конкретного примера он использует .replaceState() вместо .pushState() (хотя Facebook использует его в других местах) , Проверьте HistoryManager объект здесь: static.ak.fbcdn.net/rsrc.php/zF/r/4A0A_IDcjJ7.js
#! Информация тоже полезна. Я раньше не видел, чтобы это указывалось как стандартное поведение паука, надеюсь, другие движки тоже его подберут.
@bobince - Есть другие поисковые системы?
Спасибо, я попытался с помощью Firebug изменить что-то на одном Facebook, затем я щелкаю вкладку «Информация» и то, что я сделал до сих пор «живым» -> Это не полный запрос страницы
Могут ли они использовать хранилище на стороне клиента, чтобы ускорить процесс?
Какой браузер вы используете, в моем Firefox (Mac) это URL, который я заканчиваю с facebook.com/facebook?v=wall#!/facebook?v=info , определенно методом хеширования истории.

bobince · Accepted Answer · 2010-10-03T13-46-00.000Z

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

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

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