window.location.hash knowledge summary
- 2020-10-23 20:51:31
window. location. hash simple application
The meaning of #
# represents 1 location in the page. The character to the right is the identifier for that position. For instance,
Represents the print location of the page ES38en.html. When the browser reads the URL, it automatically scrolls the print position into the visual area.
There are two ways to specify an identifier for a web page location. One is to use the anchor point, for example < a name="print" > < /a > , 2 is using the id attribute, for example < div id="print" > .
2. HTTP request does not include #
# is used to guide browser actions and is completely useless on the server side. Therefore, the # is not included in the HTTP request.
For example, visit the following website,
The actual request the browser makes is this:
GET/index html HTTP / 1.1
As you can see, just request index.html, with no "#print" section at all.
3. Character after #
Any character that appears after the first # is interpreted by the browser as a position identifier. This means that none of these characters will be sent to the server.
For example, the following URL is intended to specify 1 color value:
However, the actual request the browser makes is:
GET /? color = HTTP / 1.1
As you can see, the "#fff" has been omitted. Only by transcoding # to %23 will the browser treat it as a literal character. In other words, the url should be written as:
4. Change # does not trigger web page reloads
By simply changing the #, the browser will only scroll to the appropriate location, not reload the page.
The browser does not rerequest ES157en.html from the server.
5. Changing # changes the browser's access history
Every time you change #, you add a record to the browser's access history. Using the back button, you can go back to the previous position.
This is particularly useful for ajax applications, where you can indicate different access states with different # values, and then give the user a link to access a state.
It is worth noting that the above rules do not hold for IE 6 and IE 7, and they do not add to the historical record due to changes in #.
6. window. location. hash read # value
window. location. hash this property is readable and writable. When reading, it can be used to determine whether the state of the web page has changed; When it is written, it will create 1 access history without reloading the page.
7. onhashchange events
This is a new event added to HTML 5, which is triggered when the # value changes. IE8+, Firefox 3.6+, Chrome 5+, Safari 4.0+ support this event.
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 changes to ES213en.hash.
8. Google grab # mechanism
By default, Google's web spiders ignore the # part of URL.
However, Google also states that if you want the content generated by Ajax to be read by the browsing engine, you can use "#!" in URL , Google will automatically turn the following into the value of the query string _escaped_fragment_.
For example, Google found URL in the new version of twitter as follows:
Will automatically grab another URL:
With this mechanism, Google can index dynamic Ajax content.
As shown in the following code, each click on a button on the page changes the value in the browser's address bar, so that the browser can be tricked (without sending a new request to the server) and its "back" and "Forward" buttons work.
The problem is that the browser values have changed under both ie6+ and ff3, but only under ff3 "forward" and "backward" can be used. Under ie, both of these are grey and not available. Why?
The following code
hash combining ajax use under the following is about 1, ajax after each page updates when you pick up the data browser does not produce history, that is to say, back and forward buttons application utility, then can combine hash and window onhashchange using, pay attention to are support onhashchange ie6, 7, but can use setInterval check hash change regularly, or onload check method.
1.AjaxHasPool is the self-encapsulated ajax class, in which ES289en. Startup() is to send ajax request;
2. The Object object keeps a history. If the object attribute is a number, instantiate it as obj["1"], otherwise it will violate the naming convention.
3. Use ES296en. onhashchange to detect hash value to obtain historical data.