開頭總要有點廢話
這個功能在原先的js分享中 有簡單的帶過，這里拎出來 詳細的講解下原理和存在的問題（由於是運用html5的新API 所以有兼容問題，推薦移動端使用該方法）。
功能描述：
在瀏覽器中新建標簽頁並指定一個網址，網頁加載完畢后，正常流程下是不允許點擊返回的。因為當前標簽頁的相關歷史記錄是沒有的，所以沒有記錄可以返回。
應客戶要求，需要在這種情況下，給他的歷史記錄里添加一個鏈接（比如首頁），這樣在新打開的頁面，點擊返回就可以跳轉到首頁，讓用戶看到系統的各種功能，推廣平台。
知識要點
HTML5引進了history.pushState()方法和history.replaceState()方法，它們允許你逐條地添加和修改歷史記錄條目。這些方法可以協同window.onpopstate事件一起工作。
案例
假設 http://mozilla.org/foo.html 將執行如下JavaScript代碼：
1 var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
這將讓瀏覽器的地址欄顯示http://mozilla.org/bar.html，但不會加載bar.html頁面也不會檢查bar.html是否存在。
假設現在用戶導航到了http://google.com，然后點擊了后退按鈕，此時，地址欄將會顯示http://mozilla.org/bar.html，並且頁面會觸發popstate事件，該事件中的狀態對象（state object）包含stateObj的一個拷貝。該頁面看起來像foo.html，盡管頁面內容可能在popstate事件中被修改。
如果我們再次點擊后退按鈕，URL將變回http://mozilla.org/foo.html 文檔將觸發另一個popstate事件，這次的狀態對象為null。回退同樣不會改變文檔內容。
pushState()方法
pushState()有三個參數：一個狀態對象、一個標題（現在會被忽略），一個可選的URL地址。下面來單獨考察這三個參數的細節：
-
狀態對象（state object） — 一個JavaScript對象，與用pushState()方法創建的新歷史記錄條目關聯。無論何時用戶導航到新創建的狀態，popstate事件都會被觸發，並且事件對象的state屬性都包含歷史記錄條目的狀態對象的拷貝。
任何可序列化的對象都可以被當做狀態對象。因為FireFox瀏覽器會把狀態對象保存到用戶的硬盤，這樣它們就能在用戶重啟瀏覽器之后被還原，我們強行限制狀態對象的大小為640k。如果你向pushState()方法傳遞了一個超過該限額的狀態對象，該方法會拋出異常。如果你需要存儲很大的數據，建議使用sessionStorage或localStorage。
-
標題（title） — FireFox瀏覽器目前會忽略該參數，雖然以后可能會用上。考慮到未來可能會對該方法進行修改，傳一個空字符串會比較安全。或者，你也可以傳入一個簡短的標題，標明將要進入的狀態。
-
地址（URL） — 新的歷史記錄條目的地址。瀏覽器不會在調用pushState()方法后加載該地址，但之后，可能會試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當前URL為基准；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常。該參數是可選的；不指定的話則為文檔當前URL。
某種意義上，調用pushState()有點類似於設置window.location='#foo'，它們都會在當前文檔內創建和激活新的歷史記錄條目。但pushState()有自己的優勢：
-
新的URL可以是任意的同源URL，與此相反，使用window.location方法時，只有僅修改 hash 才能保證停留在相同的document中。
-
根據個人需要來決定是否修改URL。相反，設置window.location='#foo'，只有在當前hash值不是foo時才創建一條新歷史記錄。
-
你可以在新的歷史記錄條目中添加抽象數據。如果使用基於hash的方法，你只能把相關數據轉碼成一個很短的字符串。
注意pushState()方法永遠不會觸發hashchange事件，即便新的地址只變更了hash。
popstate事件
每當激活的歷史記錄發生變化時，都會觸發popstate事件。如果被激活的歷史記錄條目是由pushState所創建，或是被replaceState方法影響到的，popstate事件的狀態屬性將包含歷史記錄的狀態對象的一個拷貝。
replaceState()方法
history.replaceState()操作類似於history.pushState()，不同之處在於replaceState()方法會修改當前歷史記錄條目而並非創建新的條目。
當你為了響應用戶的某些操作，而要更新當前歷史記錄條目的狀態對象或URL時，使用replaceState()方法會特別合適。
實現思路
1.利用popstate事件，監聽點擊返回事件。
2.觸發事件時，判斷當前頁面的歷史記錄 是否有頁面可以返回。
3.如果沒有頁面可以返回，則插入兩條記錄：
1、指定的跳轉頁面。
2、空記錄。（使當前頁面不發生變化）
實現方法
//返回之前沒頁面則返回首頁 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中的記錄個數，由於頁面加載的時候，瀏覽器會自動push進一個記錄。所以要判斷長度是否小於2.
第三個參數是會替換當前地址欄的鏈接的，但是頁面不會發生跳轉。（我之前犯了個錯誤，將第三個參數設置為首頁鏈接，導致了地址欄更改為首頁鏈接，以至於在當前頁的鏈接 都以首頁為基礎進行跳轉，導致頁面的所有鏈接都跳轉錯誤了。）
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);