Что такое shebang / hashbang (#!) в Facebook и новых URL-адресах Twitter?

Question

Что такое shebang / hashbang (#!) в Facebook и новых URL-адресах Twitter?

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

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

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

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

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

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

803 7

url facebook fragment-identifier hashbang

7 ответов:

Comments

Ничего не найдено.

ceejayoz · Accepted Answer · 2015-12-15 03:24:48

эта техника теперь устаревший.

этой раньше расскажите 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 чтобы получить версию без AJAX содержание.

raganwald · Accepted Answer · 2016-12-01 21:47:41

octothorpe/number-sign / hashmark имеет особое значение в URL-адресе, он обычно идентифицирует имя раздела документа. Точный термин заключается в том, что текст, следующий за хэшем, является якорь часть URL-адреса. Если вы используете Википедию, вы увидите, что большинство страниц имеют оглавление, и вы можете перейти к разделам внутри документа с привязкой, например как:

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 или консоли Javascript Safari. Загрузить 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 механизм для создания заметных, индексируемых и удобных для обратной кнопки приложений. Эта техника имеет название: это Одностраничный Интерфейс.

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

p.p.s. учитывая все это, "взрыв" или восклицательный знак является еще одним намеком на веб-искатель Google, что точно такая же страница может быть загружена с сервера на несколько иной URL-АДРЕС. Смотрите Ajax Ползет. Другой метод заключается в том, чтобы каждая ссылка указывала на доступный для сервера URL-адрес, а затем использовать ненавязчивый Javascript для изменения его в SPI с привязкой.

вот ключевая ссылка снова:Манифест Одностраничного Интерфейса

jmarranz · Accepted Answer · 2011-04-10 18:57:46

прежде всего: я автор Манифеста интерфейса одной страницы, процитированного раганвальдом

как очень хорошо объяснил раганвальд, наиболее важным аспектом подхода к интерфейсу одной страницы (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 использует эту технику "двойного сайта".

Jeff Atwood · Accepted Answer · 2012-02-24 23:34:35

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

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

вы действительно хотите используйте pushState вместо hashbangs, потому что делает ваши URL-адреса уродливыми и, возможно, сломанный-навсегда - это колоссальный и постоянный недостаток hashbangs.

kingmaple · Accepted Answer · 2012-05-31 12:51:02

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

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

Alan H. · Accepted Answer · 2012-05-26 01:53:50

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

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

Matas Vaitkevicius · Accepted Answer · 2017-07-12 06:13:21

ответы выше хорошо описывают, почему и как он используется на 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?

С помощью # способом, описанным в ответах выше, вы вводите конфликтное поведение... хотя я бы не стал терять сон из-за этого... с Угловатый он стал чем-то вроде стандарта....