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 , and the other is to use id attributes, such as
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;
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.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
