Preface
This article mainly introduces the relevant content about using JS hash to create single-page web applications. We will share it for your reference and learning. I won’t say much below, let’s take a look at the detailed introduction together.
1. What is hash
The hash (also called hash) we want to talk about here refers to the hash property of the location object in JS. It returns zero or more characters followed by # in the URL. Usually, we can get the hash value or set the hash value in the way. Of course, we can also set the hash value by setting the href property of the a tag, and the hash value of the page can be changed when the user clicks the a tag.
For example:
/** JS method **/ = 'hash'; //set uphash，After the code is executedURLAdded later“#hash" string(); //Gethash
/** HTML method **/ <a href="#hash" rel="external nofollow" >Click to changehash</a> <!-- After clickingURLAdded later“#hash”String -->
It is worth noting that the page will not refresh regardless of the way the hash is changed.
2. What is the use of hash
1. Set up anchor link
By setting the anchor link (that is, the above HTML method), the page can slide to the specified position according to the element id after clicking the link, even if the page jumps.
2. Implement the production of single-page applications
The corresponding elements can be displayed or hidden according to the change of the hash value, thereby realizing single page switching without refresh on the page.
3. What is a single page web application
A single page web application (SPA) is an application with only one web page, which is a web application that loads a single HTML page and updates the page dynamically when the user interacts with the application.
The above is Baidu Encyclopedia's explanation of single page application (SPA), and using hash can easily achieve switching between "pages".
4. How to use hash to create a SPA
Simply put, it is to only display the first page first, and then switch to display different pages by changing the hash value, and the previous page is hidden.
Here is a simple demo:
1. First write the HTML structure
<article class="container"> <section class="page cur">Page 1</section> <section class="page">Page 2</section> <section class="page">Page 3</section> </article> <nav class="bottom-nav"> <ul> <li>Page 1</li> <li>Page 2</li> <li>Page 3</li> </ul> </nav>
2. Then set the CSS style for it
.page{ display: none; /* Other styles omitted */}
.{ display: block;}
/* Other styles omitted */
3. Write Javascript to implement single page switching
= function () {
var nav = ('nav');
var navLi = ('li');
for(var i = 0,len = ; i < len; i++){
(function (i) {
navLi[i].onclick = function () { //Click on li in nav to change hash value = 'page' + (i+1);
}
})(i);
}
= 'page1'; //Return to page1 every time the page reloads = function (e) {
// When the hash changes, execute the hashchange event. The event has two event attributes: oldURL and newURL, representing the previous URL and the current URL, respectively var oldHash = ('#')[1]; //Get the previous hash var newHash = ('#')[1]; //Get the current hash var oldPage = (oldHash);
var newPage = (newHash);
('cur'); //Hide the previous page ('cur'); //Show the current page };
}
There are several places to note here that IE is not compatible with the two attributes of oldURL and newURL, so this method has certain limitations. Of course, a better way is to save the hash value as oldHash at the beginning. The specific method is as follows:
/**** The previous code is omitted ****/
= 'page1';
var oldHash = ;
= function (e) {
var newHash = ;
var oldPage = (oldHash);
var newPage = (newHash);
('cur');
('cur');
oldHash = newHash;
};
There is another point to note here, that is, classList is incompatible in IE9 and below browsers. It is best to achieve the same effect by handling the className attribute. I will not explain in detail here.
Summarize
The above is the entire content of this article. Of course, the function of hash may be far more than this. If you encounter it in the future, I will share it with you. I hope that the content of this article has certain reference value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.