一种同域跨单页应用无感知跳转方法及装置与流程

本公开涉及计算机技术领域，尤其涉及一种同域跨单页应用无感知跳转方法及装置。

背景技术：

web页面之间相互跳转是互联网最基本的一个功能。在多页面web应用中，是由服务端控制路由，每次地址栏改变都会向服务端发送新的页面请求更新当前页面，页面跳转使用a标签或者window.location.href跳转；在单页面web应用中，是由前端控制路由，每次地址栏改变不会发送新的页面请求，页面跳转通过调用window.historyapi来实现，也即在只改变地址栏不刷新页面的前提下，从当前html中把页面上某块局部内容展示出来。

一个功能繁杂的复杂应用，实际可能是由多页面web应用和单页面web应用等多个这样的子系统组成的。在这些子系统与子系统之间改变路径跳转时，主要是采用后端控制路由的跳转方式；然而，单页面web应用是通过前端控制路由实现跳转的。针对于此，在页面跳转中需要为每个跳转的地方设置判断条件，用于判断路径是跳往子系统内部还是外部。但是，该方式严重消耗开发逻辑，并容易产生错误，诸如：如果判断是跳往子系统外部的地址，却错误的使用了前端路由跳转，就会出现页面找不到的情况。

技术实现要素：

为了解决上述技术问题或者至少部分地解决上述技术问题，本公开提供了一种同域跨单页应用无感知跳转方法及装置。

本公开提供了一种同域跨单页应用无感知跳转方法，包括：当执行javascript代码时，将historyapi的原始push方法存放于变量中；基于存储的变量构造函数，得到historyapi的自定义push方法；基于所述自定义push方法，在当前页面需要跳转到目标页面时，判断所述目标页面的跳转目标地址是否与预设的白名单地址相匹配；根据匹配结果调用不同的跳转方式，并基于所述跳转方式从所述当前页面跳转到所述目标页面。

进一步，所述根据匹配结果调用不同的跳转方式，并基于所述跳转方式从所述当前页面跳转到所述目标页面的步骤，包括：当匹配结果为所述跳转目标地址与预设的白名单地址匹配时，通过调用window.location.href将所述当前页面的地址改变为所述跳转目标路径，以从所述当前页面跳转到所述目标页面。

进一步，所述根据匹配结果调用不同的跳转方式，并基于所述跳转方式从所述当前页面跳转到所述目标页面的步骤，包括：当匹配结果为所述跳转目标地址与预设的白名单地址不匹配时，通过调用存放于变量中所述原始push方法将所述当前页面的地址改变为所述跳转目标路径，以从所述当前页面跳转到所述目标页面。

进一步，所述方法还包括：通过添加和/或删除的操作设置有效的外部跳转的白名单地址；其中，所述白名单地址使用数值列表存放，且所述数值列为字符串或正则表达式。

进一步，所述方法还包括：响应于用户操作，根据所述用户操作获取url请求对应的所述目标页面，并执行所述目标页面上的javascript代码。

本公开提供了一种同域跨单页应用无感知跳转装置，包括：方法存放模块，用于当执行javascript代码时，将historyapi的原始push方法存放于变量中；方法构造模块，用于基于存储的变量构造函数，得到historyapi的自定义push方法；判断模块，用于基于所述自定义push方法，在当前页面需要跳转到目标页面时，判断所述目标页面的跳转目标地址是否与预设的白名单地址相匹配；页面跳转模块，用于根据匹配结果调用不同的跳转方式，并基于所述跳转方式从所述当前页面跳转到所述目标页面。

进一步，所述页面跳转模块还用于：当匹配结果为所述跳转目标地址与预设的白名单地址匹配时，通过调用window.location.href将所述当前页面的地址改变为所述跳转目标路径，以从所述当前页面跳转到所述目标页面。

进一步，所述页面跳转模块还用于：当匹配结果为所述跳转目标地址与预设的白名单地址不匹配时，通过调用存放于变量中所述原始push方法将所述当前页面的地址改变为所述跳转目标路径，以从所述当前页面跳转到所述目标页面。

进一步，所述装置还包括：白名单设置模块，用于通过添加和/或删除的操作设置有效的外部跳转的白名单地址；其中，所述白名单地址使用数值列表存放，且所述数值列为字符串或正则表达式。

进一步，所述装置还包括：js执行模块，用于响应于用户操作，根据所述用户操作获取url请求对应的所述目标页面，并执行所述目标页面上的javascript代码。

本公开实施例提供的技术方案与现有技术相比具有如下优点：

本公开提供了一种同域跨单页应用无感知跳转方法及装置，包括：当执行javascript代码时，将historyapi的原始push方法存放于变量中；基于存储的变量构造函数，得到historyapi的自定义push方法；基于自定义push方法，在当前页面需要跳转到目标页面时，判断目标页面的跳转目标地址是否与预设的白名单地址相匹配；根据匹配结果调用不同的跳转方式，并基于跳转方式从当前页面跳转到目标页面。本公开基于预设的白名单地址，可以无需考虑将要跳转的路径是外部的还是内部的，并根据路径的匹配结果来调用不同的跳转方式，上述方式无需在所有页面跳转的地方做条件判断，可以有效减少开发逻辑和规避不必要产生的错误。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本公开实施例所述一种同域跨单页应用无感知跳转方法流程图；

图2为本公开实施例所述另一种同域跨单页应用无感知跳转方法流程图；

图3为本公开实施例所述一种同域跨单页应用无感知跳转装置的结构框图。

具体实施方式

为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。

本实施例提供了一种同域跨单页应用无感知跳转方法，参照图1所示的同域跨单页应用无感知跳转方法流程图，该方法主要包括如下步骤：

步骤s102，当执行javascript代码时，将historyapi的原始push方法存放于变量中；

