ios浏览器微信支付回调页面_由微信浏览器支付引出的浏览器历史记录操作

原由

最近碰到的一个需求引起对相关知识的补充与完善，在微信浏览器中使用微信支付，需要且必须在提交订单的时候302跳微信进行授权，微信授权成功后，再返回支付页面(本地)，然后通过支付页面唤起微信支付界面，取消支付后跳转到订单未完成页面。在这个过程中会产生4条历史记录：1、提交订单时的支付中转页面(找微信授权)，2、302跳转到微信支付，微信支付回调实际操作的支付页面，3、取消支付跳转到订单未完成页面；然后如果点击订单未完成页面返回按钮或微信返回或android返回按钮就会在支付与未支付页面来回跳转，因为返回默认操作的都是上一次页面记录。

So，在不改变现有页面逻辑的情况这不是想要的效果，那么唯一的可能性就是通过操作浏览器历史记录来控制页面的显示。辣么对于历史记录有哪些方法可以操作它？

细数如下：

浏览器返回按钮(移动端touch或实体)

通过history对象

通过location对象

就这些吧，辣么一一了解

一、浏览器返回按钮

主动触发，必须要去点才能操作。且浏览器原生返回按钮是无法通过代码进行事件绑定的，所以它默认的操作就是返回上一条历史记录。显然，这个有时候不能完成我们所要达到的效果，辣么是否用它来配合神马或许能达到？有，即history对象

二、history对象，新API

attribute&function

describe

pushState()

向浏览器历史添加了一个状态，会改变页面URL，但不会重载页面

replaceState()

将当前浏览器历史修改成指定的

pushState方法与之对应还有一个与之相关的事件onpopstate事件(只有使用pushState方法时，这个事件才存在)；这个事件顾名思义push是插入，pop是取出都者加在一起才能完成一个完整的动作。SO，当点击返回按钮或使用back()、forward()、go()方法的时候实际是从历史中取记录

pushState和replaceState为H5新增API

pushState

语法：history.pushState(state, title, url)

参数:

state：

state object — 状态对象是一个由 pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。(译者注：总而言之，它存储JSON字符串，可以用在popstate事件中。) state 对象可以是任何可以序列化的东西。由于 火狐 会将这些对象存储在用户的磁盘上，所以用户在重启浏览器之后这些state对象会恢复，我们施加一个最大640k 的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象，这个方法将扔出一个异常。如果你需要更多的空间，推荐使用sessionStorage或者localStorage。

title：

火狐浏览器现在已经忽略此参数，将来也许可能被使用。考虑到将来有可能的改变，传递一个空字符串是安全的做法。当然，你可以传递一个短标题给你要转变成的状态。(译者注：现在大多数浏览器不支持或者忽略这个参数，最好用null代替)

URL：

这个参数用来传递新的history实体的URL，注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后，新的url可以不是绝对路径。如果是相对路径，那么它会相对于现有的url。新的url必须和现有的url同域，否则pushState()将抛出异常。这个参数是选填的，如果为空，则会被置为document当前的url。

replaceState

语法与参数同pushState

新API免不了的兼容性

PC：

从IE8到目前主流浏览器都支持

wap：

1、IOS5.1+全线支持；

2、android 4.1.2+ 全线支持

表现形式(onpopstate)

PC：

1、点击返回按钮；

2、使用history前进后退方法

3、直接加载pushstate方法修改后的URL或与之相关的URL参数

wap：

与PC一致

But，webkit内核的移动端浏览器，在使用pushstate会自动触发一次onpopstate事件

三、location对象

attribute&function

describe

replace()

用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

以上为解决问题的所涉及到的知识点。通过以上知识点完成整个back历史控制。

步骤：

1、location.replace中转页面替换当前订单页面；

2、中转页面302跳转微信授权页然后返回实际支付页面；

3、在支付页面取消支付，跳转到订单未完成页面；然后通过history.pushState(null, null, document.url)向浏览器历史栈中插入当前页面，也就是当前订单完成页面会连续产生两条历史记录。

这么做的目的在于，触发onpopstate事件，因为浏览器返回按钮是不能被JS所控制，但可以通过onpopstate事件来判断浏览器是否从历史中取记录，从而判断是否点击了返回按钮。只要能判断返回按钮的操作，那么，具体返回到什么页面就可以通过代码来进行组织。

But，由于存在兼容性问题不支持新API的浏览器还是只能使用默认方式解决，如果修改整个页面逻辑或许还会有其他解决办法

就先这样吧！！！

参考: