一种页面显示方法、装置、设备及存储介质制造方法及图纸

本申请涉及页面开发技术领域，提供了一种页面显示方法、装置、设备及存储介质。该方法包括：检测鼠标在页面中的位置信息，其中，页面包括宿主页面和子页面；宿主页面与子页面为同级文档对象模型；根据位置信息判断宿主页面和子页面是否需要进行图层位置调整；若鼠标在页面中的第一区域，则控制宿主页面在子页面的上层进行显示；其中，第一区域和第二区域组成页面；若鼠标在第二区域，则控制子页面在宿主页面的上层进行显示。本申请通过构建宿主页面与子页面同级DOM结构，检测鼠标在页面中的位置信息，来识别用户的行为意图，进而控制宿主页面和子页面垂直层级位置切换，通过该方法可以避免宿主页面和子页面过度耦合，不便独立开发的问题。题。题。

【技术实现步骤摘要】
一种页面显示方法、装置、设备及存储介质


[0001]本申请涉及页面开发
，尤其涉及一种页面显示方法、装置、设备及存储介质。

技术介绍

[0002]随着互联网技术的发展，页面开发在各个行业比较流行，如在金融行业，常会有一些金融平台开发项目，如融资平台、理财金融平台、投资金融平台、贷款金融平台等，银行也会开发一些页面，用于个人业务办理、对公业务办理等。现有技术中，基于iframe的多系统集成比较普遍，由于它具有成本低、沙箱隔离等优点，所以也很受欢迎。但是由于iframe的沙箱，iframe与宿主页面DOM结构是完全隔离，导致iframe内的子页面在使用模态弹窗、抽屉等浮层交互时会受限于iframe的尺寸，而出现没办法全屏展示、位置不居中等问题。
[0003]为了解决此类问题，现有技术中普遍会采用下述两种方案：
[0004]1)优化UI设计，通过减少父框架UI空间占用率，让子页面的iframe尽量接近全屏，该方案缺点很明显，UI设计会追求空间而牺牲实用性；
[0005]2)宿主页面上提供对应的接口，子页面跨iframe调用，让子页面的模态弹窗、抽屉等浮层交互在宿主页面展现。该方案缺点也很明显，子页面与宿主页面过度耦合，不便于独立研发，也增加宿主页面和子页面双方的工作量和维护难度。

技术实现思路

