本文也是一篇基礎(chǔ)文章。繼上文之后,本打算去研究pushState,偶然在一些信息中發(fā)現(xiàn)了錨點變化對瀏覽器的歷史記錄也會影響,同時錨點的變化跟pushState也有一些關(guān)聯(lián)。所以就花了點時間,把這兩個東西盡量都琢磨清楚。本文記錄相關(guān)的一些要點及研究過程。

1. hashchange

這個部分的內(nèi)容也已經(jīng)補充到上文的最后了,這里只是細(xì)化一下??偟慕Y(jié)論是:如果一個網(wǎng)頁只是錨點,也就是location.hash發(fā)生變化,也會導(dǎo)致歷史記錄棧的變化;且變化相關(guān)的所有特性,都與上文描述的整個頁面變化的特性相同。常見的改變網(wǎng)頁錨點的方式有:

1)直接更改瀏覽器地址,在最后面增加或改變#hash; 
2)通過改變location.href或location.hash的值; 
3)通過觸發(fā)點擊帶錨點的鏈接; 
4)瀏覽器前進后退可能導(dǎo)致hash的變化,前提是兩個網(wǎng)頁地址中的hash值不同。

假如我們還用上文的demo來測試,并按照以下步驟操作的話: 
打開新選項卡;輸入demo1.html;在地址欄后面加#1;將地址欄#1改成#2;將地址欄#2改成#3;將地址欄#3改成#1。 
那么歷史記錄棧的存儲狀態(tài)就應(yīng)該類似下面這個形式:

image

由于錨點變化也會在歷史記錄棧添加新的記錄,所以history.length也會在錨點變化之后改變。每當(dāng)錨點發(fā)生變化的時候,主流瀏覽器還會觸發(fā)window對象的onhashchange事件,在這個事件回調(diào)里面,我們通過事件對象和location能夠拿到很有用三個參數(shù):