-
В сентябре прошлого года Twitter обновил свою версию. Существенным изменением является то, что к URL-адресу добавлен символ «#!». Например, URL-адрес домашней страницы пользователя до изменения:
http://twitter.com/имя пользователя
После доработки стало
http://twitter.com/#!/имя пользователя
Это первый случай, когда «#» широко используется в важных URL-адресах основного веб-сайта. Это показывает, что роль знака решетки вновь признается. Эта статья основана на статье HttpWatch, в которой собраны все важные моменты, связанные со знаком фунта.
1. Значение #
#Представляет позицию на веб-странице. Символ справа — идентификатор позиции. например,
http://www.example.com/index.html#PRint
Он представляет позицию печати веб-страницы index.html. После того, как браузер прочитает этот URL-адрес, он автоматически прокрутит позицию печати до видимой области. Существует два способа указать идентификатор местоположения веб-страницы. Один из них — использовать точки привязки, например <a name="print"></a>, а другой — использовать атрибуты идентификатора, например <div id="print" >.
2. HTTP-запросы не содержат #
# используется для управления действиями браузера и совершенно бесполезен на стороне сервера. Поэтому # не включается в HTTP-запрос.
Например, посетите следующий URL-адрес:
http://www.example.com/index.html#print
Фактический запрос, сделанный браузером, таков:
ПОЛУЧИТЬ /index.html HTTP/1.1
Хост: www.example.com
Как видите, запрашивается только index.html, а части «#print» вообще нет.
3. Символы после #
Любые символы, которые появляются после первого #, будут интерпретироваться браузером как позиционный идентификатор. Это означает, что ни один из этих символов не будет отправлен на сервер.
Например, следующий URL-адрес предназначен для указания значения цвета:
http://www.example.com/?color=#fff
Однако фактический запрос, сделанный браузером:
GET /?color= HTTP/1.1
Хост: www.example.com
Как видите, «#fff» опущен. Только если # перекодировано в %23, браузер будет воспринимать его как буквальный символ. То есть URL-адрес выше должен быть записан как:
http://example.com/?color=%23fff
4. Измените #Не запускать перезагрузку веб-страницы.
Просто измените часть после #, браузер только прокрутит до соответствующей позиции и не перезагрузит веб-страницу.
Например, из
http://www.example.com/index.html#location1
Изменить на
http://www.example.com/index.html#location2
Браузер не будет повторно запрашивать index.html с сервера.
5. Изменение # изменит историю доступа браузера.
Каждый раз при изменении части после # в историю доступа браузера будет добавляться запись. Для возврата на предыдущую позицию используйте кнопку «Назад». Это особенно полезно для Ajax-приложений, где разные значения # могут использоваться для представления разных состояний доступа, а затем пользователю может быть предоставлена ссылка для доступа к определенному состоянию. Стоит отметить, что приведенные выше правила не распространяются на IE 6 и IE 7, они не будут увеличивать историю из-за смены #.
6. window.location.hash считывает # значение
Свойство window.location.hash доступно для чтения и записи. При чтении его можно использовать для определения того, изменился ли статус веб-страницы, при записи будет создана запись истории доступа без перезагрузки веб-страницы.
7. событие onhashchange
Это новое событие в HTML 5. Это событие будет вызвано при изменении значения #. IE8+, Firefox 3.6+, Chrome 5+, Safari 4.0+ поддерживают это событие.
Есть три способа его использования:
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);
В браузерах, которые не поддерживают onhashchange, вы можете использовать setInterval для отслеживания изменений в location.hash.
8. Механизм сканирования Google #
По умолчанию веб-пауки Google игнорируют часть URL-адреса #.
Однако Google также предусматривает, что если вы хотите, чтобы контент, сгенерированный Ajax, читался механизмом просмотра, вы можете использовать «#!» в URL-адресе, и Google автоматически преобразует контент, следующий за ним, в значение строки запроса _escaped_fragment_. .
Например, Google обнаружил, что URL-адрес новой версии Twitter выглядит следующим образом:
http://twitter.com/#!/имя пользователя
Другой URL-адрес будет автоматически просканирован:
http://twitter.com/?_escaped_fragment_=/имя пользователя
С помощью этого механизма Google может индексировать динамический контент Ajax.
Источник статьи: онлайн-дневник Жуань Ифэн.