HTML5實戰與剖析之曆史管理(history對象)

標籤：html5實戰與剖析   html5的曆史管理   html5的history對象   html5   

　　HTML5新添加了對曆史的管理，更新了history對象讓管理曆史狀態更加方便了。在現代Web應用中，使用者可以通過”前進”和”後退”按鈕進行曆史頁面的切換。這讓一些不在新頁面中開啟的新頁面前進後退自如，提高了使用者體驗。

　　通過haschange事件，可以知道URL的參數什麼時候發生了變化，也就是什麼時候該有所反應。通過狀態管理的API，能夠在不載入新頁面的情況下改變瀏覽器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三個參數：1.要存的內容 2.標題(一般寫個空的字串) 3.地址(可選)。小例子如下

　　JavaScript代碼

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

　　執行了history.pushState()方法後，新的狀態資訊就會被加入到曆史狀態棧，而瀏覽器地址欄也會變成新的相對URL。但是，瀏覽器並不會想伺服器發送請求，即使曆史狀態改變之後查新location.href也會返回與地址欄中相同的地址。另外，第二個參數目前還沒有瀏覽器實現，所以完全可以只傳入一個Null 字元串即可，或者一個短標題也可以。第一個參數則應該儘可能提供初始化頁面狀態所需的各種資訊。

　　因為history.pushState()方法會建立新的曆史狀態，所以會發現”後退”按鈕也可以使用了。按下”後退”按鈕，會觸發window對象的popstate事件。Popstate事件的事件對象有一個state屬性，這個屬性就包含著當初以第一個參數傳遞給pushState()的狀態物件。小例子如下

　　JavaScript代碼

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

　　得到了這個狀態的對象後，必須把頁面重設為狀態物件中的資料表示的狀態(因為瀏覽器不會自動為你做這些)。記住，瀏覽器載入的第一個頁面沒有狀態，所以”後退”阿牛返回瀏覽器載入的第一個頁面時，event.state值為null。

　　要更新當前曆史狀態，可以調用replaceState()，傳入的參數與pushState()方法的前兩個參數相同。調用replaceState()不會在曆史狀態棧中建立新狀態，只會重寫目前狀態。小例子如下

　　JavaScript代碼

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

　　在使用HTML5的曆史狀態管理機制的時候，需要確保使用pushState()創造的每一個”假”URL，在Web伺服器上都有一個真的、實際存在的URL與之對應。否則，單機”重新整理”按鈕會導致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>

　　JavaScript代碼

//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對象實現曆史管理

　　HTML代碼

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

　　JavaScript代碼

//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實戰與剖析頻道。感謝大家的支援。