window.location.hash knowledge summary_basic knowledge

Location is a built-in object in JavaScript that manages the address bar. For example, location.href manages the URL of the page. Using location.href=url, you can directly redirect the page to the URL. Location.hash can be used to get or set the tag value of the page. For example, location.hash="#admin" of http://domain/#admin. A very meaningful thing can be done using this attribute value.

window.location.hash simple application

1. The meaning of #

# represents a position in the web page. The character to the right is the identifier of the position. For example,

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

represents the print position of the web page index.html. After the browser reads this URL, it will automatically scroll the print position to the visible area.

Specify an identifier for the web page location. There are two methods. One is to use anchor points, such as 199509608094b4e81d651d148e35972c5db79b134e9f6b82c0b36e0489ee08ed, and the other is to use id attributes, such as 0e6856c47f8d911f7b1a7865abfc662c.

2. HTTP request does not include #

# is used to guide browser actions and is 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 sent by the browser is like this:

　GET /index.html HTTP/1.1

Host: www.example.com

As you can see, it is only requesting index.html, and there is no "#print" part at all.

3. Characters after #

Any characters that appear 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 original intention of the following URL is to specify a color value:

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

However, the actual request made by the browser is:

　GET /?color= HTTP/1.1

Host: www.example.com

As you can see, "#fff" is omitted. Only when # is transcoded into # will the browser treat it as a literal character. In other words, the above URL should be written as:

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

4. Change # without triggering web page reload

Just change the part after #, the browser will only scroll to the corresponding position and will not reload the web page.

For example, from

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

changed to

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

The browser will not re-request index.html from the server.

5. Changing # will change the browser’s access history

Every time you change the # part, a record will be added to the browser's access history. Use the "Back" button to return to the previous position.

This is especially useful for ajax applications. Different # values ​​can be used to represent different access states, and then the user can be given a link to access a certain state.

It is worth noting that the above rules do not hold for IE 6 and IE 7, they will not increase the history due to the change of #.

6. window.location.hash reads # value

The property window.location.hash is readable and writable. When reading, it can be used to determine whether the status of the web page has changed; when writing, an access history record will be created without reloading the web page.

7. onhashchange event

This is a new event in HTML 5. When the # value changes, this event will be triggered. IE8, Firefox 3.6, Chrome 5, and Safari 4.0 support this event.

There are three ways to use it:

　window.onhashchange = func;

　ff8b939e37f4cd951197bd4ad61700f2

window.addEventListener("hashchange", func, false);

For browsers that do not support onhashchange, you can use setInterval to monitor changes in location.hash.

8. The mechanism of Google crawling #

By default, Google's web spiders ignore the # part of the URL.

However, Google also stipulates that if you want the content generated by Ajax to be read by the browsing engine, you can use "#!" in the URL, and Google will automatically convert the content following it into the value of the query string _escaped_fragment_ .

For example, Google found that the URL of the new version of twitter is as follows:

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

will automatically crawl another URL:

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

Through this mechanism, Google can index dynamic Ajax content.

Let’s look at some netizens who encountered such a problem. As shown in the following code, every time you click a button on the page, the value in the browser address bar will be changed. In this way, you can deceive the browser (without sending any information to the browser). The server sends a new request), making its "back" and "forward" buttons available.

The current problem is that the browser values ​​​​have changed under ie6 and ff3, but only "forward" and "backward" can be used under ff3. Under ie, these two are gray and unavailable. Please tell me. Why?

The code is as follows

<html> 
<head> 
<script type="text/javascript"> 
//每次点击都会调用test()，它会改变url的值 
var i=0; 
function test(){   
  window.location.hash=i; 
  i++;   
} 
</script> 
</head> 
<body> 
<input type="submit" value="xxxxxxxxxxxxx" onclick="test()"/> 
</body> 
</html> 

The following is about the use of hash combined with ajax. Every time ajax retrieves data, the browser does not generate a history record after the page is updated. This means that the back and forward buttons lose their utility. In this case, hash and window can be combined. Use onhashchange. Note that ie6 and 7 do not support onhashchange, but you can use setInterval to check hash changes regularly, or check in onload.

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 its own encapsulated ajax class, in which ajax.Startup() is to send an ajax request;
2. The Object object saves historical records. If the object attribute is a number, it must be instantiated using obj["1"], otherwise it will violate the naming convention.
3. Use window.onhashchange to detect the hash value and obtain historical data.