這篇文章主要講解了“如何使用History API”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何使用History API”吧！
創(chuàng)新互聯(lián)為企業(yè)提供：品牌網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃、小程序制作、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)和網(wǎng)站運(yùn)營(yíng)托管，一站式網(wǎng)絡(luò)營(yíng)銷(xiāo)整體服務(wù)。實(shí)現(xiàn)不斷獲取潛在客戶(hù)之核心目標(biāo)，建立了企業(yè)專(zhuān)屬的“營(yíng)銷(xiāo)型網(wǎng)站”，就用不著再為了獲取潛在客戶(hù)而苦惱，相反，客戶(hù)會(huì)主動(dòng)找您，生意就找上門(mén)來(lái)了！
一，開(kāi)篇分析
為了提高Web頁(yè)面的響應(yīng)速度，越來(lái)越多的開(kāi)發(fā)者開(kāi)始采用單頁(yè)面結(jié)構(gòu)（single-page application）的解決方案。所謂的單頁(yè)面結(jié)構(gòu)就是指多個(gè)頁(yè)面間切換時(shí)，不刷新當(dāng)前整個(gè)頁(yè)面，更新頁(yè)面展示數(shù)據(jù)，并且相應(yīng)地改變地址欄中的url，以使用戶(hù)可以分享這個(gè)url。
如果你使用chrome或者firefox等瀏覽器訪(fǎng)問(wèn)"github.com、plus.google.com"等網(wǎng)站時(shí)，細(xì)心的你會(huì)發(fā)現(xiàn)頁(yè)面之間的點(diǎn)擊是通過(guò)ajax異步請(qǐng)求的，
同時(shí)頁(yè)面的URL發(fā)生了了改變。并且能夠很好的支持瀏覽器前進(jìn)和后退。是什么有這么強(qiáng)大的功能呢？恩，這就會(huì)說(shuō)到今天的主角，HTML5里引用了新的API：
“history.pushState”和“history.replaceState”，就是通過(guò)這個(gè)接口做到無(wú)刷新改變頁(yè)面URL的。先來(lái)看看"history"接口的詳細(xì)方法：
代碼如下:
interface History {
readonly attribute long length;
readonly attribute any state;
void go(optional long delta);
void back();
void forward();
void pushState(any data, DOMString title, optional DOMString? url = null);
void replaceState(any data, DOMString title, optional DOMString? url = null);
};
（二），重點(diǎn)API說(shuō)明
在這里說(shuō)明一點(diǎn)："window.history.replaceState"和"window.history.pushState"類(lèi)似，不同之處在于replaceState不會(huì)在window.history里新增歷史記錄點(diǎn)，其效果類(lèi)似于window.location.replace(url)，都是不會(huì)在歷史記錄點(diǎn)里新增一個(gè)記錄點(diǎn)的。當(dāng)你為了響應(yīng)用戶(hù)的某些操作，而要更新當(dāng)前歷史記錄條目的狀態(tài)對(duì)象或URL時(shí)，使用replaceState()方法會(huì)特別合適。
（三），引入實(shí)例
今天說(shuō)說(shuō)單頁(yè)應(yīng)用中我們通常會(huì)這樣做，有一個(gè)菜單列表，點(diǎn)擊相關(guān)菜單項(xiàng)然后動(dòng)態(tài)加載相關(guān)模塊，所有方式都是基于異步請(qǐng)求的，美中不足是，我們會(huì)發(fā)現(xiàn)地址欄不會(huì)有任何變化，以及瀏覽器中的前進(jìn)和后退操作也不會(huì)有任何響應(yīng)，這對(duì)用戶(hù)不是很友好，所以為了解決這個(gè)問(wèn)題“History”就有用武之地了，那么如何做到的那？不急先看一下例子中的效果圖展示，然后一步步分析,如下所示：
以下是監(jiān)測(cè)數(shù)據(jù)，相同的url再次刷新不會(huì)重復(fù)請(qǐng)求。
我們梳理一下流程：
頁(yè)面首次載入，雖然我們?cè)L問(wèn)的URL是"http://localhost:8888/bbSPA.html"，但是，實(shí)際URL確是：
"http://localhost:8888/bbSPA.html#shanghai"，”history.replaceState“完成了初始化url切換工作，并且初始做了加載
"shanghai.data"的數(shù)據(jù)工作，鼠標(biāo)點(diǎn)擊左邊的任意一個(gè)菜單項(xiàng)，右側(cè)內(nèi)容是Ajax載入，并且頁(yè)面的URL隨之發(fā)生改變，例如，點(diǎn)擊北京。
此時(shí)，我們點(diǎn)擊地址欄的后退按鈕，又回到了上海，并且顯示內(nèi)容。原理很簡(jiǎn)單，就是通過(guò)監(jiān)聽(tīng)”window.onpopstate“，達(dá)到了自由切換的作用。
好了！其實(shí)很簡(jiǎn)單大家也嘗試自己實(shí)踐一下，以下是完整代碼：
（1），html部分代碼
代碼如下:
（2），Js部分代碼
代碼如下:
$(function(){
_init() ;
}) ;
var _history = [] ; // 記錄hash的活動(dòng)數(shù)據(jù)容器
function _init(){
var root = $("#list") ;
var defaultHash = root.find("li a").eq(1).attr("href") ;
var currentHash = window.location.hash ;
_addToHistory(defaultHash,true) ;
if(currentHash && currentHash != defaultHash){
_showContent((currentHash.split("#")[1])) ;
}
else{
_showContent((defaultHash.split("#")[1])) ;
}
$("#list").on("click","a",function(e){
var action = ($(this).attr("href").split("#")[1]) ;
_showContent(action) ;
e.preventDefault() ;
}) ;
window.addEventListener("popstate",function(e){
if(e.state && e.state.hash){
var hash = e.state.hash ;
if(_history[1] && hash === _history[1].hash){//存在歷史記錄，證明是后退事件
_showContent(hash.split("#")[1].toLowerCase()) ;
}else{ // 其它認(rèn)為是非法后退或者前進(jìn)
return ;
}
}
else{
return ;
}
},false) ;
} ;
function _showContent(action){
var samePage = _history[0]["hash"] == "#" + action ;
if(samePage){ // 同頁(yè)面,則不重新加載
return ;
}
_loadContent(action + ".data").done(function(data){
_renderContent(data["content"]) ;
_addToHistory("#" + action,samePage) ;
}).fail(function(){
throw new Error("load content error !") ;
}) ;
} ;
function _loadContent(url){
return $.ajax({
url : url ,
dataType : "json"
}) ;
} ;
function _renderContent(text){
$("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
var obj = {
hash : hash
} ;
if(noState){
_history.shift(obj) ;
window.history.replaceState(obj,"",hash) ;
}
else{
window.history.pushState(obj,"",hash) ;
}
_history.unshift(obj) ;
} ;
（四），最后總結(jié)
（1），理解History Api的使用方式以及具體實(shí)例中使用的目的是為了解決哪些問(wèn)題。
（2），兩個(gè)核心Api的不同之處在哪。
（3），測(cè)試本例子的注意事項(xiàng)如下。
測(cè)試需要搭建一個(gè)web服務(wù)器，以http://host/的形式去訪(fǎng)問(wèn)才能生效，如果你在本地測(cè)試以file://這樣的方式在瀏覽器打開(kāi)，就會(huì)出現(xiàn)如下的問(wèn)題：
代碼如下:
Uncaught SecurityError: A history state object with URL 'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with origin 'null'.
因?yàn)槟阋猵ushState的url與當(dāng)前頁(yè)面的url必須是同源的，而file://形式打開(kāi)的頁(yè)面是沒(méi)有origin的，所以會(huì)報(bào)這個(gè)錯(cuò)誤。
感謝各位的閱讀，以上就是“如何使用History API”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何使用History API這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
