HTML5 API 之 history

HTML5 API 之 history

簡介

能夠操做瀏覽器的歷史記錄，在其中添加項目。配合新增的popstate事件，能夠實如今不刷新頁面的前提下動態的改變瀏覽器地址的Url和頁面內容。

使用

var state = {};
state.name = 'history-1';
window.history.pushState(state,null,'history-1');
state.name = 'history-2';
window.history.pushState(state,null,'history-2');
window.addEventListener('popstate',myfunc,false);
function myfunc(e){
    if(e.state){
        alert(e.state.name);
    }   
}

history.pushState

var state = {};
state.name = 'history-1';
window.history.pushState(state,null,'history-1');

• 首先，咱們建立了一個空對象。這個對象就是咱們傳給pushState方法的第一個參數。它的做用是保存當前頁面的一些信息，當咱們經過前進或者後退按鈕到達這個頁面的時候，能夠訪問這個對象中保存的信息。在上面的栗子中，咱們訪問的是的它的name屬性。
• pushState的第二個參數，用來設置頁面的標題，可是目前好像沒有瀏覽器支持，因此咱們傳入一個null。
• 第三個參數，是咱們但願在地址欄中顯示的url後面附加的字符串，這樣，咱們能夠清晰的看到頁面url的變化。
• 這樣，一條歷史記錄就被咱們添加了。

popstate

window.addEventListener('popstate',myfunc,false);

當瀏覽器前進或者後退的時候觸發

• popstate是HTML5種新增的事件。當點擊瀏覽器的前進或者後退時，觸發改事件。該事件的默認參數是一個PopStateEvent對象。該對象中有一個state屬性，包含歷史記錄中一個頁面保存的信息。結合本文的例子來看，保存的就是咱們建立的state對象。

• 那麼，咱們就試着去訪問一個這個對象，看看其中是否真的包含咱們存進去的state對象的信息。

  function myfunc(e){
      if(e.state){
          alert(e.state.name);
      }   
  }

• 點擊後退，屏幕彈框顯示

  history-1

• 總結：HTML5 的historyAPI能夠方便的控制頁面的歷史記錄，讓咱們有了在單頁面中實現前進後退動做的更好方式。結合pushState方法的第一個參數，讓咱們構建單頁面應用更加的心應手。