window.location.hash knowledge summary

location is a built-in object in javascript to manage the address bar. For example, location. href manages the page url. location. href=url can redirect the page to url directly. location.hash, on the other hand, can be used to get or set the tag value of the page. http://domain/#admin's location. hash="#admin". You can do one very meaningful thing with this property value.

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,

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

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,

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

The actual request the browser makes is this:

GET/index html HTTP / 1.1

Host: www.example.com

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:

http://www.example.com/? color=#fff

However, the actual request the browser makes is:

GET /? color = HTTP / 1.1

Host: www.example.com

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:

http://example.com/? color=%23fff

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.

For instance,

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

to

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

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:

http://twitter.com/#! /username

Will automatically grab another URL:

http://twitter.com/? _escaped_fragment_=/username

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

<html> 
<head> 
<script type="text/javascript"> 
// It gets called every time I click test() It will change url The value of the  
var i=0; 
function test(){   
  window.location.hash=i; 
  i++;   
} 
</script> 
</head> 
<body> 
<input type="submit" value="xxxxxxxxxxxxx" onclick="test()"/> 
</body> 
</html> 

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.

Specific implementation:

<body>
  <div id="div1"></div>
  <input type="button" value="click" onclick="GetT()" /> 
</body>
</html>
<script type="text/javascript" src="js/AjaxHasPool.js">
</script>
<script type="text/javascript">
var ajax = new AjaxHasPool();
var method="get";
var url ="Handler.ashx";
var i = 1;
var obj = new Object();
function GetT()
{
  document.getElementById("div1").innerHTML=i; 
  ajax.Startup(null,url,method,ep);
}
function ep(xmlobj){
  eval("obj['"+i+"']="+i+";");
  location.hash="#"+i;
++i; 
}
window.onhashchange=function(){
var hashStr = location.hash.replace("#","");
if(typeof(eval("obj['"+hashStr+"']"))!="undefined") 
     document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']"); 
}
</script>

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.