背景
首先说一下项目背景,我们做的是一个H5游戏平台,平台会接很多游戏,游戏是用iframe嵌入的,游戏会调用SDK执行某些操作,例如获取用户相关信息,支付等。然后遇到的问题是测试有一天测出来有的游戏点浏览器返回的时候无法从游戏页面返回到游戏平台页面,连续点击的时候有可能会返回,当时大致判断可能是游戏有二次跳转,但至于具体为什么跳转会导致返回出现异常以及怎么解决这个问题当时没有深入去研究,因为一来只有少数几款游戏出现,二来游戏页面有退出游戏的按钮,对用户整体使用影响不大,再加上当时还有很多其他开发任务,所以就暂时搁置了。但这个奇怪的问题一直萦绕在我的心里,直到几个月之后的现在开发任务不怎么紧了,就准备好好研究一下这个问题了。
探索
为了验证我最初的判断是否正确,询问了一下游戏那边是否有跳转,得到的结果是他们做了游戏分发,意思是他们会把游戏发布到很多渠道上(我们是其中一个渠道),但是他们给渠道的链接不是游戏原始链接,而是一个经过再包装的带有id以标识渠道号的链接,先通过这个链接获取渠道传过来的用户信息,然后再带着用户信息跳转到真正的游戏链接,ok,到这里基本可以确认是跳转导致了这个问题了,那么为什么会导致这个问题呢?我立马写了一个简单的demo准备复现这个问题,但事情远没有这么简单,不然也就不会有这篇文章了对吧。结果是并没有增加历史记录,然后去查原因,猜测可能是跳转的时间点不对,我是直接在子页面里面跳转,没有等待的操作,而原文题是在收到用户信息之后再跳转的,对demo做了一下调整,增加了延时,然后查看历史记录,的确是增加了,导致这个的原因可能是当前历史记录还没有确定,就跳转了,所以只形成了一条历史记录。到这里原因就明了了,回退的时候回退到分发链接,分发链接获取到用户信息之后又发生了跳转,就形成了循环,导致一直退不回去。那么怎么解决这个问题呢?
解决
能不能记录浏览器历史记录的条数,如果条数增加说明有跳转,这时候向历史记录push一条状态并监测onpopstate事件,popstate事件触发的时候就go(-2),这样是可以解决