跳至主要内容

[WebAPIs] 瀏覽記錄 Browser History API

History API @ MDN WebAPIs

在歷史紀錄中移動​

keywords: back(), forward(), go()​
/* 回到前後頁 */
window.history.back(); // 回到上一頁
window.history.forward(); // 回到下一頁

/* 移動到特定的歷史紀錄 */
window.history.go(-1); // 回到上一頁，等同於 back
window.history.go(1); // 回到下一頁，等同於 forward
window.history.go(-2); // 回到前兩頁

window.history.length; // 取得目前瀏覽記錄的總數目

加入和修改歷史紀錄​

keywords: history.pushState(), history.replaceState(), window.onpopstate()​

history.pushState()​

/**
 * history.pushState(stateObject, title, url);
 **/
history.pushState(null, null, 'foobar');
  • stateObject：可以直接代入 null。
  • title：目前仍沒有作用，可以直接代入 null。
  • url：欲變更瀏覽器導覽列上的網址，當代入的是**絕對路徑（absolute）時，會整個換掉，但必須要和當前 URL 同一個 origin，因此不能換成其他網域的網址；當代入的是相對路徑（relative）**時，會直接附加在當前 URL 後。另外，只會有更換網址的效果，並不會重新載入此頁面
  • 當使用 history.pushState() 後，若有發送 AJAX 請求，則會 XMLHttpRequest 時 HTTP 標頭中 referrer 的值。referrer 會是在建立 XMLHttpRequest 物件時的當前視窗文件的 URL。

history.replaceState()​

history.replaceState() 的行為和 history.pushState() 非常接近，不同之處在於 replaceState() 會修改當前的歷史記錄，而不是添加一筆新的。但要注意的是，這仍無法避免在全域的瀏覽器歷史記錄上增加一筆新記錄。

事件​

popstate​

window.onpopstate = function(){ ... };

popstate 事件會在每次瀏覽記錄（history）有變成時在 window 上被觸發。o

參考​