Detailed explanation of how to use JS hash to create a single-page web application

This article mainly introduces the detailed explanation of the method of using JS hash to create a single-page web application. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Preface

This article mainly introduces to you the relevant content about using JS hash to create single-page web applications. It is shared for your reference and learning. I won’t say much more below, let’s come together. Let’s take a look at the detailed introduction.

1. What is hash

The hash we are going to talk about here (also called hash) refers to the hash of the location object in JS Property, which returns zero or more characters followed by # in the URL. 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 the hash value is changed, the page will not refresh.

2. What is the use of hash

1. Set anchor link

By setting anchor Links (that is, the above-mentioned HTML method) can make the page slide to the specified position according to the element ID after clicking the link, 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 a single page web application. A page application is a web application that loads a single HTML page and dynamically updates that page as the user interacts 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 create a SPA

To put it simply, only the first page is displayed, and then the hash value is changed. Switch to display different pages and hide the previous page.
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 = &#39;page&#39; + (i+1);
   }
  })(i);
 }
 location.hash = &#39;page1&#39;; //每次页面重新加载时都回到page1
 window.onhashchange = function (e) { 
  //当hash变化时，执行hashchange事件，该事件具有oldURL和newURL两个事件属性，分别代表前一个URL和目前的URL
  var oldHash = e.oldURL.split(&#39;#&#39;)[1]; //取得前一个hash
  var newHash = e.newURL.split(&#39;#&#39;)[1]; //取得当前hash
  var oldPage = document.getElementById(oldHash);
  var newPage = document.getElementById(newHash);
  oldPage.classList.remove(&#39;cur&#39;); //隐藏前一个page
  newPage.classList.add(&#39;cur&#39;);  //显示当前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 detailed here.

The above is the detailed content of Detailed explanation of how to use JS hash to create a single-page web application. For more information, please follow other related articles on the PHP Chinese website!