利用JS hash制作單頁(yè)Web應(yīng)用的方法詳解
前言
本文主要給大家介紹了關(guān)于利用JS hash制作單頁(yè)Web應(yīng)用的相關(guān)內(nèi)容,分享出來(lái)供大家參考學(xué)習(xí),下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧。
一、何為hash
這里要講的hash(也叫哈希),指的是JS中l(wèi)ocation對(duì)象的hash屬性,它返回的是URL中#后所跟的零個(gè)或多個(gè)字符。通常,我們可以通過(guò)location.hash的方式獲取哈希值或設(shè)置哈希值。當(dāng)然,我們也可以通過(guò)設(shè)置a標(biāo)簽的href屬性來(lái)設(shè)置哈希值,當(dāng)用戶(hù)點(diǎn)擊該a標(biāo)簽時(shí)即可改變頁(yè)面的哈希值。
例如:
/** 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”字符串 -->
值得注意的是,無(wú)論以何種方式改變哈希值,頁(yè)面都不會(huì)刷新。
二、hash有何用處
1. 設(shè)置錨鏈接
通過(guò)設(shè)置錨鏈接(即為上述HTML方式),可使點(diǎn)擊鏈接后頁(yè)面根據(jù)元素id滑動(dòng)到指定位置,即使頁(yè)面跳轉(zhuǎn)后也不例外。
2. 實(shí)現(xiàn)單頁(yè)應(yīng)用的制作
可以根據(jù)哈希值的變化來(lái)使相應(yīng)元素顯示或者隱藏,從而實(shí)現(xiàn)頁(yè)面無(wú)刷新的單頁(yè)切換。
三、何為單頁(yè)Web應(yīng)用
單頁(yè)Web應(yīng)用(single page web application,SPA),就是只有一張Web頁(yè)面的應(yīng)用,是加載單個(gè)HTML 頁(yè)面并在用戶(hù)與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。
以上是百度百科對(duì)單頁(yè)應(yīng)用(SPA)的解釋?zhuān)褂胔ash可以非常方便的實(shí)現(xiàn)“頁(yè)面”間的切換。
四、如何使用hash制作SPA
簡(jiǎn)單來(lái)說(shuō),就是先只顯示第一個(gè)page,然后通過(guò)改變hash值來(lái)切換顯示不同的page,前一個(gè)page隱藏。
這里寫(xiě)個(gè)簡(jiǎn)單的Demo演示一下吧:
1. 首先寫(xiě)好HTML結(jié)構(gòu)
<article class="container"> <section id="page1" class="page cur">第一頁(yè)</section> <section id="page2" class="page">第二頁(yè)</section> <section id="page3" class="page">第三頁(yè)</section> </article> <nav id="nav" class="bottom-nav"> <ul> <li>第一頁(yè)</li> <li>第二頁(yè)</li> <li>第三頁(yè)</li> </ul> </nav>
2. 然后為其設(shè)置CSS樣式
.page{ display: none; /* 其他樣式省略 */} .page.cur{ display: block;} /* 其他樣式省略 */
3. 編寫(xiě)Javascript,實(shí)現(xiàn)單頁(yè)切換
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'; //每次頁(yè)面重新加載時(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)然,更好的方法是,一開(kāi)始將hash值用變量存起來(lái)作為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及其以下瀏覽器不兼容,最好通過(guò)處理className屬性的方式來(lái)實(shí)現(xiàn)相同的效果,此處便不再詳述。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,當(dāng)然,hash的作用或許遠(yuǎn)不止這些,以后如有遇到再同大家一起分享。希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JavaScript中變量提升和函數(shù)提升實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升和函數(shù)提升的相關(guān)資料,以及JS變量提升和函數(shù)提升的順序,文中給出了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07js中script的上下放置區(qū)別,Dom的增刪改創(chuàng)建操作實(shí)例分析
這篇文章主要介紹了js中script的上下放置區(qū)別,Dom的增刪改創(chuàng)建操作,結(jié)合實(shí)例形式分析了JavaScript基本dom事件、script在head和body中放置的區(qū)別、以及Dom的增刪改創(chuàng)建等相關(guān)操作技巧,需要的朋友可以參考下2019-12-12基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
本篇文章是對(duì)構(gòu)造函數(shù)與原型鏈混合方式的使用進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05JavaScript運(yùn)動(dòng)框架 鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)(五)
這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動(dòng)框架的第五部分,鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05js+div實(shí)現(xiàn)圖片滾動(dòng)效果代碼
本篇文章主要是對(duì)js+div實(shí)現(xiàn)圖片滾動(dòng)效果的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02用js實(shí)現(xiàn)before和after偽類(lèi)的樣式修改的示例代碼
本篇文章主要介紹了用js實(shí)現(xiàn)before和after偽類(lèi)的樣式修改的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤(pán)
這篇文章主要介紹了bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤(pán)的方法,需要的朋友可以參考下2017-05-05