-
In September last year, Twitter revamped its version. A significant change is that the "#!" symbol has been added to the URL. For example, the user homepage URL before the revision is
After revision, it became
http://twitter.com/#!/username
This is the first time that "#" is used in important URLs on a large scale by a mainstream website. This shows that the role of the hash sign is being re-recognized. This article is based on HttpWatch’s article to sort out all the important knowledge points related to the pound sign.
1. The meaning of #
#Represents a position in the web page. The character to the right is the identifier of the position. for example,
http://www.example.com/index.html#PRint
It represents the print position of the web page index.html. After the browser reads this URL, it will automatically scroll the print position to the visible area. There are two ways to specify an identifier for a web page location. One is to use anchor points, such as <a name="print"></a>, and the other is to use id attributes, such as <div id="print" >.
2. HTTP requests do not include #
# is used to guide browser actions and is completely useless on the server side. Therefore, # is not included in the HTTP request.
For example, visit the following URL,
http://www.example.com/index.html#print
The actual request made by the browser is this:
GET /index.html HTTP/1.1
Host: www.example.com
As you can see, only index.html is requested, and there is no "#print" part at all.
3. Characters after #
Any characters that appear after the first # will be interpreted by the browser as a positional identifier. This means that none of these characters will be sent to the server.
For example, the following URL is intended to specify a color value:
http://www.example.com/?color=#fff
However, the actual request made by the browser is:
GET /?color= HTTP/1.1
Host: www.example.com
As you can see, "#fff" is omitted. Only if # is transcoded into %23, the browser will treat it as a literal character. That is, the URL above should be written as:
http://example.com/?color=%23fff
4. Change #Do not trigger web page reloading
Just change the part after #, the browser will only scroll to the corresponding position and will not reload the web page.
For example, from
http://www.example.com/index.html#location1
Change to
http://www.example.com/index.html#location2
The browser will not re-request index.html from the server.
5. Changing # will change the browser’s access history
Every time you change the part after #, a record will be added to the browser's access history. Use the "Back" button to return to the previous position. This is particularly useful for Ajax applications, where different # values can be used to represent different access states, and then the user can be given a link to access a certain state. It is worth noting that the above rules do not hold for IE 6 and IE 7, they will not increase the history due to the change of #.
6. window.location.hash reads # value
The property window.location.hash is readable and writable. When reading, it can be used to determine whether the status of the web page has changed; when writing, an access history record will be created without reloading the web page.
7. onhashchange event
This is a new event in HTML 5. This event will be triggered when the # value changes. IE8+, Firefox 3.6+, Chrome 5+, Safari 4.0+ support this event.
There are three ways to use it:
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);
For browsers that do not support onhashchange, you can use setInterval to monitor changes in location.hash.
8. The mechanism of Google crawling #
By default, Google's web spiders ignore the # part of the URL.
However, Google also stipulates that if you want the content generated by Ajax to be read by the browsing engine, you can use "#!" in the URL, and Google will automatically convert the content following it into the value of the query string _escaped_fragment_.
For example, Google found that the URL of the new Twitter version is as follows:
http://twitter.com/#!/username
Another URL will be automatically crawled:
http://twitter.com/?_escaped_fragment_=/username
Through this mechanism, Google can index dynamic Ajax content.
Source of article: Ruan Yifeng’s online diary