這個(gè)功能之前有簡(jiǎn)單的帶過，這次詳細(xì)的講解下原理和存在的問題（由于是運(yùn)用html5的新API 所以有兼容問題，推薦移動(dòng)端使用該方法）。

功能描述：

在瀏覽器中新建標(biāo)簽頁并指定一個(gè)網(wǎng)址，網(wǎng)頁加載完畢后，正常流程下是不允許點(diǎn)擊返回的。因?yàn)楫?dāng)前標(biāo)簽頁的相關(guān)歷史記錄是沒有的，所以沒有記錄可以返回。

應(yīng)客戶要求，需要在這種情況下，給他的歷史記錄里添加一個(gè)鏈接（比如首頁），這樣在新打開的頁面，點(diǎn)擊返回就可以跳轉(zhuǎn)到首頁，讓用戶看到系統(tǒng)的各種功能，推廣平臺(tái)。

一、知識(shí)要點(diǎn)

HTML5引進(jìn)了history.pushState()方法和history.replaceState()方法，它們?cè)试S你逐條地添加和修改歷史記錄條目。這些方法可以協(xié)同window.onpopstate事件一起工作。

案例：

假設(shè) http://mozilla.org/foo.html 將執(zhí)行如下JavaScript代碼：

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "page 2", "bar.html");

這將讓瀏覽器的地址欄顯示http://mozilla.org/bar.html，但不會(huì)加載bar.html頁面也不會(huì)檢查bar.html是否存在。

假設(shè)現(xiàn)在用戶導(dǎo)航到了http://google.com，然后點(diǎn)擊了后退按鈕，此時(shí)，地址欄將會(huì)顯示http://mozilla.org/bar.html，并且頁面會(huì)觸發(fā)popstate事件，該事件中的狀態(tài)對(duì)象（state object）包含stateObj的一個(gè)拷貝。該頁面看起來像foo.html，盡管頁面內(nèi)容可能在popstate事件中被修改。

如果我們?cè)俅吸c(diǎn)擊后退按鈕，URL將變回http://mozilla.org/foo.html  文檔將觸發(fā)另一個(gè)popstate事件，這次的狀態(tài)對(duì)象為null?；赝送瑯硬粫?huì)改變文檔內(nèi)容。

pushState()方法
pushState()有三個(gè)參數(shù)：一個(gè)狀態(tài)對(duì)象、一個(gè)標(biāo)題（現(xiàn)在會(huì)被忽略），一個(gè)可選的URL地址。下面來單獨(dú)考察這三個(gè)參數(shù)的細(xì)節(jié)：

狀態(tài)對(duì)象（state object） — 一個(gè)JavaScript對(duì)象，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。無論何時(shí)用戶導(dǎo)航到新創(chuàng)建的狀態(tài)，popstate事件都會(huì)被觸發(fā)，并且事件對(duì)象的state屬性都包含歷史記錄條目的狀態(tài)對(duì)象的拷貝。

任何可序列化的對(duì)象都可以被當(dāng)做狀態(tài)對(duì)象。因?yàn)镕ireFox瀏覽器會(huì)把狀態(tài)對(duì)象保存到用戶的硬盤，這樣它們就能在用戶重啟瀏覽器之后被還原，我們強(qiáng)行限制狀態(tài)對(duì)象的大小為640k。如果你向pushState()方法傳遞了一個(gè)超過該限額的狀態(tài)對(duì)象，該方法會(huì)拋出異常。如果你需要存儲(chǔ)很大的數(shù)據(jù)，建議使用sessionStorage或localStorage。

標(biāo)題（title） — FireFox瀏覽器目前會(huì)忽略該參數(shù)，雖然以后可能會(huì)用上?？紤]到未來可能會(huì)對(duì)該方法進(jìn)行修改，傳一個(gè)空字符串會(huì)比較安全?；蛘?，你也可以傳入一個(gè)簡(jiǎn)短的標(biāo)題，標(biāo)明將要進(jìn)入的狀態(tài)。

地址（URL） — 新的歷史記錄條目的地址。瀏覽器不會(huì)在調(diào)用pushState()方法后加載該地址，但之后，可能會(huì)試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對(duì)路徑；如果是相對(duì)路徑，它將以當(dāng)前URL為基準(zhǔn)；傳入的URL與當(dāng)前URL應(yīng)該是同源的，否則，pushState()會(huì)拋出異常。該參數(shù)是可選的；不指定的話則為文檔當(dāng)前URL。

注意： 在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 至 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 中，傳入的對(duì)象使用JSON來進(jìn)行序列化。從 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)開始，對(duì)象使用結(jié)構(gòu)化拷貝算法來進(jìn)行序列化。這將允許更多類型的對(duì)象能夠安全傳入。
某種意義上，調(diào)用pushState()有點(diǎn)類似于設(shè)置window.location='#foo'，它們都會(huì)在當(dāng)前文檔內(nèi)創(chuàng)建和激活新的歷史記錄條目。但pushState()有自己的優(yōu)勢(shì)：

