HTML5管理與實際曆史的分析(history物)

　　HTML5新進入曆史的管理，更新history對象允許國家的經營曆史更友善。

在現代Web應用。使用者”前進”和”退卻”button切換曆史頁面。這使得新的頁碼不會打開一個新的網頁前進和後退自如，改善使用者體驗。

　　經haschange事件，可以知道URL的參數什麼時候發生了變化，也就是什麼時候該有所反應。

通過狀态管理的API，可以在不載入新頁面的情況下改變浏覽器的URL。是以須要使用history.pushState()方法。

history.pushState()方法接收三個參數：1.要存的内容 2.标題(一般寫個空的字元串) 3.位址(可選)。小樣例例如以下

　　JavaScript代碼

history.pushState({name: "menglong"}, '', "li.html");      

　　運作了history.pushState()方法後，新的狀态資訊就會被增加到曆史狀态棧，而浏覽器位址欄也會變成新的相對URL。

可是，浏覽器并不會想server發送請求。即使曆史狀态改變之後查新location.href也會傳回與位址欄中同樣的位址。

另外，第二個參數眼下還沒有浏覽器實作，是以全然能夠僅僅傳入一個空字元串就可以，或者一個短标題也能夠。

第一個參數則應該盡可能提供初始化頁面狀态所需的各種資訊。

　　由于history.pushState()方法會建立新的曆史狀态，是以會發現”後退”button也能夠使用了。按下”後退”button，會觸發window對象的popstate事件。Popstate事件的事件對象有一個state屬性，這個屬性就包括着當初以第一個參數傳遞給pushState()的狀态對象。

小樣例例如以下

window.addEventListener('popstate',function(ev){
  var state = event.state;
  if(state){ // 當第一個頁面載入的時候state為空
    processState(state)
  }
}, false);      

　　得到了這個狀态的對象後。必須把頁面重置為狀态對象中的資料表示的狀态(由于浏覽器不會自己主動為你做這些)。記住，浏覽器載入的第一個頁面沒有狀态，是以”後退”阿牛傳回浏覽器載入的第一個頁面時。event.state值為null。

　　要更新目前曆史狀态，能夠調用replaceState()，傳入的參數與pushState()方法的前兩個參數同樣。

調用replaceState()不會在曆史狀态棧中建立新狀态，僅僅會重寫目前狀态。

history.replaveState({name: "meng"}, "meng1234");      

　　在使用HTML5的曆史狀态管理機制的時候。須要確定使用pushState()創造的每個”假”URL。在Webserver上都有一個真的、實際存在的URL與之相應。

否則，單機”重新整理”button會導緻404錯誤。

　　支援HTML5曆史狀态管理的浏覽器有Chrome、Safari 5+、Firefox 4+和Opera 11.5+。在Safari和Chrome中，傳遞給pushState()或replaceState()的狀态對象中不能包括DOM元素。

而Firefox支援在狀态對象中包括DOM元素。Opera還支援一個history.state屬性，它傳回目前狀态的狀态對象。以下就是小樣例時間了，結合小樣例才幹更好的了解HTML5中的曆史管理。

　　加入href值實作曆史管理

　　HTML代碼

<input type="button" value="35選7" id="input1" />
<div id="div1"></div>      

//onhashchange : 事件 : 當hash值改變的時候觸發的事件

//hash改變就會出現就會出現曆史管理

window.onload = function(){
  var oInput = document.getElementById('input1');
  var oDiv = document.getElementById('div1');

  var obj = {};

  oInput.onclick = function(){

    var number = randomNum(35,7);

    oDiv.innerHTML = number;

    var oRN = Math.random();

    obj[oRN] = number;

    window.location.hash = oRN;

  };


  window.onhashchange = function(){

    var number = obj[window.location.hash.substring(1)] || '';

    oDiv.innerHTML = number;

  };


  function randomNum(alls,now){

    var arr = [];
    var newArr = [];

    for(var i=1;i<=alls;i++){
      arr.push(i);
    }


    for(var i=0;i<now;i++){
      newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1 ) );
    }

    return newArr;

  }

};      

　　通過HTML5中history對象實作曆史管理

<input type="button" value="35選7" id="input1" />
<div id="div1"></div>      

//pushState : 三個參數：1.要存的内容 2.标題(一般寫個空的字元串) 3.位址(可選)

//history.pushState({name: "menglong"}, '', "li.html");

window.onload = function(){
  var oInput = document.getElementById('input1');
  var oDiv = document.getElementById('div1');

  var iNow = 0;

  oInput.onclick = function(){

    var number = randomNum(35,7);

    oDiv.innerHTML = number;

    history.pushState(number,'',iNow++);

  };


  window.onpopstate = function(ev){  //曆史管理改變，就會觸發

    var number = ev.state || '';

    oDiv.innerHTML = number;

  };


  function randomNum(alls,now){

    var arr = [];
    var newArr = [];

    for(var i=1;i<=alls;i++){
      arr.push(i);
    }


    for(var i=0;i<now;i++){
      newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1 ) );
    }

    return newArr;

  }

};      

　　HTML5實戰與剖析之曆史管理(history對象)就為大家介紹到這裡了。很多其它有關HTML5的相關小内容盡在夢龍小站的HTML5實戰與剖析頻道。

感謝大家的支援。