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 href="#hash" rel="external nofollow" >点击改变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 class="container">
 <section id="page1" class="page cur">第一页</section>
 <section id="page2" class="page">第二页</section>
 <section id="page3" class="page">第三页</section>
</article>
<nav id="nav" class="bottom-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 < len; i++){
  (function (i) { 
   navLi[i].onclick = function () { //点击nav中的li，改变hash值
    location.hash = 'page' + (i+1);
   }
  })(i);
 }
 location.hash = 'page1'; //每次页面重新加载时都回到page1
 window.onhashchange = function (e) { 
  //当hash变化时，执行hashchange事件，该事件具有oldURL和newURL两个事件属性，分别代表前一个URL和目前的URL
  var oldHash = e.oldURL.split('#')[1]; //取得前一个hash
  var newHash = e.newURL.split('#')[1]; //取得当前hash
  var oldPage = document.getElementById(oldHash);
  var newPage = document.getElementById(newHash);
  oldPage.classList.remove('cur'); //隐藏前一个page
  newPage.classList.add('cur');  //显示当前page
 };
}

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:

/**** 前面代码省略 ****/
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!