操縱瀏覽器歷史記錄--popstate() && history.pushState()


一、歷史記錄前進與后退

1.后退:

window.history.back()--相當於用戶在瀏覽器的工具欄上點擊返回按鈕;

2.前進:

window.history.forward()--相當於用戶在瀏覽器的工具欄上點擊前進按鈕;

3.移動到指定歷史記錄點:

通過go()方法,指定一個相對於當前頁面位置的數值,從當前會話的歷史記錄中加載頁面(當前位置頁面索引:0,上一頁:-1,下一頁:1);

window.history.go(-2)--后退2頁,相當於調用兩次back();

window.history.go(1)--前進1頁,相當於調用forward();

*可以通過window.history.length,得到歷史記錄棧中一共有多少頁。

二、添加/修改歷史記錄條目

1.pushState(stateObject,title,URL):

逐條添加歷史記錄條目,

a.狀態對象(stateObject)--一個JavaScript對象,與用pushState()方法創建的新歷史記錄條目關聯。無論何時用戶導航到新創建的狀態,popstate事件都會被觸發,並且事件對象的state屬性都包含歷史記錄條目的狀態對象的拷貝;(ps:FireFox瀏覽器強行限制狀態對象的大小為640k,超出則拋異常,可通過sessionStorage或localStorage存儲大的數據)

b.標題(title)--傳入一個簡短的標題,標明將要進入的狀態;(FireFox瀏覽器目前會忽略該參數,但是傳一個空字符串會比較安全)

c.地址(URL)--新的歷史記錄條目的地址(可選,不指定的話則為文檔當前URL);瀏覽器不會在調用pushState()方法后加載該地址;傳入的URL與當前URL應該是同源的,否則,pushState()會拋出異常。

*某種意義上,調用pushState()有點類似於設置window.location='#foo',它們都會在當前文檔內創建和激活新的歷史記錄條目。

(拓展:window.location--待研究)

2.replaceState():

history.replaceState()操作類似於history.pushState(),不同之處在於replaceState()方法會修改當前歷史記錄條目而並非創建新的條目。

3.popstate():

每當激活的歷史記錄發生變化時,都會觸發popstate事件。如果被激活的歷史記錄條目是由pushState所創建,或是被replaceState方法影響到的,popstate事件的狀態屬性將包含歷史記錄的狀態對象的一個拷貝。

讀取當前狀態:

如果頁面中使用pushState()或replaceState()方法設置了一個狀態對象,然后用戶重啟了瀏覽器。當頁面重新加載時,頁面會觸發onload事件,但不會觸發popstate事件。可以使用history.state直接讀取當前歷史記錄條目的狀態,而不需要等待popstate事件

調用history.pushState()或者history.replaceState()不會觸發popstate事件.pushState事件只會在其他瀏覽器操作時觸發, 比如點擊后退按鈕(或者在JavaScript中調用history.back()方法)。

調用方法:

window.onpopstate = function(event) {
//做一些操作 event.state;
// 當前歷史記錄條目的狀態 };

    或者:

window.addEventListener('popstate', function(event) {
  //做一些操作
});

(拓展:EventTarget.addEventListener() 方法將指定的事件監聽器注冊到EventTarget上,當該對象觸發指定的事件時,指定的回調函數就會被執行。--EventTarget待研究)

                                                                --資料來源MDN


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM