首頁 > web前端 > js教程 > js中的window.history的用法(一)

js中的window.history的用法(一)

零下一度
發布: 2017-05-18 10:51:12
原創
3917 人瀏覽過

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預設是nullHTML5建議使用nul為預設值。

事件

popstate事件

#呼叫history.back()、history.forward()、history.go( )等方法,會觸發popstate事件,單純呼叫pushState()或replaceState()不觸發popstate事件。

存取事件的state屬性可取得當初pushState()或replaceState()設定的狀態資料。

【相關推薦】

1. 特別推薦「php程式設計師工具箱」V0.1版本下載

2. 詳細介紹h5中的history.pushState()使用實例

3. js中的window.history的用法(二)

4. 深入了解h5中history特性--pushState、replaceState

5. h5中History API 對Web應用的影響

以上是js中的window.history的用法(一)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板