Sharing examples of making single-page web applications using JS hash

In this article, we will first explain what hash is, what role it has, and what a single-page web application is. Later, we will introduce an example of making a single-page web application using JS hash. I hope it can help everyone.

1. What is hash

The hash (also called hash) we are going to talk about here refers to the hash attribute of the location object in JS, which returns the # in the URL. followed by zero or more characters. Usually, we can get the hash value or set the hash value through location.hash. Of course, we can also set the hash value by setting the href attribute of the a tag. When the user clicks the a tag, the hash value of the page can be changed.

For example:

/** JS方式 **/
location.hash = 'hash'; //设置hash，该代码执行后URL后面增加“#hash”字符串
console.log(location.hash); //获取hash

/** HTML方式 **/
<a>点击改变hash</a> <!-- 点击后URL后面增加“#hash”字符串 -->

It is worth noting that no matter how you change the hash value, the page will not refresh.

2. What is the use of hash

1. Set anchor link

By setting anchor link (that is, the above HTML method), the page can be based on the element id after clicking the link Swipe to the specified position, even after the page jumps.

2. Implement the production of single-page applications

The corresponding elements can be displayed or hidden according to changes in hash values, thereby achieving single-page switching without page refresh.

3. What is a single page web application?

A single page web application (SPA) is an application with only one web page. It loads a single HTML page and displays it on the user A web application that dynamically updates the page when you interact with the application.

The above is Baidu Encyclopedia's explanation of Single Page Application (SPA), and using hash can very conveniently achieve switching between "pages".

4. How to use hash to make SPA

To put it simply, only the first page is displayed, and then the different pages are switched to display by changing the hash value, and the previous page is hidden.
Write a simple Demo here:

1. First write the HTML structure

<article>
 <section>第一页</section>
 <section>第二页</section>
 <section>第三页</section>
</article>
<nav>
 <ul>
  <li>第一页</li>
  <li>第二页</li>
  <li>第三页</li>
 </ul>
</nav>

2. Then set the CSS style for it

.page{ display: none; /* 其他样式省略 */}
.page.cur{ display: block;}
/* 其他样式省略 */

3. Write Javascript to achieve single page switching

window.onload = function () {
 var nav = document.getElementById('nav');
 var navLi = nav.getElementsByTagName('li');
 for(var i = 0,len = navLi.length; i <p>There are a few things to note here. IE is not compatible with the two attributes oldURL and newURL, so this method has certain limitations. Of course, a better way is to initially store the hash value in a variable as oldHash. The specific method is as follows: </p><pre class="brush:php;toolbar:false">/**** 前面代码省略 ****/
location.hash = 'page1';
var oldHash = location.hash;
window.onhashchange = function (e) {
 var newHash = location.hash;
 var oldPage = document.querySelector(oldHash);
 var newPage = document.querySelector(newHash);
 oldPage.classList.remove('cur');
 newPage.classList.add('cur');
 oldHash = newHash;
};

There is another thing to note here, that is, classList is not compatible with IE9 and below browsers. , it is best to achieve the same effect by processing the className attribute, which will not be described in detail here.

Related recommendations:

Programmer’s Advanced Chapter - The Temperament of the Hash Table

php hash encryption function sample code

The difference between MySQL’s btree and hash indexes

The above is the detailed content of Sharing examples of making single-page web applications using JS hash. For more information, please follow other related articles on the PHP Chinese website!