CN109740095A - 一种基于浏览器堆栈管理的h5页面动态回退方法 - Google Patents

Abstract

本发明涉及堆栈管理技术领域，提供了一种基于浏览器堆栈管理的H5页面动态回退方法，主旨在解决随着用户跳转的页面越来越多，如何动态回退到指定页面的难题，主要方案包括以下步骤：S1：对H5应用各业务流程进行线性链表式存储，得到多条以业务流程为单位的线性链表；S2：设置一个变量锁，得到在页面跳转标志位；S3：将前端路由方法进行重写，得到能标志页面跳转为路由跳转的路由方法；S4：模拟浏览器历史堆栈的管理，得到H5浏览历史记录栈。S5：注册全局路由守卫，拦截页面跳转，判断标志是否为程序回退，判断当前页面路由为线性链表的首尾节点，满足以上条件时，跳转到指定页面，最终实现H5页面动态回退。

Description

一种基于浏览器堆栈管理的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页面，使H5应用回退技术变得可维护，在一定程度上优化了用户体验。

发明内容

传统网页访问页面点击返回时，直接返回为上一次浏览页面，随着用户跳转的页面越来越多，如何动态回退到指定页面成为了一个难题。

本发明为解决上述技术问题，采用以下技术方案：

一种基于浏览器堆栈管理的H5页面动态回退方法，包括以下步骤：

步骤1：对H5应用各业务流程进行线性链表式存储，得到多条以业务流程为单位的线性链表；

步骤2：设置一个变量锁，得到在页面跳转标志位，页面跳转标志位包括程序回退和路由跳转；

步骤3：将前端路由方法进行重写，得到能标志页面跳转为路由跳转的路由方法；

步骤4：模拟浏览器历史堆栈的管理，得到H5浏览历史记录栈；

步骤5：注册全局路由守卫，拦截页面跳转，判断标志是否为程序回退，判断当前页面路由为线性链表的首尾节点，满足以上条件时，跳转到指定页面，最终实现H5页面动态回退。

上述技术方案中，一种基于浏览器堆栈管理的H5页面动态回退方法，其特征在于：步骤1主要包括以下步骤：

步骤1.1：创建一个线性链表类，存储H5应用业务流程页面路由信息及每个流程结束后应跳转的页面路由信息，将业务流程中各H5页面的路由信息以流程为单位存储在此线性链表中；

步骤1.2：线性链表类提供以下方法：

1.2.1动态添加链表节点；

1.2.2判断是否是链表首尾节点；

1.2.3判断指定路由是否存在于线性链表节点中；

步骤1.3：结合H5应用业务流程，以业务流程为单位，实例化多个线性链表类，将H5应用业务流程页面路由信息动态添加到实例化后的各线性链表类中，得到多条以业务流程为单位的线性链表。

上述技术方案中，步骤2主要包括以下步骤：

步骤2.1设置一个变量锁；

步骤2.2设置变量锁默认值为程序回退。

上述技术方案中，步骤3主要包括以下步骤：

步骤3.1：记录原有新增路由方法、替换当前路由方法，路由跳转时会自动触发以上方法，将跳转的页面路由信息传入到以上方法中；

步骤3.2：重新定义新增路由方法，在方法中，先继承步骤3.1记录的原有新增路由方法，再将步骤2.1的变量锁置为路由跳转，即标志此页面跳转为路由跳转；

步骤3.3重新定义替换当前路由方法，在方法中，先继承步骤3.1记录的替换当前路由方法，再将步骤2.1的变量锁置为路由跳转，即标志此页面跳转为路由跳转。

上述技术方案中，步骤4主要包括以下步骤：

步骤4.1：创建H5浏览历史记录栈，用于存储H5页面的跳转信息，包括：

4.1.1 H5页面历史浏览记录；

4.1.2当前页面指针位置；

步骤4.2：修改步骤3.2新增路由方法，模拟历史浏览记录入栈的情况：

4.2.1将步骤3.2继承自步骤3.1的原有新增路由方法的传入值存储到4.1.1的H5页面历史浏览记录中；

