Для чего нужен шебанг/хешбанг (#!) в Facebook и новых URL-адресах Twitter?

Question

Я только что заметил, что длинные, запутанные URL-адреса Facebook, к которым мы привыкли, выглядят так:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

Насколько я помню, ранее в этом году это была обычная строка, похожая на фрагмент URL-адреса (начинающаяся с #), без восклицательного знака.Но сейчас это шебанг или хашбэнг(#!), который я раньше видел только в сценариях оболочки и сценариях Perl.

А новый твиттер URL-адреса теперь также содержат #! символы.Например, URL-адрес профиля Twitter теперь выглядит так:

http://twitter.com/#!/BoltClock

Делает #! теперь играют какую-то особую роль в URL-адресах, например, для определенной структуры Ajax или чего-то еще, поскольку новые интерфейсы Facebook и Twitter теперь в значительной степени Ajaxифицированы?Будет ли использование этого в моих URL-адресах каким-либо образом полезно для моего веб-приложения?

Answer 1

Эта техника сейчас устарело.

Этот использовал к Скажите Google, как индексировать страницу.

https://developers.google.com/webmasters/ajax-crawling/

Эта техника в основном вытеснила способность использовать API истории JavaScript, которая была введена рядом с HTML5. Для URL, как www.example.com/ajax.html#!key=value, Google проверит URL www.example.com/ajax.html?_escaped_fragment_=key=value Чтобы получить беседующую версию содержимого.

Answer 2

OctoTORPE / Number-Sign / Hashmark имеет особую значимость в URL-адресе, он обычно определяет название раздела документа. Точный термин состоит в том, что текст после хеша является якорь часть URL. Если вы используете Wikipedia, вы увидите, что большинство страниц имеют оглавление, и вы можете перейти к разделам в документе с якорем, таким как:

https://en.wikipedia.org/wiki/alan_turing#early_computers_and_the_turing_test.

https://en.wikipedia.org/wiki/Alan_Turing Определяет страницу и Early_computers_and_the_Turing_test Якорь. Причина, по которой Facebook и другие приложения, управляемые JavaScript (как у меня собственные Дерево и камни) Используйте анкеры состоит в том, что они хотят создавать страницы с закладки (как предложено комментарий к этому ответу) или поддерживать кнопку назад без перезагрузки всей страницы с сервера.

Чтобы поддержать закладки и кнопку «Назад», вам нужно изменить URL. Однако, если вы измените часть страницы (с чем-то вроде window.location = 'http://raganwald.com';) к другому URL или не указав якорь, браузер загрузит всю страницу от URL. Попробуйте это в Firebug или Safari's JavaScript Console. Нагрузка http://minimal-github.gilesb.com/raganwald. Отказ Сейчас в консоли JavaScript введите:

window.location = 'http://minimal-github.gilesb.com/raganwald';

Вы увидите обновление страницы с сервера. Теперь введите:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

Ага! Нет страницы Обновить! Тип:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

До сих пор нет обновления. Используйте кнопку «Назад», чтобы увидеть, что эти URL находятся в истории браузера. Браузер отмечает, что мы находимся на одной странице, но просто меняем якорь, поэтому он не перезагружается. Благодаря этому поведению, мы можем иметь одно приложение JavaScript, которое появляется в браузере, чтобы быть на одной «странице», но иметь множество разделов с добавлением в размере, которые уважают кнопку «Назад». Приложение должно изменить якорь, когда пользователь вводит разные «состояния», и также, если пользователь использует кнопку «Назад» или закладку или ссылку для загрузки приложения с прилагаемым приложением, приложение должно восстановить соответствующее состояние.

Таким образом, там у вас есть: анкеры предоставляют программисты JavaScript с механизмом для создания добавления в размере закладки, индексируемых и обратно-кнопок. Эта техника имеет имя: это Интерфейс одной страницы.

PS Есть четвертая прибыль в эту технику: загрузка контента страницы через AJAX, а затем впрыскивая его в текущий DOM может быть намного быстрее, чем загрузка новой страницы. В дополнение к увеличению скорости, дальнейшие трюки, такие как нагрузка определенных порций на заднем плане, могут быть выполнены под контролем программиста.

PPS Учитывая все это, «Bang» или восклицательный знак является еще одним подсказом для веб-сканера Google, что точная та же страница может быть загружена с сервера на несколько разных URL. Видеть Ajax ползет. Отказ Другая методика состоит в том, чтобы сделать каждую ссылку указывать на доступ к серверу URL-адреса, а затем использовать ненавязчивый JavaScript, чтобы изменить его в SPI с помощью якоря.

Вот ключевую ссылку снова: Манифест интерфейса одной страницы

Answer 3

Прежде всего:Я автор Манифеста об одностраничном интерфейсе, цитируемого Раганвальдом.

Как очень хорошо объяснил Раганвальд, наиболее важным аспектом подхода одностраничного интерфейса (SPI), используемого в FaceBook и Twitter, является использование хеша. # в URL-адресах

Персонаж ! добавляется только для целей Google, это обозначение является «стандартом» Google для сканирования веб-сайтов, интенсивно использующих AJAX (в крайних случаях веб-сайтов с одностраничным интерфейсом).Когда сканер Google находит URL-адрес с #! он знает, что существует альтернативный обычный URL-адрес, обеспечивающий то же «состояние» страницы, но в данном случае во время загрузки.

Несмотря на #! Комбинация очень интересна для SEO, поддерживается только Google (насколько мне известно), с помощью некоторых приемов JavaScript вы можете создавать веб-сайты SPI, совместимые с SEO для любого веб-сканера (Yahoo, Bing...).

Манифест SPI и демонстрационные версии не используют формат Google. ! в хэшах эту нотацию можно было бы легко добавить, и сканирование SPI могло бы быть еще проще (ОБНОВЛЕНИЕ:сейчас !нотация используется и остается совместимой с другими поисковыми системами).

Взгляните на это руководство, является примером простого сайта ItsNat SPI, но вы можете выбрать некоторые идеи для других платформ. Этот пример совместим с SEO для любого веб-сканера.

Сложная проблема состоит в том, чтобы сгенерировать любое (или выбранное) «состояние страницы AJAX» в виде простого HTML для SEO, в ItsNat это очень просто и автоматически, один и тот же сайт одновременно использует SPI или страницу для SEO (или когда JavaScript отключен). для доступности).С другими веб-фреймворками вы всегда можете использовать подход двойного сайта: один сайт основан на SPI, а другая страница — для SEO, например, Twitter использует эту технику «двойного сайта».

Answer 4

я бы очень осторожно Если вы рассматриваете принятие этой конвенции Hashbang.

Как только вы хэшбанг, вы не можете вернуться. Это, наверное, самая натуральная проблема. Пост Бен выдвинул точку зрения, когда толстяк более широко принят, мы можем оставить Hashbangs позади и вернуться к традиционным URL-адресам. Ну, факт есть, вы не можете. Ранее я заявил, что URL-адреса навсегда, они проиндексированы и заархивированы и обычно держались вокруг. Чтобы добавить к этому, крутые URL не меняются. Мы не хотим отключить себя от всех ценных ссылок на наше содержание. Если вы реализовали URL-адреса Hashbang в любой точке, то хотите изменить их без нарушения ссылок. Единственный способ сделать это, это запустив несколько JavaScript в корневом документе вашего домена. Навсегда. Это никоим образом не временно, вы застряли с этим.

Вы действительно хотите Используйте pushstate вместо hashbangs, Поскольку делают ваши URL-URL-UGLY и, возможно, сломаны - навсегда - это колоссальный и постоянный недостаток в хэсбанг.

Answer 5

Чтобы получить хорошее последующее наблюдение обо всем этом, Twitter - один из пионеров URL-адреса Hashbang и одноэтажный интерфейс Hashbang - признал, что система Hashbang была медленной в долгосрочной перспективе, и что они фактически начали обращать внимание на решение и возвращение Старого школы ссылки.

Статья об этом здесь.

Answer 6

Я всегда предполагал ! только что указал, что хеш-фрагмент, который соблюдал соответствовал URL-адресу, с ! Принимая место корень сайта или домена. Это может быть что-нибудь, в теории, но кажется, что Google Ajax Clublic API так нравится это так.

Хеш, конечно, только указывает на то, что никакая реальная страница перезагрузка не происходит, так что да, это для целей AJAX. Редактировать: Раганвальд делает прекрасную работу, объясняя это более подробно.

Answer 7

Ответы выше описаны хорошо, почему и как он используется в Twitter и Facebook, что я пропустил, это объяснение того # делает по умолчанию ...

На «нормальном» (не приложение одной страницы) вы можете сделать закрепление с hash на любой элемент, который имеет идентификатор, поместив эти элементы идентификатора в URL после хеша #

Пример:

(на Chrome) нажмите F12. или RIHGT мышь а также Inspect element

затем взять id="answer-10831233" и добавить к URL, как следующее

https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

и вы получите ссылку, которая прыгает на этот элемент на странице

Что такое Shebang / Hashbang (#!) В Facebook и новые URL-адреса в Twitter?

Используя # Как описано в ответах выше, вы представляете противоречивое поведение ... Хотя я бы не потерял спать над ним ... Поскольку угловой, он стал несколько стандартным ....