Home > Developer > JavaScript
Window. location. hash knowledge summary, window. location. hash
Location is the built-in object for managing the address bar in javascript. For example, location. href manages the url of the page and uses location. href = url to directly redirect the page url. Location. hash can be used to obtain or set the tag value of the page. For example, http: // domain/# admin's location. hash = "# admin ". This attribute value can be used to do a very meaningful thing.
Window. location. hash simple application
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.html HTTP/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 = https/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.
Let's take a look at some netizens who have encountered such a problem, as shown in the following code. Every time you click a button on the page, the value in the browser's address bar will be changed, in this way, the browser can be spoofed (and no new request is sent to the server), so that its "back" and "Forward" buttons can be used.
The problem is that the browser values in ie6 + and ff3 have changed, but they can only be used to "Forward" and "backward" in ff3, in ie, both are gray and unavailable. Why?
The Code is as follows:
<Html>The following describes how to use hash in combination with ajax. Each time ajax retrieves data, the browser does not generate a historical record after the page is updated. That is to say, the backend and Forward buttons lose the utility of the application, in this case, we can combine hash and window. onhashchange is used. Note that ie6 and 7 do not support onhashchange, but you can use setInterval to regularly check hash changes or onload check methods.
Specific implementation:
<body> <div id="div1"></div> <input type="button" value="click" onclick="GetT()" /> </body>1. AjaxHasPool is a self-encapsulated ajax class, where ajax. Startup () is used to send ajax requests;
2. The Object stores historical records. If the Object attribute is a number, it must be instantiated using obj ["1"]. Otherwise, the Object will violate the naming rules.
3. Use window. onhashchange to check the hash value to obtain historical data.
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