4.2.3将当前页面指针前移；

步骤4.3修改步骤3.3替换当前路由方法，模拟历史浏览记录替换最近项的情况：

4.3.1将H5页面历史浏览记录中最近添加的项替换为将步骤3.2继承自步骤3.1的替换当前路由方法的传入值；

4.3.2当前页面指针位置不变。

5.根据权利要求1所述的一种基于浏览器堆栈管理的H5页面动态回退方法，步骤5主要包括：

步骤5.1注册全局路由守卫，拦截页面跳转，根据变量锁的值判断此页面跳转是路由跳转还是程序跳转：

5.1.1若为路由跳转，放开拦截，仅将步骤2.1的变量锁的值修改为程序回退，表示该H5页面为已访问；

5.1.2若为程序回退，判断当前H5页面路由信息存在于哪条线性链表的节点中，找到当前H5页面路由所在的线性链表，匹配当前H5路由信息是否为此线性链表的首尾节点，若是，根据步骤1.1存储的该H5应用流程结束后应跳转的页面路由信息，跳转到相应页面，再将步骤2.1中变量锁的值置为路由跳转；若否，放开拦截，执行原浏览器历史回退跳转，将4.1.2当前页面指针位置后移。

本发明还提供了一种基于浏览器堆栈管理的H5页面动态回退装置，其特征在于，包括以下模块：

线性链表模块：对H5应用各业务流程进行线性链表式存储，得到多条以业务流程为单位的线性链表；

变量锁模块：设置一个变量锁，得到在页面跳转标志位，页面跳转标志位包括程序回退和路由跳转；

前端路由改写模块：将前端路由方法进行重写，得到能标志页面跳转为路由跳转的路由方法；

历史堆栈的管理模块：模拟浏览器历史堆栈的管理，得到H5浏览历史记录栈；

页面跳转拦截模块：注册全局路由守卫，拦截页面跳转，判断标志是否为程序回退，判断当前页面路由为线性链表的首尾节点，满足以上条件时，跳转到指定页面，最终实现H5页面动态回退。

因为本发明采用了以上技术方案，因此具备以下有益效果：

一、本申请使用线性链表存储结构对整个H5应用流程的路由做动态存储，将H5页面回退做成了一个与H5应用业务低耦合的、易于维护和扩展的模块，可依据不同的H5应用的不同流程做H5页面回退动态配置化。

二、本技术的技术优点在于实现了H5页面在浏览器中的动态回退技术，使用线性链表存储结构对整个H5应用流程的路由做存储，重写了路由方法，标志了是程序回退还是路由跳转，当程序回退时，先匹配是否是某H5应用流程的首尾节点，若是，则回退到指定页面。

三、在实现了动态回退功能的同时，也降低了回退方案和H5应用的耦合度，维护的链表为动态添加的流程和节点，可依据不同的H5应用的不同流程做动态配置化，使其可配置可扩展。

附图说明

图1为浏览器历史堆载记录。

具体实施方式

下面将结合具体实施方式对本发明作进一步的描述。

本发明提供了一种基于浏览器堆栈管理的H5页面动态回退方法，包括以下步骤：

步骤1：对H5应用各业务流程进行线性链表式存储，得到多条以业务流程为单位的线性链表；

步骤1.1：创建一个线性链表类，存储H5应用业务流程页面路由信息及每个流程结束后应跳转的页面路由信息，将业务流程中各H5页面的路由信息以流程为单位存储在此线性链表中；

步骤1.2：线性链表类提供以下方法：

1.2.1动态添加链表节点；

1.2.2判断是否是链表首尾节点；

1.2.3判断指定路由是否存在于线性链表节点中；

步骤1.3：结合H5应用业务流程，以业务流程为单位，实例化多个线性链表类，将H5应用业务流程页面路由信息动态添加到实例化后的各线性链表类中，得到多条以业务流程为单位的线性链表。

步骤2：设置一个变量锁，得到在页面跳转标志位，页面跳转标志位包括程序回退和路由跳转；

步骤2主要包括以下步骤：

