Как работает навигация по письмам в Gmail?

Question

[odiszapc]

В web-интерфейсе Gmail навигация по письмам сделана следующим образом:

Изначально мы на странице «Входящие»

https://mail.google.com/mail/?hl=ru&shva=1#inbox

Нажимаем на письмо и попадаем на

https://mail.google.com/mail/?hl=ru&shva=1#inbox/12c4911509040a02

При этом открывается само письмо.

Как видно, мы работаем через «решетку» #, поэтому перезагрузки страницы не происходт, вместо этого происходит переход «по якорю». Тем не менее, URL меняется, и браузер делает переход без отправки запроса на сервер, в результате чего мгновенно открывается текст письма (который уже где-то хранился в DOM и посредством JS выводится пользователю), и становится доступной кнопка «Назад» в браузере, что очевидно. Если ее нажать, мы возвращаемся к списку писем, текст письма при этом скрывается, конечно же без перезагрузки страницы, и это очень быстро работает.

Вопрос: Как это работает? Конкретно, после нажатия «Назад». Ведь мы работаем на одной странице, нужно как-то закрыть открытое письмо. Как работает этот механизм? Какое события обрабатывается? Надеюсь, суть вопроса ясна.

Answer 1

[pooh1]

для изучения например developer.yahoo.com/yui/3/history/ и developer.yahoo.com/yui/history/

Answer 2

[burdakovd]

В GWT есть средства для назначения обработчиков для разных history token (то что после #).

http://examples.roughian.com/index.htm#Tutorials~History_Support

Не уверен, но подозреваю, что gmail тоже на GWT.

Comments

[asm0dey]

Точно знаю, что он на GWT. Якоря — практически только декорация для пользователя и для браузера, чтобы он видел, что урл изменяется.
В реальности сначала открывается письмо, а потом уже по событию, проставляется некий якорь

Answer 3

[deeperton]

Таймер просматривающий урл и генерирующий нужные события. События изменения урла в браузере нет.

Кнопка Назад обслуживается самим браузером при изменении урла.

Comments

[odiszapc]

Что насчет onhashchange, которое по заверениям поддерживается Google Chrome 5, Safari 5, Opera 10.60, Firefox 3.6 и Internet Explorer 8?

[deeperton]

Не вижу в списки: Opera 9+, IE 7 (… простите… IE6), FF 3.x (все релизы)…
Впрочем — ничто не мешает проверить версию и браузер и подобрать нужны метод при загрузке приложения.

Answer 4

[burdakovd]

>> В реальности сначала открывается письмо, а потом уже по событию, проставляется некий якорь

Как вы тогда объясните, что если есть открытое письмо. Копируем url типа https://mail.google.com/mail/?shva=1#inbox/19c8764cb4a704af, вставляем в другой вкладке, и снова открывается письмо. То есть контент зависит от url, а не наоборот.

Также если посмотреть на меню слева: там просто ссылки: https://mail.google.com/mail/?shva=1#inbox, https://mail.google.com/mail/?shva=1#mbox, https://mail.google.com/mail/?shva=1#starred и т.д… А вот уже после перехода по этой ссылке в недрах GWT срабатывает обработчик изменения url, дергает обработчик, соответствующий токену (inbox/mbox/starred), и обработчик отображает нужный контент.

Comments

[burdakovd]

Всё время путаюсь куда отвечать=(