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…

转载于:https://juejin.im/post/5d01e3c8e51d45105d63a4f4