利用JS hash製作單頁Web應用的方法詳解

這篇文章主要介紹了利用JS hash製作單頁Web應用的方法詳解，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前言

本文主要為大家介紹了關於利用JS hash製作單頁Web應用的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

一、何為hash

這裡要講的hash（也叫哈希），指的是JS中location物件的hash屬性，它傳回的是URL中#後面所跟的零個或多個字元。通常，我們可以透過location.hash的方式來取得哈希值或設定哈希值。當然，我們也可以透過設定a標籤的href屬性來設定哈希值，當使用者點擊該a標籤時即可改變頁面的哈希值。

例如：

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

#

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

值得注意的是，無論以何種方式改變哈希值，頁面都不會刷新。

二、hash有何用處

#1. 設定錨定連結

#透過設定錨連結（即為上述HTML方式），可使點擊連結後頁面根據元素id滑動到指定位置，即使頁面跳轉後也不例外。

2. 實作單頁應用的製作

可以根據雜湊值的變化來使對應元素顯示或隱藏，從而實現頁面無刷新的單頁切換。

三、何為單頁Web應用

#單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用，是載入單一HTML 頁面並在使用者與應用程式互動時動態更新該頁面的網路應用程式。

以上是百度百科對單頁應用（SPA）的解釋，而使用hash可以非常方便的實現「頁面」間的切換。

四、如何使用hash製作SPA

#簡單來說，就是先只顯示第一個page，然後再透過改變hash值來切換顯示不同的page，前一個page隱藏。
這裡寫個簡單的Demo示範一下吧：

1. 先寫好HTML結構

<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. 然後為其設定CSS樣式

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

#3. 寫Javascript，實作單頁切換

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
 };
}

這裡有幾個地方要注意的是，IE並不相容於oldURL和newURL這兩個屬性，所以該方法有一定的限制。當然，更好的方法是，一開始將hash值用變數存起來當作oldHash，具體方法如下：

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

##這裡還有一個地方要注意，就是classList在IE9及其以下瀏覽器不相容，最好透過處理className屬性的方式來實現相同的效果，此處便不再詳述。

#

以上是利用JS hash製作單頁Web應用的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！