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

1. hashchange

這個部分的內容也已經補充到上文的最后了,這里只是細化一下。總的結論是:如果一個網頁只是錨點,也就是location.hash發(fā)生變化,也會導致歷史記錄棧的變化;且變化相關的所有特性,都與上文描述的整個頁面變化的特性相同。常見的改變網頁錨點的方式有:

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

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

image

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

網友評論