The pound sign of the URL

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.