步骤s104，基于存储的变量构造函数，得到historyapi的自定义push方法；

步骤s106，基于自定义push方法，在当前页面需要跳转到目标页面时，判断目标页面的跳转目标地址是否与预设的白名单地址相匹配；

步骤s108，根据匹配结果调用不同的跳转方式，并基于跳转方式从当前页面跳转到目标页面。

本步骤s108的具体描述可参照图2中的步骤s208和步骤s210。

本实施例提供的同域跨单页应用无感知跳转方法，基于预设的白名单地址，可以无需考虑将要跳转的路径是外部的还是内部的，并根据路径的匹配结果来调用不同的跳转方式，上述方式无需在所有页面跳转的地方做条件判断，可以有效减少开发逻辑和规避不必要产生的错误。

为了更好地理解上述同域跨单页应用无感知跳转方法，下面对本发明实施例提供的方案进行详细描述。

参照图2，其展示了本实施例提供的同域跨单页应用无感知跳转方法的详细流程图，如图2所示，该方法可包括以下步骤：

步骤s202，当执行javascript代码时，将historyapi的原始push方法存放于变量中。

在实际应用中，可以首先响应于用户操作，根据用户操作获取url请求对应的目标页面，并执行目标页面上的javascript代码。然后在页面开始执行javascript代码时，修改浏览器historyapi，也即先将historyapi的原始push方法存储在一个变量中。

步骤s204，基于存储的变量构造函数，得到historyapi的自定义push方法。具体的，构造一个新函数覆盖原有的histroyapipush方法，所构造的新函数即为historyapi的自定义push方法

步骤s206，基于自定义push方法，在当前页面需要跳转到目标页面时，判断目标页面的跳转目标地址是否与预设的白名单地址相匹配。

在白名单地址的可能设置方式中，可以通过添加和/或删除的操作设置有效的外部跳转的白名单地址；诸如用户可通过sql语句或者使用gs_guczenith工具添加有效用户白名单地址，也可以使用gs_guczenith工具删除不再使用的用户白名单地址，以限制指定用户只能从限定的ip访问数据库。其中，白名单地址使用数值列表存放，且数值列为字符串或正则表达式。

对于覆盖histroyapi之后的自定义push方法，其逻辑具体如下所示：当调用自定义histroy.push之后读取将要跳转的地址(也即跳转目标地址)；查看该跳转目标地址在预设的白名单地址中是否存在匹配的地址；当匹配结果为跳转目标地址与预设的白名单地址匹配时，执行如下步骤s208；当匹配结果为跳转目标地址与预设的白名单地址不匹配时，执行如下步骤s210。

步骤s208，通过调用window.location.href将当前页面的地址改变为跳转目标路径，以从当前页面跳转到目标页面。

步骤s210，通过调用存放于变量中原始push方法将当前页面的地址改变为跳转目标路径，以从当前页面跳转到目标页面。具体的，historyapi允许在不刷新页面的前提下，通过脚本语言的方式来进行页面上某块局部内容的更新，将当前页面的地址切换到目标页面的跳转目标路径，以使显示的页面为目标页面，从而实现在不刷新页面的前提下将浏览器中的当前页面切换到目标页面的功能。

上述实施例提供的同域跨单页应用无感知跳转方法，可以用于实现前端路由与后端路由混合情况下，同域名下多个web单页面应用之间无缝跳转控制。该方法对原有浏览器historyapi功能进行更改，通过传入的配置外部白名单地址来决定使用historyapi跳转还是使用window.location.href跳转，重定向使用释放进行地址替换，可以避免产生多余地址历史记录。

该方法在设置正确的白名单地址的情况下，能够中心化管理哪些路径向外部子系统跳转，无需在所有跳转切换的地方做条件判断，再也无需关心将要跳转的路径是外部的还是内部的了，可以减少开发逻辑和规避不必要产生的错误；另外中心化的配置也方便后续的维护。

本实施例还提供一种同域跨单页应用无感知跳转装置，用于实现上述实施例中的同域跨单页应用无感知跳转方法。参照图3所示的同域跨单页应用无感知跳转装置的结构框图，该装置包括：

方法存放模块302，用于当执行javascript代码时，将historyapi的原始push方法存放于变量中；

方法构造模块304，用于基于存储的变量构造函数，得到historyapi的自定义push方法；

判断模块306，用于基于自定义push方法，在当前页面需要跳转到目标页面时，判断目标页面的跳转目标地址是否与预设的白名单地址相匹配；

页面跳转模块308，用于根据匹配结果调用不同的跳转方式，并基于跳转方式从当前页面跳转到目标页面。

在一种实施例中，上述页面跳转模块308还用于：

当匹配结果为跳转目标地址与预设的白名单地址匹配时，通过调用window.location.href将当前页面的地址改变为跳转目标路径，以从当前页面跳转到目标页面。

在一种实施例中，上述页面跳转模块308还用于：

当匹配结果为跳转目标地址与预设的白名单地址不匹配时，通过调用存放于变量中原始push方法将当前页面的地址改变为跳转目标路径，以从当前页面跳转到目标页面。

在一种实施例中，上述同域跨单页应用无感知跳转装置还包括：

白名单设置模块(图中未示出)，用于通过添加和/或删除的操作设置有效的外部跳转的白名单地址；其中，白名单地址使用数值列表存放，且数值列为字符串或正则表达式。

在一种实施例中，上述同域跨单页应用无感知跳转装置还包括：

js执行模块(图中未示出)，用于响应于用户操作，根据用户操作获取url请求对应的目标页面，并执行目标页面上的javascript代码。

本实施例所提供的装置，其实现原理及产生的技术效果和前述实施例二相同，为简要描述，本实施例部分未提及之处，可参考前述方法实施例中相应内容。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。