Home > Developer > Web Develop
Http://www.ruanyifeng.com/blog/2011/03/url_hash.html
Last September, Twitter was revamped.
A significant change is that URLs are added to the "#!" Symbol. For example, before the revision of the User homepage URL is
Http://twitter.com/username
After the revision, it became
Http://twitter.com/#!/username
In my mind, this is the first time that a major web site uses "#" for a large number of key URLs that interact directly with the user. This indicates that the function of the pound sign (Hash) is being re-recognized. This article, according to HttpWatch's article, organizes all important knowledge points related to the well number.
First, #的涵义
#代表网页中的一个位置. The character to the right is the identifier for that position. Like what
Http://www.example.com/index.html#print
The print location that represents the page index.html. When the browser reads the URL, it automatically scrolls the print position to the viewable area.
There are two methods for specifying an identifier for the page location. One is the use of anchor points, such as <a name= "print" ></a>, and the second is the use of ID attributes, such as <div id= "print" >.
Second, the HTTP request does not include #
#是用来指导浏览器动作的, 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 that the browser makes is this:
Get/index.html http/1.1
Host:www.example.com
Can see, just request index.html, there is no "#print" part.
Third, #后的字符
Any character that appears after the first # is interpreted by the browser as a positional identifier. This means that none of these characters will be sent to the server side.
For example, the intent of the following URL is to specify a color value:
Http://www.example.com/?color= #fff
However, the actual requests made by the browser are:
GET/?color= http/1.1
Host:www.example.com
As you can see, the "#fff" is omitted. The browser will treat the # transcoding as a literal character only if it is transcoded to%23. In other words, the above URL should be written as:
Http://example.com/?color=%23fff
Iv. Change # does not trigger page reload
Simply change the part of the #, the browser will only scroll to the appropriate location and will not reload the page.
For example, from
Http://www.example.com/index.html#location1
Change into
Http://www.example.com/index.html#location2
The browser does not re-request index.html to the server.
V. Change # will change the browser's access history
Each time you change the # section, you add a record to your browser's access history and use the back button to go back to the previous location.
This is especially useful for AJAX applications, where you can use different # values to represent different access states, and then give the user a link to access a state.
It is important to note that the above rules do not hold for IE 6 and IE 7, they will not increase the historical record because of the change of #.
Six, Window.location.hash read # value
Window.location.hash This property can be read and writable. When read, it can be used to determine if the state of the Web page changes, and when it is written, it creates an access history without reloading the page.
Vii. Events of Onhashchange
This is a new HTML 5 event that 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 location.hash changes.
Eight, Google crawl # mechanism
By default, Google's web spiders ignore the # portion of the URL.
However, Google also stipulates that if you want AJAX-generated content to be read by the browsing engine, the URL can use "#!", and Google will automatically convert the content behind it into the value of the query string _escaped_fragment_.
For example, Google found the following URL for the new Twitter:
Http://twitter.com/#!/username
It will automatically fetch another URL:
Http://twitter.com/?_escaped_fragment_=/username
With this mechanism, Google can index dynamic AJAX content.
Finish
The pound sign of the URL
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
