本文也是一篇基礎(chǔ)文章。繼上文之后,本打算去研究pushState,偶然在一些信息中發(fā)現(xiàn)了錨點(diǎn)變化對(duì)瀏覽器的歷史記錄也會(huì)影響,同時(shí)錨點(diǎn)的變化跟pushState也有一些關(guān)聯(lián)。所以就花了點(diǎn)時(shí)間,把這兩個(gè)東西盡量都琢磨清楚。本文記錄相關(guān)的一些要點(diǎn)及研究過程。
1. hashchange
這個(gè)部分的內(nèi)容也已經(jīng)補(bǔ)充到上文的最后了,這里只是細(xì)化一下??偟慕Y(jié)論是:如果一個(gè)網(wǎng)頁只是錨點(diǎn),也就是location.hash發(fā)生變化,也會(huì)導(dǎo)致歷史記錄棧的變化;且變化相關(guān)的所有特性,都與上文描述的整個(gè)頁面變化的特性相同。常見的改變網(wǎng)頁錨點(diǎn)的方式有:
1)直接更改瀏覽器地址,在最后面增加或改變#hash;
2)通過改變location.href或location.hash的值;
3)通過觸發(fā)點(diǎn)擊帶錨點(diǎn)的鏈接;
4)瀏覽器前進(jìn)后退可能導(dǎo)致hash的變化,前提是兩個(gè)網(wǎng)頁地址中的hash值不同。
假如我們還用上文的demo來測(cè)試,并按照以下步驟操作的話:
打開新選項(xiàng)卡;輸入demo1.html;在地址欄后面加#1;將地址欄#1改成#2;將地址欄#2改成#3;將地址欄#3改成#1。
那么歷史記錄棧的存儲(chǔ)狀態(tài)就應(yīng)該類似下面這個(gè)形式:
由于錨點(diǎn)變化也會(huì)在歷史記錄棧添加新的記錄,所以history.length也會(huì)在錨點(diǎn)變化之后改變。每當(dāng)錨點(diǎn)發(fā)生變化的時(shí)候,主流瀏覽器還會(huì)觸發(fā)window對(duì)象的onhashchange事件,在這個(gè)事件回調(diào)里面,我們通過事件對(duì)象和location能夠拿到很有用三個(gè)參數(shù):