快捷導(dǎo)航

利用JS hash制作單頁Web應(yīng)用的方法詳解

更新時(shí)間：2017年10月10日 09:49:23 作者：璿而不華

這篇文章主要給大家介紹了關(guān)于如何利用JS hash制作單頁Web應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

本文主要給大家介紹了關(guān)于利用JS hash制作單頁Web應(yīng)用的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

一、何為hash

這里要講的hash（也叫哈希），指的是JS中l(wèi)ocation對(duì)象的hash屬性，它返回的是URL中#后所跟的零個(gè)或多個(gè)字符。通常，我們可以通過location.hash的方式獲取哈希值或設(shè)置哈希值。當(dāng)然，我們也可以通過設(shè)置a標(biāo)簽的href屬性來設(shè)置哈希值，當(dāng)用戶點(diǎn)擊該a標(biāo)簽時(shí)即可改變頁面的哈希值。

例如：

/** JS方式 **/
location.hash = 'hash'; //設(shè)置hash，該代碼執(zhí)行后URL后面增加“#hash”字符串
console.log(location.hash); //獲取hash

/** HTML方式 **/
<a href="#hash" rel="external nofollow" >點(diǎn)擊改變hash</a> <!-- 點(diǎn)擊后URL后面增加“#hash”字符串 -->

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

二、hash有何用處

1. 設(shè)置錨鏈接

通過設(shè)置錨鏈接（即為上述HTML方式），可使點(diǎn)擊鏈接后頁面根據(jù)元素id滑動(dòng)到指定位置，即使頁面跳轉(zhuǎn)后也不例外。

2. 實(shí)現(xiàn)單頁應(yīng)用的制作

可以根據(jù)哈希值的變化來使相應(yīng)元素顯示或者隱藏，從而實(shí)現(xiàn)頁面無刷新的單頁切換。

三、何為單頁Web應(yīng)用

單頁Web應(yīng)用（single page web application，SPA），就是只有一張Web頁面的應(yīng)用，是加載單個(gè)HTML 頁面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁面的Web應(yīng)用程序。

以上是百度百科對(duì)單頁應(yīng)用（SPA）的解釋，而使用hash可以非常方便的實(shí)現(xiàn)“頁面”間的切換。

四、如何使用hash制作SPA

簡(jiǎn)單來說，就是先只顯示第一個(gè)page，然后通過改變hash值來切換顯示不同的page，前一個(gè)page隱藏。
這里寫個(gè)簡(jiǎn)單的Demo演示一下吧：

1. 首先寫好HTML結(jié)構(gòu)

<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. 然后為其設(shè)置CSS樣式

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

3. 編寫Javascript，實(shí)現(xiàn)單頁切換

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 () { //點(diǎn)擊nav中的li，改變hash值
    location.hash = 'page' + (i+1);
   }
  })(i);
 }
 location.hash = 'page1'; //每次頁面重新加載時(shí)都回到page1
 window.onhashchange = function (e) { 
  //當(dāng)hash變化時(shí)，執(zhí)行hashchange事件，該事件具有oldURL和newURL兩個(gè)事件屬性，分別代表前一個(gè)URL和目前的URL
  var oldHash = e.oldURL.split('#')[1]; //取得前一個(gè)hash
  var newHash = e.newURL.split('#')[1]; //取得當(dāng)前hash
  var oldPage = document.getElementById(oldHash);
  var newPage = document.getElementById(newHash);
  oldPage.classList.remove('cur'); //隱藏前一個(gè)page
  newPage.classList.add('cur');  //顯示當(dāng)前page
 };
}

這里有幾個(gè)地方需要注意的是，IE并不兼容oldURL和newURL這兩個(gè)屬性，所以該方法有一定的局限性。當(dāng)然，更好的方法是，一開始將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;
};

這里還有一個(gè)地方需要注意，就是classList在IE9及其以下瀏覽器不兼容，最好通過處理className屬性的方式來實(shí)現(xiàn)相同的效果，此處便不再詳述。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，當(dāng)然，hash的作用或許遠(yuǎn)不止這些，以后如有遇到再同大家一起分享。希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。