步骤2.1设置一个变量锁(变量锁为一个变量标志位)；

步骤2.2设置变量锁默认值为程序回退。

步骤3：将前端路由方法进行重写，得到能标志页面跳转为路由跳转的路由方法；

步骤3.1：记录原有新增路由方法、替换当前路由方法，路由跳转时会自动触发以上方法，将跳转的页面路由信息传入到以上方法中；

步骤3.2：重新定义新增路由方法，在方法中，先继承步骤3.1记录的原有新增路由方法，再将步骤2.1的变量锁置为路由跳转，即标志此页面跳转为路由跳转；

步骤3.3重新定义替换当前路由方法，在方法中，先继承步骤3.1记录的替换当前路由方法，再将步骤2.1的变量锁置为路由跳转，即标志此页面跳转为路由跳转。

步骤4：模拟浏览器历史堆栈的管理，得到H5浏览历史记录栈；

步骤4.1：创建H5浏览历史记录栈，用于存储H5页面的跳转信息，包括：

4.1.1 H5页面历史浏览记录；

4.1.2当前页面指针位置；

提供增加、修改H5页面历史浏览记录，当前页面指针前移、指针后移、获取当前指针位置方法，指针始终指向当前浏览的页面，前移指针即路由跳转页面，后移指针即回退页面；

步骤4.2：修改步骤3.2新增路由方法，模拟历史浏览记录入栈的情况：

4.2.1将步骤3.2继承自步骤3.1的原有新增路由方法的传入值(跳转的页面路由信息)存储到4.1.1H5页面历史浏览记录中；

4.2.3将当前页面指针前移；

步骤4.3修改步骤3.3替换当前路由方法，模拟历史浏览记录替换最近项的情况：

4.3.1将H5页面历史浏览记录中最近添加的项替换为将步骤3.2继承自步骤3.1的替换当前路由方法的传入值；(跳转的页面路由信息)

4.3.2当前页面指针位置不变。

步骤5：注册全局路由守卫，拦截页面跳转，判断标志是否为程序回退，判断当前页面路由为线性链表的首尾节点，满足以上条件时，跳转到指定页面，最终实现H5页面动态回退。

步骤5.1注册全局路由守卫，拦截页面跳转(路由跳转和程序回退)，根据变量锁的值判断此页面跳转是路由跳转还是程序跳转：

5.1.1若为路由跳转，放开拦截，仅将步骤2.1的变量锁的值修改为程序回退，表示该H5页面为已访问；

5.1.2若为程序回退，判断当前H5页面路由信息存在于哪条线性链表的节点中，找到当前H5页面路由所在的线性链表，匹配当前H5路由信息是否为此线性链表的首尾节点，若是，根据步骤1.1存储的该H5应用流程结束后应跳转的页面路由信息，跳转到相应页面，再将步骤2.1中变量锁的值置为路由跳转；若否，放开拦截，执行原浏览器历史回退跳转，将4.1.2当前页面指针位置后移。

以上仅是本发明众多具体应用范围中的代表性实施例，对本发明的保护范围不构成任何限制。凡采用变换或是等效替换而形成的技术方案，均落在本发明权利保护范围之内。

Claims (7)

1.一种基于浏览器堆栈管理的H5页面动态回退方法，其特征在于，包括以下步骤：

步骤1：对H5应用各业务流程进行线性链表式存储，得到多条以业务流程为单位的线性链表；

步骤2：设置一个变量锁，得到在页面跳转标志位,页面跳转标志位包括程序回退和路由跳转；

步骤3：将前端路由方法进行重写，得到能标志页面跳转为路由跳转的路由方法；

步骤4：模拟浏览器历史堆栈的管理，得到H5浏览历史记录栈；

步骤5：注册全局路由守卫，拦截页面跳转，判断标志是否为程序回退，判断当前页面路由为线性链表的首尾节点，满足以上条件时，跳转到指定页面，最终实现H5页面动态回退。

2.根据权利要求1所述的一种基于浏览器堆栈管理的H5页面动态回退方法，其特征在于：步骤1主要包括以下步骤：

