history.pushState 添加瀏覽器歷史記錄

最近在作一個H5商城項目，用到了支付寶跟微信的支付，可是遇到了如下的問題： 當前頁面爲提交訂單頁，包含了用戶帳號密碼、買家留言、優惠券選擇、支付方式選擇等等，內容填好後點擊提交訂單跳轉到對應支付方式的支付頁面，可是問題來了，假如用支付寶，在剛跳轉到支付寶頁面時不選擇下一步，而是直接取消支付，用瀏覽器回退按鈕返回到提交訂單頁，這時還能夠點擊提交訂單來再次支付，但實際算是重複生成訂單的bug了；並且對不一樣的手機，不一樣的瀏覽器在取消支付回退到提交訂單頁時，有的頁面已經被刷新，還得用戶從新輸入內容才能提交。

爲了解決提早取消支付形成的bug，就想到了取消支付後直接跳轉到個人訂單列表頁面，在訂單頁能夠查看剛下的訂單詳情，能夠選擇完成支付。

可是提早取消支付不會觸發支付寶和微信設置的支付完成或者取消支付對應的跳轉頁面。經過百度一通搜索，發現了history.pushState徹底能夠解決此問題。

history.pushState()主要是在不刷新瀏覽器的狀況下，建立新的瀏覽記錄並插入瀏覽記錄隊列中。

1.狀態對象（stateObject）--stateObject是一個JavaScript對象，經過pushState方法能夠將stateObject內容傳遞到新頁面中。

2.標題（title）--幾乎沒有瀏覽器支持該參數，可是傳一個空字符串會比較安全。

3.地址（url）--新的歷史記錄條目的地址（可選，不指定的話則爲文檔當前URL）；瀏覽器在調用pushState()方法後不會加載該地址；傳入的URL與當前URL應該是同源的，不然，pushState()會拋出異常。

好比當前提交訂單頁面地址爲 confirmOrder.jsp，使用

history.pushState({}, "MyOrder", "myOrder.jsp")
複製代碼

爲當前瀏覽器添加一條myOrder.jsp的歷史記錄，提交訂單後跳轉到其餘支付頁面pay.jsp，這時按瀏覽器回退就會返回到myOrder.jsp頁面。

詳情能夠參考：

www.cnblogs.com/51kata/p/51…

www.cnblogs.com/sh-zj/p/971…