html5 页面回退,一种基于浏览器堆栈管理的H5页面动态回退方法与流程

本技术应用于在浏览器运行的H5应用中，涉及浏览器的History历史堆栈管理技术，尤其是移动端H5应用在浏览器中的History历史堆栈管理技术。

背景技术：

移动端H5应用作为一款基于浏览器历史堆栈管理技术的应用，兼具浏览器历史堆栈的优缺点，在使用浏览器历史堆栈管理技术的带来的H5页面前进/后退的便捷性的同时，也承受着浏览器历史堆栈技术“先进先出”的刻板性，如图1所示，当H5网页改变后，浏览器历史堆栈会相应插入、修改历史记录或者修改当前页面在浏览器历史堆栈中的指针位置，即新访问一个页面时，浏览器历史堆栈中会新增一条数据；回退页面时，当前页面的指针位置会指向上一个页面。当用户分别进入了1.html＝>2.html＝>3.html后，点击回退，只能返回到2.html，若用户想回退到1.html，只有点击两次回退，或在路由守卫中强制调用history.go(-2)(表示退两个指针)才能达到用户的需求。随着用户跳转的页面越来越多，如何动态回退到指定页面成为了一个难题。

因移动端H5应用(以下简称H5应用)是基于浏览器历史堆栈的，需遵循“先进先出”的原则，故当完成一笔购买之后，页面会跳转至购买结果页面，用户点击返回按钮，此时页面则又会回到购买页面，当用户在购买结果页面点击“回到首页”时，页面跳转购买页面，但此时点击返回按钮，页面又回到了购买结果页面。

原生的浏览器历史堆栈管理使H5页面的回退变得刻板，回退一次只能回退到浏览的上一个H5页面，在一定程度上，当用户做完一个完整的流程后，无需再回退到这个流程中的H5页面，华夏财富宝的存入流程只有三个H5页面，但当流程变长，如流程中还需去绑卡、设置交易密码等，用户存入成功后，点击返回，还需要经历流程中的所有页面，当所有页面都出栈完成后才能关闭整个H5应用，造成用户体验差的问题，即使使用路由守卫做回退的拦截，随着H5应用流程的增多，也会造成拦截模块混乱且难以维护的问题。针对这一现象，本技术基于浏览器历史堆栈，对H5应用的回退流程做了修改，为其提供了一种能动态回退历史栈的方法，可动态添加H5应用流程链路，同时在本地记录下用户的操作流程，当H5页面的回退时，若匹配到某流程链路的第一个节点或最后一个节点，则跳转到指定的H5页面