1、新的URL可以是任意的同源URL，與此相反，使用window.location方法時(shí)，只有僅修改 hash 才能保證停留在相同的document中。

2、根據(jù)個(gè)人需要來決定是否修改URL。相反，設(shè)置window.location='#foo'，只有在當(dāng)前hash值不是foo時(shí)才創(chuàng)建一條新歷史記錄。

3、你可以在新的歷史記錄條目中添加抽象數(shù)據(jù)。如果使用基于hash的方法，你只能把相關(guān)數(shù)據(jù)轉(zhuǎn)碼成一個(gè)很短的字符串。

注意pushState()方法永遠(yuǎn)不會(huì)觸發(fā)hashchange事件，即便新的地址只變更了hash。

popstate事件

每當(dāng)激活的歷史記錄發(fā)生變化時(shí)，都會(huì)觸發(fā)popstate事件。如果被激活的歷史記錄條目是由pushState所創(chuàng)建，或是被replaceState方法影響到的，popstate事件的狀態(tài)屬性將包含歷史記錄的狀態(tài)對(duì)象的一個(gè)拷貝。

replaceState()方法

history.replaceState()操作類似于history.pushState()，不同之處在于replaceState()方法會(huì)修改當(dāng)前歷史記錄條目而并非創(chuàng)建新的條目。

當(dāng)你為了響應(yīng)用戶的某些操作，而要更新當(dāng)前歷史記錄條目的狀態(tài)對(duì)象或URL時(shí)，使用replaceState()方法會(huì)特別合適。

二、實(shí)現(xiàn)思路

1.利用popstate事件，監(jiān)聽點(diǎn)擊返回事件。

2.觸發(fā)事件時(shí)，判斷當(dāng)前頁面的歷史記錄 是否有頁面可以返回。

3.如果沒有頁面可以返回，則插入兩條記錄：

1）、指定的跳轉(zhuǎn)頁面。

2）、空記錄。（使當(dāng)前頁面不發(fā)生變化）

三、實(shí)現(xiàn)方法

 //返回之前沒頁面則返回首頁
 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) 
}

判斷當(dāng)前history中的記錄個(gè)數(shù)，由于頁面加載的時(shí)候，瀏覽器會(huì)自動(dòng)push進(jìn)一個(gè)記錄。所以要判斷長(zhǎng)度是否小于2.

塞進(jìn)的state對(duì)象是為了獲取對(duì)應(yīng)的url鏈接。

注意點(diǎn)：

第一個(gè)pushState我將跳轉(zhuǎn)url放進(jìn)state對(duì)象 方便跳轉(zhuǎn)操作。第二個(gè)參數(shù)沒有實(shí)際意義，因?yàn)楝F(xiàn)在的瀏覽器基本不適用這個(gè)參數(shù)。
第三個(gè)參數(shù)是會(huì)替換當(dāng)前地址欄的鏈接的，但是頁面不會(huì)發(fā)生跳轉(zhuǎn)。（我之前犯了個(gè)錯(cuò)誤，將第三個(gè)參數(shù)設(shè)置為首頁鏈接，導(dǎo)致了地址欄更改為首頁鏈接，以至于在當(dāng)前頁的鏈接 都以首頁為基礎(chǔ)進(jìn)行跳轉(zhuǎn)，導(dǎo)致頁面的所有鏈接都跳轉(zhuǎn)錯(cuò)誤了。）

 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);

這段代碼放置在頁面的ready事件中執(zhí)行，延遲300毫秒是為了將操作滯后，防止與系統(tǒng)pop事件沖突。
if語句為了判斷 history是否存在state對(duì)象，因?yàn)橹挥袧M足我們要求的記錄才會(huì)有我們添加的state對(duì)象 所以 根據(jù)這點(diǎn)可以進(jìn)行頁面的跳轉(zhuǎn)操作。
這樣就可以實(shí)現(xiàn)我們想要的效果。

四、寫在最后

缺點(diǎn)：

1. 很明顯，就如開頭提到的。只適合支持html5的瀏覽器使用。

2.由于插進(jìn)了兩條記錄 ，所以 類似于 微信這種移動(dòng)端的返回，需要再點(diǎn)擊兩次返回，才能推出頁面，回到微信聊天窗口，用戶體驗(yàn)不好。

總結(jié)：

這種方法 一定還可以優(yōu)化和完善，只是目前我的實(shí)力不足，還不足以完善到完美的程度。

希望看到這篇文章的朋友可以得到一些啟發(fā)，或者是有更好的方法實(shí)現(xiàn)。

最新評(píng)論