[0006]有鉴于此，本申请实施例提供一种页面显示方法、装置、设备及存储介质，可以有效解决子页面不能全屏显示、位置不居中以及子页面与宿主页面过度耦合，不便于独立研发问题等。
[0007]第一方面，本申请实施例提供一种页面显示方法，包括：
[0008]检测鼠标在页面中的位置信息，其中，所述页面包括宿主页面和子页面；
[0009]根据所述位置信息判断所述宿主页面和所述子页面是否需要进行图层位置调整；
[0010]若所述鼠标在所述页面中的第一区域，则控制所述宿主页面在所述子页面的上层进行显示；其中，所述第一区域和第二区域组成所述页面；
[0011]若所述鼠标在所述第二区域，则控制所述子页面在所述宿主页面的上层进行显示。
[0012]在一些实施例中，在所述检测鼠标在页面中的位置信息前，还包括：
[0013]向所述子页面发送统一资源定位符；
[0014]接收所述子页面使用所述统一资源定位符引入软件开发工具包的请求；
[0015]将所述子页面与所述宿主页面合并。
[0016]在一些实施例中，所述控制所述宿主页面在所述子页面的上层进行显示包括：
[0017]将所述宿主页面设为透明，使所述子页面内容与所述宿主页面内容进行叠加显示。
[0018]在一些实施例中，所述控制所述子页面在所述宿主页面的上层进行显示包括：
[0019]将所述子页面设为透明，使所述宿主页面内容与所述子页面内容进行叠加显示。
[0020]在一些实施例中，所述根据所述位置信息判断所述宿主页面和所述子页面是否需要进行图层位置调整，包括：
[0021]若所述鼠标在第一区域，且所述宿主页面在上层，则确定不调整所述宿主页面和所述子页面的上下层位置；
[0022]若所述鼠标在第一区域，且所述宿主页面在下层，则确定调整所述宿主页面和所述子页面的上下层位置。
[0023]在一些实施例中，所述检测鼠标在页面中的位置信息包括：
[0024]通过所述软件开发工具包中的鼠标位置监听工具来监听所述鼠标在页面中的位置信息；
[0025]向所述宿主页面发送所述鼠标的所述位置信息。
[0026]在一些实施例中，所述第一区域为所述页面左侧区域和顶部区域；
[0027]所述页面左侧区域为所述宿主页面的左侧菜单栏对应的区域；
[0028]所述页面顶部区域为所述宿主页面顶部导航栏对应的区域；
[0029]所述第二区域为所述宿主页面中除所述第一区域外剩余的区域。
[0030]第二方面，本申请实施例提供一种页面显示装置，包括：
[0031]检测模块，用于检测鼠标在页面中的位置信息，其中，所述页面包括宿主页面和子页面；所述宿主页面与所述子页面为同级文档对象模型。
[0032]判断模块，用于根据所述位置信息判断所述宿主页面和所述子页面是否需要进行图层位置调整。
[0033]第一显示模块，用于若所述鼠标在所述页面中的第一区域，则控制所述宿主页面在所述子页面的上层进行显示；其中，所述第一区域和第二区域组成所述页面。
[0034]第二显示模块，用于若所述鼠标在所述第二区域，则控制所述子页面在所述宿主页面的上层进行显示。
[0035]第三方面，本申请实施例提供一种终端设备，所述终端设备包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施上述的页面显示方法。
[0036]第四方面，本申请实施例提供一种可读存储介质，其存储有计算机程序，所述计算机程序在处理器上执行时，实施上述的页面显示方法。
[0037]本申请的实施例具有如下有益效果：本申请通过构建宿主页面与子页面同级DOM结构，并通过检测鼠标在页面中的位置信息，根据所述位置信息来识别用户的行为意图，进而判断所述宿主页面和所述子页面是否需要进行图层位置调整，若所述鼠标在所述页面中的第一区域，则控制所述宿主页面在所述子页面的上层进行显示；若所述鼠标在所述第二区域，则控制所述子页面在所述宿主页面的上层进行显示。通过该方法子页面可以实现单独的开发部署，与宿主页面之间实现零耦合，不需要针对集成编写和维护额外的代码，同时，由于零耦合，子页面未来仍然可以作为单独项目，进行部署使用和迭代；另外子页面也可以避免不能全屏显示、位置不居中的问题。而且宿主页面的UI设计也不再受限于子页面，可以根据实际应用场景自由设计。
附图说明
[0038]为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
[0039]图1示出了本申请实施例的页面显示方法的第一流程示意图；
[0040]图2示出了本申请实施例的页面显示方法的第二流程示意图；
[0041]图3示出了现有技术中宿主页面与子页面的结构示意图；
[0042]图4示出了本申请实施例的宿主页面与子页面的结构示意图；
[0043]图5示出了图1中步骤S200的具体流程示意图；
[0044]图6示出了图1中步骤S100的具体流程示意图；
[0045]图7示出了本申请实施例页面显示装置的一种结构示意图。
具体实施方式
[0046]下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。
[0047]通常本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面显示方法，其特征在于，包括：检测鼠标在页面中的位置信息，其中，所述页面包括宿主页面和子页面；根据所述位置信息判断所述宿主页面和所述子页面是否需要进行图层位置调整；若所述鼠标在所述页面中的第一区域，则控制所述宿主页面在所述子页面的上层进行显示；其中，所述第一区域和第二区域组成所述页面；若所述鼠标在所述第二区域，则控制所述子页面在所述宿主页面的上层进行显示。2.根据权利要求1所述的页面显示方法，其特征在于，在所述检测鼠标在页面中的位置信息前，还包括：向所述子页面发送统一资源定位符；接收所述子页面使用所述统一资源定位符引入软件开发工具包的请求；将所述子页面与所述宿主页面合并。3.根据权利要求1所述的页面显示方法，其特征在于，所述控制所述宿主页面在所述子页面的上层进行显示包括：将所述宿主页面设为透明，使所述子页面内容与所述宿主页面内容进行叠加显示。4.根据权利要求1所述的页面显示方法，其特征在于，所述控制所述子页面在所述宿主页面的上层进行显示包括：将所述子页面设为透明，使所述宿主页面内容与所述子页面内容进行叠加显示。5.根据权利要求1所述的页面显示方法，其特征在于，所述根据所述位置信息判断所述宿主页面和所述子页面是否需要进行图层位置调整，包括：若所述鼠标在第一区域，且所述宿主页面在上层，则确定不调整所述宿主页面和所述子页面的上下层位置；若所述鼠标在第一区域，且所述宿主页面在下层，则确定调整所述宿主页面和所述子页面的上下层位置。6.根据权利要求2所述的页面显示方法，其特征在于，所述检测...

【专利技术属性】
技术研发人员：林超群，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：