步骤1.1：创建一个线性链表类，存储H5应用业务流程页面路由信息及每个流程结束后应跳转的页面路由信息，将业务流程中各H5页面的路由信息以流程为单位存储在此线性链表中；

步骤1.2：结合H5应用业务流程，以业务流程为单位，实例化多个线性链表类，将H5应用业务流程页面路由信息动态添加到实例化后的各线性链表类中，得到多条以业务流程为单位的线性链表。

3.根据权利要求1所述的一种基于浏览器堆栈管理的H5页面动态回退方法，其特征在于：

步骤2主要包括以下步骤：

步骤2.1设置一个变量锁；

步骤2.2设置变量锁默认值为程序回退。

4.根据权利要求1所述的一种基于浏览器堆栈管理的H5页面动态回退方法，其特征在于：步骤3主要包括以下步骤：

步骤3.1：记录原有新增路由方法、替换当前路由方法，路由跳转时会自动触发以上方法，将跳转的页面路由信息传入到以上方法中；

步骤3.2：重新定义新增路由方法，在方法中，先继承步骤3.1记录的原有新增路由方法，再将步骤2.1的变量锁置为路由跳转，即标志此页面跳转为路由跳转；

步骤3.3重新定义替换当前路由方法，在方法中，先继承步骤3.1记录的替换当前路由方法，再将步骤2.1的变量锁置为路由跳转，即标志此页面跳转为路由跳转。

5.根据权利要求2所述的一种基于浏览器堆栈管理的H5页面动态回退方法，其特征在于：步骤4主要包括以下步骤：

步骤4.1：创建H5浏览历史记录栈，用于存储H5页面的跳转信息，包括:

4.1.1H5页面历史浏览记录；

4.1.2当前页面指针位置；

步骤4.2：修改步骤3.2新增路由方法，模拟历史浏览记录入栈的情况：

4.2.1将步骤3.2继承自步骤3.1的原有新增路由方法的传入值存储到4.1.1的H5页面历史浏览记录中；

4.2.3将当前页面指针前移；

步骤4.3修改步骤3.3替换当前路由方法，模拟历史浏览记录替换最近项的情况：

4.3.1将H5页面历史浏览记录中最近添加的项替换为将步骤3.2继承自步骤3.1的替换当前路由方法的传入值；

4.3.2当前页面指针位置不变。

6.根据权利要求1所述的一种基于浏览器堆栈管理的H5页面动态回退方法，步骤5主要包括：

步骤5.1注册全局路由守卫，拦截页面跳转，根据变量锁的值判断此页面跳转是路由跳转还是程序跳转：

5.1.1若为路由跳转，放开拦截，仅将步骤2.1的变量锁的值修改为程序回退，表示该H5页面为已访问；

5.1.2若为程序回退，判断当前H5页面路由信息存在于哪条线性链表的节点中，找到当前H5页面路由所在的线性链表，匹配当前H5路由信息是否为此线性链表的首尾节点，若是，根据步骤1.1存储的该H5应用流程结束后应跳转的页面路由信息，跳转到相应页面，再将步骤2.1中变量锁的值置为路由跳转；若否，放开拦截，执行原浏览器历史回退跳转，将4.1.2当前页面指针位置后移。

7.一种基于浏览器堆栈管理的H5页面动态回退装置，其特征在于，包括以下模块：

线性链表模块：对H5应用各业务流程进行线性链表式存储，得到多条以业务流程为单位的线性链表；

变量锁模块：设置一个变量锁，得到在页面跳转标志位,页面跳转标志位包括程序回退和路由跳转；

前端路由改写模块：将前端路由方法进行重写，得到能标志页面跳转为路由跳转的路由方法；

历史堆栈的管理模块：模拟浏览器历史堆栈的管理，得到H5浏览历史记录栈；

页面跳转拦截模块：注册全局路由守卫，拦截页面跳转，判断标志是否为程序回退，判断当前页面路由为线性链表的首尾节点，满足以上条件时，跳转到指定页面，最终实现H5页面动态回退。