-
Notifications
You must be signed in to change notification settings - Fork 0
由微信浏览器支付引出的浏览器历史记录操作
最近碰到的一个需求引起对相关知识的补充与完善,在微信浏览器中使用微信支付,需要且必须在提交订单的时候302跳微信进行授权,微信授权成功后,再返回支付页面(本地),然后通过支付页面唤起微信支付界面,取消支付后跳转到订单未完成页面。在这个过程中会产生4条历史记录:1、提交订单时的支付中转页面(找微信授权),2、302跳转到微信支付,微信支付回调实际操作的支付页面,3、取消支付跳转到订单未完成页面;然后如果点击订单未完成页面返回按钮或微信返回或android返回按钮就会在支付与未支付页面来回跳转,因为返回默认操作的都是上一次页面记录。
So,在不改变现有页面逻辑的情况这不是想要的效果,那么唯一的可能性就是通过操作浏览器历史记录来控制页面的显示。辣么对于历史记录有哪些方法可以操作它? 细数如下:
- 浏览器返回按钮(移动端touch或实体)
- 通过history对象
- 通过location对象
就这些吧,辣么一一了解
主动触发,必须要去点才能操作。且浏览器原生返回按钮是无法通过代码进行事件绑定的,所以它默认的操作就是返回上一条历史记录。显然,这个有时候不能完成我们所要达到的效果,辣么是否用它来配合神马或许能达到?有,即history对象
attribute&function | describe |
---|---|
pushState() | 向浏览器历史添加了一个状态,会改变页面URL,但不会重载页面 |
replaceState() | 将当前浏览器历史修改成指定的 |
pushState方法与之对应还有一个与之相关的事件onpopstate事件(只有使用pushState方法时,这个事件才存在);这个事件顾名思义push是插入,pop是取出都者加在一起才能完成一个完整的动作。SO,当点击返回按钮或使用back()、forward()、go()方法的时候实际是从历史中取记录
语法:history.pushState(state, title, url)
参数:
state object — 状态对象是一个由 pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。(译者注:总而言之,它存储JSON字符串,可以用在popstate事件中。) state 对象可以是任何可以序列化的东西。由于 火狐 会将这些对象存储在用户的磁盘上,所以用户在重启浏览器之后这些state对象会恢复,我们施加一个最大640k 的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象,这个方法将扔出一个异常。如果你需要更多的空间,推荐使用sessionStorage或者localStorage。
火狐浏览器现在已经忽略此参数,将来也许可能被使用。考虑到将来有可能的改变,传递一个空字符串是安全的做法。当然,你可以传递一个短标题给你要转变成的状态。(译者注:现在大多数浏览器不支持或者忽略这个参数,最好用null代替)
这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。
语法与参数同pushState
PC:
从IE8到目前主流浏览器都支持
wap:
1、IOS5.1+全线支持;
2、android 4.1.2+ 全线支持
PC:
1、点击返回按钮;
2、使用history前进后退方法
3、直接加载pushstate方法修改后的URL或与之相关的URL参数
wap:
与PC一致
But,webkit内核的移动端浏览器,在使用pushstate会自动触发一次onpopstate事件
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的浏览器还是只能使用默认方式解决,如果修改整个页面逻辑或许还会有其他解决办法
就先这样吧!!!
参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/Location?name%20=%201
https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState