一、hash、hashchange 事件介紹

1、hash 是什么？

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

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

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

2、hashchange 事件

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

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

二、實際應(yīng)用場景

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

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

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

//此函數(shù)監(jiān)聽hash值的變化，來給判斷哪個按鈕被點擊，從而給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)前頁面上展示大圖，這應(yīng)該是很常見的場景：

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

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

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

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

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

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

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

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

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

解決方案：

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

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

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

一. hasChange 觸發(fā)條件

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

• 瀏覽器前進后退改變URL
• 通過a標(biāo)簽錨點方式改變URL。
• 通過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)聽事件，但是只有以下兩種情況會觸發(fā)該事件

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

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

• pushState和replaceState
• a標(biāo)簽不能觸發(fā)，因為非錨點模式直接跳轉(zhuǎn)了頁面

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