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");

那麼瀏覽歷為會變成:

頁面並不會重新整理,內容一樣會是 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");

那麼瀏覽歷為會變成:

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

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

popstate 事件

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

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

Last updated