一、hash、hashchange 事件介紹

1、hash 是什么？

hash 屬性是一個(gè)可讀可寫(xiě)的字符串，該字符串是 URL 的錨部分，一般有當(dāng)前頁(yè)面中 href 中 # 地址觸發(fā)。hash 即 URL 中 # 字符后面的部分，具有如下特點(diǎn)：

• 使用瀏覽器訪問(wèn)網(wǎng)頁(yè)時(shí)，如果網(wǎng)頁(yè)URL中帶有hash，頁(yè)面就會(huì)定位到 id（或name）與hash值一樣的元素的位置；
• hash 還有另一個(gè)特點(diǎn)，它的改變不會(huì)導(dǎo)致頁(yè)面重新加載；
• hash 值瀏覽器是不會(huì)隨請(qǐng)求發(fā)送到服務(wù)器端的；
• 通過(guò) window.location.hash 屬性獲取和設(shè)置 hash 值。

window.location.hash 值的變化會(huì)直接反應(yīng)到瀏覽器地址欄（#后面的部分會(huì)發(fā)生變化），同時(shí)，瀏覽器地址欄 hash 值的變化也會(huì)觸發(fā) window.location.hash 值的變化，從而觸發(fā) onhashchange 事件。

2、hashchange 事件

• 當(dāng)URL的片段標(biāo)識(shí)符更改時(shí)，將觸發(fā)hashchange事件（跟在#符號(hào)后面的URL部分，包括#符號(hào)）
• hashchange事件觸發(fā)時(shí)，事件對(duì)象會(huì)有hash改變前的URL（oldURL）和hash改變后的URL（newURL）兩個(gè)屬性

window.addEventListener('hashchange', function(e) {
    console.log(e.oldURL);
    console.log(e.newURL)
}, false);

二、實(shí)際應(yīng)用場(chǎng)景

1、hash 的簡(jiǎn)單應(yīng)用

頁(yè)面中有 3 個(gè)不同的a標(biāo)簽，當(dāng)點(diǎn)擊不同的a時(shí)給filterText賦予不同的值，可利用window.onhashchange事件來(lái)實(shí)現(xiàn)，這樣避免了給每個(gè)a標(biāo)簽分別注冊(cè)事件

<a href="#/" rel="external nofollow" ></a>
<a href="#/active" rel="external nofollow" ></a>
<a href="#/completed" rel="external nofollow" ></a>

//此函數(shù)監(jiān)聽(tīng)hash值的變化，來(lái)給判斷哪個(gè)按鈕被點(diǎn)擊，從而給filterText賦值
let filterText = 'all'
window.onhashchange = function () {
    switch(window.location.hash) {
      case '#/':
        filterText = 'all'
        break
      case '#/active':
        filterText = 'active'
        break
      case '#/completed':
       filterText = 'completed'
    }
}

2、hashchange 事件的應(yīng)用

移動(dòng)端里有這樣一個(gè)功能，點(diǎn)擊小圖時(shí)在當(dāng)前頁(yè)面上展示大圖，這應(yīng)該是很常見(jiàn)的場(chǎng)景：

CSS和Javascript具體怎么實(shí)現(xiàn)的就不再啰嗦了，這里要考慮的問(wèn)題是：當(dāng)進(jìn)入大圖展示狀態(tài)時(shí)，如何返回？這是手機(jī)的頁(yè)面，對(duì)于用慣APP的用戶來(lái)說(shuō)，他很可能會(huì)點(diǎn)擊左下角的返回鍵。然而這是個(gè)瀏覽器，返回就意味著回到上一頁(yè)而不是退出大圖展示狀態(tài)。

下面講解一下如何利用 hashchange 解決這個(gè)問(wèn)題。我們需要了解的是：當(dāng)URL的hash改變時(shí)，雖然頁(yè)面不會(huì)重新加載，但仍然會(huì)被記錄到瀏覽器的歷史記錄中。

也就是說(shuō)，如果依次訪問(wèn) a.html、b.html、b.html#abc，然后點(diǎn)擊后退，此時(shí)會(huì)返回 b.html 而不是 a.html。而且，由于hash改變了，所以會(huì)觸發(fā)hashchange事件。這樣一來(lái)，只要在進(jìn)入大圖展示狀態(tài)時(shí)加上一個(gè)特定的 hash，點(diǎn)擊返回鍵觸發(fā) hashchange 時(shí)退出此狀態(tài)即可。代碼也很簡(jiǎn)單：

