3.1 API 及相關說明

用途

透過 window 裡的 history 物件，操控瀏覽器當下分頁的「瀏覽歷程」。

相關屬性

history.length

回傳目前的 session 當中，瀏覽歷程有幾個。例：

點擊 yahoo 官網連結，可隨意瀏覽，然後 cmd + option + i，叫出開發者工具，在 console 中，輸入以下程式：

history.length;

結果可能如下圖，就看目前的瀏覽歷程有幾個：

相關方法

history.back()

回到瀏覽歷程中的前一頁，相當於使用者按瀏覽器的上一頁按鈕。相當於 history.go(-1)。

history.forward()

回到瀏覽歷程中的下一頁，相當於使用者按瀏覽器的下一頁按鈕。相當於 history.go(1)。

history.go()

相對於當前頁面的所在位置，例如 -1 為前一頁，1 為下一頁。 例如 history.go(2) 就是跳到「下一頁」再「下一頁」。

若指定了一個超出範圍的值，此方法就不會有任何效果發生。

history.pushState(stateObject, title, url)

將 url 加進瀏覽歷程。stateObject 及 title 可忽略，有的瀏覽器不支援。

假設目前的瀏覽歷程為(使用者的網址是停留在 c.html )：

瀏覽歷程

如果輸入以下程式：

history.pushState(null, null, "d.html");

那麼瀏覽歷為會變成：

pushState 後的瀏覽歷程

頁面並不會重新整理，內容一樣會是 c.html 網頁的內容，只是網址被改掉，而瀏覽歷程會新增一個是 d.html。

如果這時按下「上一頁」按鈕，會是進到 c.html 的網頁內容。 再按「下一頁」，會是進到 d.html ，但內容會是 c.html 的內容，如果頁面重新整理，會是 d.html 的內容。

history.replaceState(stateObject, title, url)

將目前的瀏覽歷程，修改為 url。stateObject 及 title 可忽略，有的瀏覽器不支援。

假設目前的瀏覽歷程為(使用者的網址是 c.html )：

瀏覽歷程

如果輸入以下程式：

history.replaceState(null, null, "d.html");

那麼瀏覽歷為會變成：

replaceState 後的瀏覽歷程

頁面並不會重新整理，內容一樣會是 c.html 網頁的內容，只是網址被改掉變成 d.html，而原來的瀏覽歷程會變成是一個 d.html。

如果這時按下「上一頁」按鈕，會進到 b.html 的網頁內容。 再按「下一頁」，會進到 d.html 的網頁內容。

popstate 事件

瀏覽歷程當中，是由 history.pushState() 或 history.replaceState() 所建立或影響的歷史記錄，那麼使用者在操控上一頁、下一頁時，就會觸發 popstate 事件，須綁定在 window 上。語法如下：

window.addEventListener("popstate", function(e){
  
});