PJCHENder 未整理筆記

[WebAPIs] 瀏覽記錄 Browser History API

2018-08-01

[WebAPIs] 瀏覽記錄 Browser History API

@(JavaScript)[JavaScript, WebAPIs]

History API @ MDN WebAPIs

在歷史紀錄中移動

keywords: back(), forward(), go()
1
2
3
4
5
6
7
8
9
10
/* 回到前後頁 */
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()

1
2
3
4
/**
* 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

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

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

參考

Tags: WebAPIs

掃描二維條碼,分享此文章