詳解window.history
Window.history儲存使用者在一個會話期間的網站訪問記錄,使用者每次訪問一個新的URL即建立一個新的歷史記錄。
history.go()、history.back()、history.forward()
history.back()和history.forward()分別表示向後一頁和向前一頁。
history.go(num)表示向前或向後翻多少頁,num為正數表示向前翻,為負數則向後翻。
History.back()等價於history.go(-1),history.forward()等價於history.go(1)。
執行這三個中的任一方法,觸發瀏覽器的popstate事件,如果只是hash部分發生變化,還可能同時觸發hashchange事件。
修改網站路徑並建立新的歷史記錄
history.pushState(statedata, title, url);
引數URL必須和當前URL同源,否則會報錯。只可以修改URL中路徑、井號之後的片段(即hash)或者URL中問號(?)之後的查詢區段。
每執行一次pushState()用新的URL替換掉當前URL,即位址列URL會變,window.location.href也會變,同時建立一個新的歷史記錄。但執行pushState()永遠不觸發hashchange事件。
引數statedata可以是任何被序列化的資料,這些資料被儲存在使用者硬碟上。但狀態資料有大小限制,比如Firefox只允許640KB字元。
使用pushState()的好處:只改URL的hash部分,window.location使用的是同一個document。
相容性問題
pushState直到IE10才被支援,在早版本的IE中只能通過修改window.location=”#foo”完成,但這樣會觸發hashchange事件。
修改網站路徑但不建立新的歷史記錄
看標題就知道了,replaceState()和pushState()的唯一區別是不建立新的歷史記錄,而是直接修改當前歷史記錄。
history.replaceState(stateData, title, url);
歷史記錄狀態
有兩種方式可以訪問歷史訪問記錄的狀態資訊,history.state返回歷史訪問堆疊最頂端的記錄的狀態;而PopStateEvent.state值有在PopStateEvent事件觸發的時候在事件監聽中才能訪問。
State的預設值在不同瀏覽器可能不同,比如IE10以下預設是undefiend,但IE10和IE11預設是null。HTML5推薦使用nul為預設值。
事件
popstate事件
呼叫history.back()、history.forward()、history.go()等方法,會觸發popstate事件,單純呼叫pushState()或replaceState()不觸發popstate事件。
訪問事件的state屬性可獲取當初pushState()或replaceState()設定的狀態資料。
相關文章
- window.history詳解
- 監聽瀏覽器返回,pushState,popstate 事件,window.history物件瀏覽器事件物件
- http協議/cookie詳解/session詳解HTTP協議CookieSession
- Lombok 註解詳解Lombok
- Java註解詳解Java
- Java 註解詳解Java
- Java註解最全詳解(超級詳細)Java
- HiveQL詳解Hive
- 詳解Inode
- Vuex詳解Vue
- PWA詳解
- 詳解CountDownLatchCountDownLatch
- DiffUtil詳解
- iptables詳解
- TCP詳解TCP
- CDN詳解
- Typescript詳解TypeScript
- Mybatis詳解MyBatis
- Synchronized詳解synchronized
- TLS 詳解TLS
- 詳解bind
- 詳解GOPATHGo
- HTTP 詳解HTTP
- JavaScript this詳解JavaScript
- BT詳解
- nginx 詳解Nginx
- @autowired詳解
- ECharts 詳解Echarts
- DiskBasedCache詳解
- JavaWeb詳解JavaWeb
- IndexedDB詳解Index
- BART詳解
- JDBC詳解JDBC
- Pod詳解
- HugePages詳解
- Service詳解
- Weakmap詳解
- dcokerfile 詳解