// 假設(shè)大圖展示狀態(tài)的hash為imgSlider
window.addEventListener('hashchange', function(e) {
  var re = /#imgSlider$/;
  if ( re.test(e.oldURL) && !re.test(e.newURL) ) {
    // 假設(shè)imgSlider為大圖展示組件對(duì)象
    imgSlider.hide();
  }
}, false);

3、hashChange 巧妙監(jiān)聽(tīng)原生輕應(yīng)用跳轉(zhuǎn)

遇到一個(gè)問(wèn)題，輕應(yīng)用中的頭部是原生的，當(dāng)我們的H5頁(yè)面中有包含類(lèi)似日歷、時(shí)間、彈出選擇等控件，這個(gè)時(shí)候的控件背景覆蓋區(qū)域就在頭部之下了，這意味著點(diǎn)擊頭部的時(shí)候，這些控件不會(huì)隱藏消失，例如返回上一個(gè)頁(yè)面的時(shí)候，日歷等彈出控件就依然堅(jiān)挺不回家，解決辦法就是利用hashchange監(jiān)聽(tīng)頁(yè)面url中hash的改變：

//頁(yè)面初始化中添加hashchange的監(jiān)聽(tīng)
initialize:function(){
    window.addEventListener("hashchange", this.pageHashChange,false);
},

//隱藏
pageHashChange(){
    if(startTimePicker) startTimePicker.hide();
    if(endTimePicker) endTimePicker.hide();
    if(remindPicker) remindPicker.hide();
},

4、一個(gè)小的業(yè)務(wù)場(chǎng)景：當(dāng)用戶進(jìn)入一個(gè)頁(yè)面按手機(jī)系統(tǒng)自帶的返回按鈕時(shí)，彈出一個(gè)挽留框，并阻止用戶跳出這一行為。

解決方案：

（1）在進(jìn)入當(dāng)前頁(yè)面時(shí)，通過(guò)加 hash 或者 pushState(null,null,window.location.href)，在 history 棧中增加一條和當(dāng)前路徑相同的地址

（2）當(dāng)用戶點(diǎn)擊返回時(shí)，會(huì)觸發(fā)window.onhashchange 或 window.onpopstate 事件，讓 hash 或 pushState 行為在用戶要返回時(shí)被監(jiān)聽(tīng)到，此時(shí)彈出挽留框，頁(yè)面還是之前的頁(yè)面沒(méi)有變化。

hashchange和popstate事件觸發(fā)條件

一. hasChange 觸發(fā)條件

hash是URL中#后面那部分，同時(shí)修改hash值不會(huì)引起頁(yè)面的刷新，也不會(huì)向服務(wù)器重新發(fā)送請(qǐng)求。通過(guò)hashchange事件可以監(jiān)聽(tīng)它的變化。改變hash值有以下三種方式：

• 瀏覽器前進(jìn)后退改變URL
• 通過(guò)a標(biāo)簽錨點(diǎn)方式改變URL。
• 通過(guò)window.location.hash改變URL
• 調(diào)用history的back、go、forward方法

不能觸發(fā)事件的方式

• pushState和replaceState

備注：以上三種方式均可以觸發(fā)hashchang事件, pushState和replaceState均不能觸發(fā)hashchang事件

二. popstate觸發(fā)條件

history提供了popstate監(jiān)聽(tīng)事件，但是只有以下兩種情況會(huì)觸發(fā)該事件

• 點(diǎn)擊瀏覽器前進(jìn)后退的按鈕
• 顯示調(diào)用history的back、go、forward方法

不能觸發(fā)事件的方式

• pushState和replaceState
• a標(biāo)簽不能觸發(fā)，因?yàn)榉清^點(diǎn)模式直接跳轉(zhuǎn)了頁(yè)面

以上就是hash特點(diǎn)、hashchange事件介紹及其常見(jiàn)應(yīng)用場(chǎng)景的詳細(xì)內(nèi)容，更多關(guān)于hash特點(diǎn)hashchange事件介紹的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論