這個(gè)功能之前有簡(jiǎn)單的帶過(guò)，這次詳細的講解下原理和存在的問(wèn)題（由于是運用html5的新API 所以有兼容問(wèn)題，推薦移動(dòng)端使用該方法）。
功能描述：
在瀏覽器中新建標簽頁(yè)并指定一個(gè)網(wǎng)址，網(wǎng)頁(yè)加載完畢后，正常流程下是不允許點(diǎn)擊返回的。因為當前標簽頁(yè)的相關(guān)歷史記錄是沒(méi)有的，所以沒(méi)有記錄可以返回。
應客戶(hù)要求，需要在這種情況下，給他的歷史記錄里添加一個(gè)鏈接（比如首頁(yè)），這樣在新打開(kāi)的頁(yè)面，點(diǎn)擊返回就可以跳轉到首頁(yè)，讓用戶(hù)看到系統的各種功能，推廣平臺。
一、知識要點(diǎn)
HTML5引進(jìn)了history.pushState()方法和history.replaceState()方法，它們允許你逐條地添加和修改歷史記錄條目。這些方法可以協(xié)同window.onpopstate事件一起工作。
案例：
假設 http://mozilla.org/foo.html 將執行如下JavaScript代碼：
這將讓瀏覽器的地址欄顯示http://mozilla.org/bar.html，但不會(huì )加載bar.html頁(yè)面也不會(huì )檢查bar.html是否存在。
假設現在用戶(hù)導航到了http://google.com，然后點(diǎn)擊了后退按鈕，此時(shí)，地址欄將會(huì )顯示http://mozilla.org/bar.html，并且頁(yè)面會(huì )觸發(fā)popstate事件，該事件中的狀態(tài)對象（state object）包含stateObj的一個(gè)拷貝。該頁(yè)面看起來(lái)像foo.html，盡管頁(yè)面內容可能在popstate事件中被修改。
如果我們再次點(diǎn)擊后退按鈕，URL將變回http://mozilla.org/foo.html 文檔將觸發(fā)另一個(gè)popstate事件，這次的狀態(tài)對象為null?；赝送瑯硬粫?huì )改變文檔內容。
pushState()方法
pushState()有三個(gè)參數：一個(gè)狀態(tài)對象、一個(gè)標題（現在會(huì )被忽略），一個(gè)可選的URL地址。下面來(lái)單獨考察這三個(gè)參數的細節：
狀態(tài)對象（state object） — 一個(gè)JavaScript對象，與用pushState()方法創(chuàng )建的新歷史記錄條目關(guān)聯(lián)。無(wú)論何時(shí)用戶(hù)導航到新創(chuàng )建的狀態(tài)，popstate事件都會(huì )被觸發(fā)，并且事件對象的state屬性都包含歷史記錄條目的狀態(tài)對象的拷貝。
任何可序列化的對象都可以被當做狀態(tài)對象。因為FireFox瀏覽器會(huì )把狀態(tài)對象保存到用戶(hù)的硬盤(pán)，這樣它們就能在用戶(hù)重啟瀏覽器之后被還原，我們強行限制狀態(tài)對象的大小為640k。如果你向pushState()方法傳遞了一個(gè)超過(guò)該限額的狀態(tài)對象，該方法會(huì )拋出異常。如果你需要存儲很大的數據，建議使用sessionStorage或localStorage。
標題（title） — FireFox瀏覽器目前會(huì )忽略該參數，雖然以后可能會(huì )用上?？紤]到未來(lái)可能會(huì )對該方法進(jìn)行修改，傳一個(gè)空字符串會(huì )比較安全?；蛘?，你也可以傳入一個(gè)簡(jiǎn)短的標題，標明將要進(jìn)入的狀態(tài)。
地址（URL） — 新的歷史記錄條目的地址。瀏覽器不會(huì )在調用pushState()方法后加載該地址，但之后，可能會(huì )試圖加載，例如用戶(hù)重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當前URL為基準；傳入的URL與當前URL應該是同源的，否則，pushState()會(huì )拋出異常。該參數是可選的；不指定的話(huà)則為文檔當前URL。
注意： 在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 至 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 中，傳入的對象使用JSON來(lái)進(jìn)行序列化。從 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)開(kāi)始，對象使用結構化拷貝算法來(lái)進(jìn)行序列化。這將允許更多類(lèi)型的對象能夠安全傳入。
某種意義上，調用pushState()有點(diǎn)類(lèi)似于設置window.location='#foo'，它們都會(huì )在當前文檔內創(chuàng )建和激活新的歷史記錄條目。但pushState()有自己的優(yōu)勢：
1、新的URL可以是任意的同源URL，與此相反，使用window.location方法時(shí)，只有僅修改 hash 才能保證停留在相同的document中。
2、根據個(gè)人需要來(lái)決定是否修改URL。相反，設置window.location='#foo'，只有在當前hash值不是foo時(shí)才創(chuàng )建一條新歷史記錄。
3、你可以在新的歷史記錄條目中添加抽象數據。如果使用基于hash的方法，你只能把相關(guān)數據轉碼成一個(gè)很短的字符串。
注意pushState()方法永遠不會(huì )觸發(fā)hashchange事件，即便新的地址只變更了hash。
popstate事件
每當激活的歷史記錄發(fā)生變化時(shí)，都會(huì )觸發(fā)popstate事件。如果被激活的歷史記錄條目是由pushState所創(chuàng )建，或是被replaceState方法影響到的，popstate事件的狀態(tài)屬性將包含歷史記錄的狀態(tài)對象的一個(gè)拷貝。
replaceState()方法
history.replaceState()操作類(lèi)似于history.pushState()，不同之處在于replaceState()方法會(huì )修改當前歷史記錄條目而并非創(chuàng )建新的條目。
當你為了響應用戶(hù)的某些操作，而要更新當前歷史記錄條目的狀態(tài)對象或URL時(shí)，使用replaceState()方法會(huì )特別合適。
二、實(shí)現思路
1.利用popstate事件，監聽(tīng)點(diǎn)擊返回事件。
2.觸發(fā)事件時(shí)，判斷當前頁(yè)面的歷史記錄 是否有頁(yè)面可以返回。
3.如果沒(méi)有頁(yè)面可以返回，則插入兩條記錄：
1）、指定的跳轉頁(yè)面。
2）、空記錄。（使當前頁(yè)面不發(fā)生變化）
三、實(shí)現方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //返回之前沒(méi)頁(yè)面則返回首頁(yè) function pushHistory() { if (history.length < 2) { var state = { title: "index", url: getHttpPrefix + "index.html" }; window.history.pushState(state, "index", location.href); state = { title: "index", url: "" }; window.history.pushState(state, "index", ""); } //lll("history.state" + history.state) //console.log(history.state) } |
判斷當前history中的記錄個(gè)數，由于頁(yè)面加載的時(shí)候，瀏覽器會(huì )自動(dòng)push進(jìn)一個(gè)記錄。所以要判斷長(cháng)度是否小于2.
塞進(jìn)的state對象是為了獲取對應的url鏈接。
注意點(diǎn)：
第一個(gè)pushState我將跳轉url放進(jìn)state對象 方便跳轉操作。第二個(gè)參數沒(méi)有實(shí)際意義，因為現在的瀏覽器基本不適用這個(gè)參數。
第三個(gè)參數是會(huì )替換當前地址欄的鏈接的，但是頁(yè)面不會(huì )發(fā)生跳轉。（我之前犯了個(gè)錯誤，將第三個(gè)參數設置為首頁(yè)鏈接，導致了地址欄更改為首頁(yè)鏈接，以至于在當前頁(yè)的鏈接 都以首頁(yè)為基礎進(jìn)行跳轉，導致頁(yè)面的所有鏈接都跳轉錯誤了。）
1 2 3 4 5 6 7 8 9 | setTimeout(function () { pushHistory() window.addEventListener("popstate", function (e) { lll("popstate"+window.history.state) if (window.history.state != null && window.history.state.url != "") { location.href = window.history.state.url } }); }, 300); |
這段代碼放置在頁(yè)面的ready事件中執行，延遲300毫秒是為了將操作滯后，防止與系統pop事件沖突。
if語(yǔ)句為了判斷 history是否存在state對象，因為只有滿(mǎn)足我們要求的記錄才會(huì )有我們添加的state對象 所以 根據這點(diǎn)可以進(jìn)行頁(yè)面的跳轉操作。
這樣就可以實(shí)現我們想要的效果。
四、寫(xiě)在最后
缺點(diǎn)：
1. 很明顯，就如開(kāi)頭提到的。只適合支持html5的瀏覽器使用。
2.由于插進(jìn)了兩條記錄 ，所以 類(lèi)似于 微信這種移動(dòng)端的返回，需要再點(diǎn)擊兩次返回，才能推出頁(yè)面，回到微信聊天窗口，用戶(hù)體驗不好。
總結：
這種方法 一定還可以?xún)?yōu)化和完善，只是目前我的實(shí)力不足，還不足以完善到完美的程度。
希望看到這篇文章的朋友可以得到一些啟發(fā)，或者是有更好的方法實(shí)現。
聯(lián)系客服
