操縱瀏覽器歷史記錄 : popstate() 、 history.pushState() 、 window.history.pushState（）

微風--輕許--發表於2018-11-19
瀏覽器

一、歷史記錄前進與後退

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) {
  //做一些操作
});

 

轉自：https://www.cnblogs.com/xieyaoming/p/5789630.html

相關文章