history物件

大豬熬藥發表於2019-02-16
物件

基本概念

history介面允許操作瀏覽器的曾經在標籤頁或者框架裡訪問的會話歷史記錄。

屬性

  • history.length
  • history.state
  • history.scrollRestoration

方法

  • history.back()
  • history.forward()
  • history.go()
  • history.pushState()
  • history.replaceState()

history更多屬性和方法，請參考MDN連結

history.pushState();

按指定的名稱和URL將資料push進會話歷史棧橋。
history.pushState()方法接收三個引數，依次為:

  1. state: 一個與指定網址相關的狀態物件，poststate事件觸發時，該物件會傳入回撥函式。如果不需要這個物件，此處可以填null.
  2. title: 新頁面的標題，但是所有瀏覽器目前都會忽略這個值，因此這裡可以填null.
  3. url: 新的網址，必須與當前頁面處在同一個域。瀏覽器的位址列將顯示這個網址。

注意事項

引數中url必須和當前頁面處在同一個域下，否則會報錯。
例如，我在當前index.html中使用該方法，url引數為”https://www.baidu.com”.會出現下面的報錯資訊。
圖片描述

呼叫了pushState以後，瀏覽器位址列會跟隨者發生變化，但是頁面並不會重新整理，只是在路由棧裡面增加了一條記錄。
隨後點選瀏覽器前進後退箭頭，位址列會有變化，頁面不會重新整理。但是如果在當前瀏覽器位址列重新輸入一個地址，然後又返回就會重新整理一次地址。舉例如下：

當前頁面是page1.html,呼叫pushState(null, null, `page2.html`)方法以後,頁面地址變為page2.html.然而頁面顯示的內容依舊是page1.html的內容。此時刪掉瀏覽器位址列引數，改為`https://www.baidu.com`並回車訪問，去到百度頁面的時候，然後再點選瀏覽器返回箭頭，將顯示page2.html頁面內容。
當然，上面在位址列重新輸入一個地址的操作，可以改為任何可以重新整理當前頁面的操作。比如，window.location.href或者window.location.reload()等等

history.replaceState()

history.replaceState方法的引數和pushState()方法一模一樣，區別是它修改瀏覽歷史中當前記錄。

history.state

當前頁面的state物件，即pushState()方法中第一個引數的值。

popstate事件

每當同一個文件的瀏覽歷史出現變化時，就會觸發popstate事件。
需要注意的是，僅僅呼叫pushState方法或replaceState方法，並不會觸發該事件，只有使用者點選瀏覽器倒退按鈕或前進按鈕，或者使用JavaScript呼叫back,forward,go方法時才會觸發。

使用的時候可以為popstate事件指定回撥函式。

window.addEventListener(`popstate`, function(event) {
  console.log(`location: ` + document.location);
  console.log(`state: ` + JSON.stringify(event.state));
});

應用

我們知道，Ajax可以實現頁面無重新整理操作。但是，也會造成另外的問題，即無法前進與後退。
當執行Ajax操作的時候，往瀏覽器history中塞入一個地址（使用pushState）;於是，返回的時候，通過URL或其他傳參，我們就可以還原到Ajax之前的模樣。

相關文章