How does email navigation work in Gmail?

Question

JavaScript

In the Gmail web interface, email navigation is done as follows:

Initially, we are on the Inbox page

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

Click on the letter and get to

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

This opens the letter itself.

As you can see, we are working through the "lattice" # , so the page is not reloaded, instead, the "anchor" transition occurs. However, the URL changes, and the browser makes the transition without sending a request to the server, as a result of which the text of the letter (which was already stored somewhere in the DOM and displayed to the user via JS) instantly opens, and the "Back" button in the browser becomes available, which is obvious. If you press it, we return to the list of letters, the text of the letter is hidden, of course, without reloading the page, and this works very quickly.

Question: How does it work? Specifically, after pressing "Back". After all, we are working on the same page, we need to somehow close the open letter. How does this mechanism work? What event is being processed? I hope the point is clear.

Answer 1

for learning e.g. developer.yahoo.com/yui/3/history/ and developer.yahoo.com/yui/history/

Answer 2

GWT has facilities for assigning handlers to different history tokens (the one after the #).
http://examples.roughian.com/index.htm#Tutorials~History_Support
Not sure, but I suspect that gmail is also on GWT.

Answer 3

A timer that scans the URL and generates the necessary events. There is no url change event in the browser.
The back button is serviced by the browser itself when the url changes.

Answer 4

>> In reality, the letter is first opened, and then, according to the event, a certain anchor is put down
How do you explain then that if there is an open letter. We copy the url like https://mail.google.com/mail/?shva=1#inbox/19c8764cb4a704af, paste it in another tab, and the letter opens again. That is, the content depends on the url, and not vice versa.
Also, if you look at the menu on the left: there are just links: https://mail.google.com/mail/?shva=1#inbox, https://mail.google.com/mail/?shva=1#mbox, https ://mail.google.com/mail/?shva=1#starred, etc... But after clicking on this link in the bowels of GWT, the url change handler is triggered, the handler corresponding to the token (inbox/mbox/starred) is pulled , and the handler renders the desired content.