The role of "#" in the URL

In last September, Twitter was revised.

A significant change is that the URL is added "#! "Symbol. For example

Http://twitter.com/username

After the revision, it becomes

Http://twitter.com /#! /Username

This is the first time that major websites use "#" for a large scale in important URLs. This indicates that the role of hash is being re-recognized. Based on the httpwatch article, this article lists all important knowledge points related to the well number.

　　I. # meaning

# Represents a location in a webpage. The character on the right is the identifier of the position. For example,

Http://www.example.com/index.html#print

The position of index.html. After the browser reads the URL, it automatically rolls the print position to the visible area.

Specify an identifier for the webpage location. There are two methods. One is to use the anchor, for example, <a name = "print"> </a>, and the other is to use the ID attribute, such as <Div id = "print">.

　　2. HTTP requests do not include #

# It is used to guide browser actions and is useless to the server. Therefore, # is not included in HTTP requests #.

For example, visit the following URL,

Http://www.example.com/index.html#print

The actual request sent by the browser is as follows:

Get/Index.htmlHTTP/1.1

HOST: www.example.com

The request index.html does not contain "# print.

　　3. # subsequent characters

Any character that appears after the first # will be interpreted by the browser as a location identifier. This means that none of these characters will be sent to the server.

For example, the following URL is designed to specify a color value:

Http://www.example.com /? Color = # fff

However, the actual request sent by the browser is:

Get/? Color =HTTP/1.1

HOST: www.example.com

We can see that "# fff" is omitted. Only when # Is transcoded to % 23 will the browser process it as a real-definition character. That is to say, the above URL should be written:

Http://example.com /? Color = % 23fff

　　Iv. Change # Do not trigger webpage Overloading

The browser will only scroll to the corresponding position and will not reload the webpage.

For example

Http://www.example.com/index.html#location1

Change

Http://www.example.com/index.html#location2

The browser will not request index.html from the server again.

　　5. Change # changes the browser access history

After each change, a record is added to the browser's access history. You can use the "back" button to return to the previous position.

This is particularly useful for Ajax applications. Different # values can be used to indicate different access statuses, and users can be given a link to access a certain status.

It is worth noting that the above rules are not true for IE 6 and IE 7, and they will not add historical records due to the change.

　　6. Window. Location. Hash read # Value

Window. Location. Hash is readable and writable. When reading a webpage, it can be used to determine whether the webpage status changes. When writing a webpage, an access history record is created without reloading the webpage.

　　VII. onhashchange event

This is a newly added event in HTML 5. When the # value changes, this event is triggered. This event is supported by IE8 +, Firefox 3.6 +, chrome 5 +, and Safari 4.0 +.

It can be used in three ways:

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.

　　8. Google capture # Mechanism

By default, Google's web spider ignores the # part of the URL.

However, Google also stipulates that if you want the content generated by ajax to be read by the browser engine, you can use "#! ", Google will automatically convert the content after 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

It will automatically capture another URL:

Http://twitter.com /? _ Escaped_fragment _ =/Username

With this mechanism, Google can index dynamic Ajax content.

Original article: http://news.cnblogs.com/n/93388/