Html5 History API解析

白牙青森發表於2015-04-16
HTMLAPI

瀏覽器前進與回退操作

在傳統的瀏覽器中我們只能通過呼叫window.history物件的 forward() 、 back() 或 go(number|url) 方法來進行頁面的前進、回退或跳轉到某一頁面。

而Ajax技術出現出現後我們常常用來實現頁面無重新整理的區域性渲染效果，但卻無法對無重新整理的頁面進行前進和後退的操作。

顯然，HTML 5標準制定者也考慮到這一點，於是在HTML 5中為history物件新增了 pushState() 、 replaceState() 介面以及state屬性

state屬性

state屬性的值為物件（預設值為null），該值由使用者通過pushState()方法傳入，用於記錄與改條歷史記錄相關的頁面資料資訊

pushState(state, title, url)

pushState()方法包含三個引數：

  • state： 使用者為該條歷史記錄寫入的資料物件來儲存頁面相關資料資訊
  • title：頁面標題
  • url：頁面url

在HTML 5中，我們使用history.pushState()會往history中寫入一條歷史記錄，history.length的值也會+1，history.state被傳入的state物件覆蓋。

replaceState(state, title, url)

replaceState()方法的三個引數和pushState()相同，但replaceState()用於修改當前頁的歷史記錄。

如何使用state物件？

HTML5除了帶給我們以上三個新增的介面以外，還允許瀏覽器在window上監聽popState事件，每當對頁面進行前進或後退的操作時，瀏覽器會從歷史記錄中取出state物件並通過引數傳入popState事件的回撥函式中：

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 使用state做點事情
    */                                            
});

這部分的API比較少，也沒什麼好講的，權當做個記錄，END

 

相關文章