页面展示方法及装置制造方法及图纸

本发明专利技术公开了一种页面展示方法及装置，涉及人工智能技术领域，该方法包括：使用父页面的文档句柄，监听父页面的滚动事件；所述父页面基于iframe加载与父页面同源的所述子页面；根据所述滚动事件，获取父页面的滚动高度；根据父页面的滚动高度，计算子页面的UI组件边距；使用JavaScript脚本，根据所述UI组件边距，对子页面中UI组件的样式进行动态调整。本发明专利技术可解决现阶段在使用Iframe整合父子页面的场景下，子页面的固定布局或者绝对布局方式的元素位置定位相对整个页面不准确的问题，用以提升页面中UI组件展示的准确性，改善用户体验。改善用户体验。改善用户体验。

【技术实现步骤摘要】
页面展示方法及装置


[0001]本专利技术涉及人工智能
，尤其涉及页面展示方法及装置。

技术介绍

[0002]本部分旨在为权利要求书中陈述的本专利技术实施例提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
[0003]一般来说，公司内部都会有一个内部的门户网站，用来作为各个应用服务的入口。而门户网站服务本身和各个子页面之间是独立运行和维护的。主应用内部嵌入子页面时，通常会使用iframe标签的方式将子页面加载进来。
[0004]但是这种方案会有一个明显的问题，即：子页面内的绝对布局元素或者固定布局元素(如页面弹窗布局的元素)无法按照父页面布局调整，会导致子页面内的弹窗无法正确显示出来，尤其是需要在弹窗中填写的表单，当表单内容较多时，显示问题会更突出。
[0005]上述问题出现的根本原因是子页面开发过程中，内部绝对布局和固定布局方式的元素，是相对于子页面本身的位置布局的，没有将父页面因素考虑进去。
[0006]目前，为了解决上述问题，一般在父页面上提供弹窗组件，并利用消息机制，当子页面需要弹窗时，发送消息和展示数据到父页面，在父页面上弹出弹窗组件。
[0007]但上述已有方案的缺点是，当子页面弹出框的内容包含比较多的子页面业务处理逻辑时，父页面是很难提供一种组件机制来完成这个任务的。
[0008]因此，现阶段在使用Iframe整合父子页面的场景下，子页面的固定布局或者绝对布局方式的元素位置定位相对整个页面不准确的问题，难以得到良好的解决。

技术实现思路

[0009]本专利技术实施例提供一种页面展示方法，用以提升页面中UI组件展示的准确性，改善用户体验，该方法包括：
[0010]使用父页面的文档句柄，监听父页面的滚动事件；所述父页面基于iframe加载与父页面同源的所述子页面；
[0011]根据所述滚动事件，获取父页面的滚动高度；
[0012]根据父页面的滚动高度，计算子页面的UI组件边距；
[0013]使用JavaScript脚本，根据所述UI组件边距，对子页面中UI组件的样式进行动态调整。
[0014]本专利技术实施例还提供一种页面展示装置，用以提升页面中UI组件展示的准确性，改善用户体验，该装置包括：
[0015]滚动事件监听模块，用于使用父页面的文档句柄，监听父页面的滚动事件；所述父页面基于iframe加载与父页面同源的所述子页面；
[0016]滚动高度获取模块，用于根据所述滚动事件，获取父页面的滚动高度；
[0017]UI组件边距计算模块，用于根据父页面的滚动高度，计算子页面的UI组件边距；
[0018]动态调整模块，用于使用JavaScript脚本，根据所述UI组件边距，对子页面中UI组件的样式进行动态调整。
[0019]本专利技术实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述页面展示方法。
[0020]本专利技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述页面展示方法。
[0021]本专利技术实施例还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现上述页面展示方法。
[0022]本专利技术实施例中，使用父页面的文档句柄，监听父页面的滚动事件；所述父页面基于iframe加载与父页面同源的所述子页面；根据所述滚动事件，获取父页面的滚动高度；根据父页面的滚动高度，计算子页面的UI组件边距；使用JavaScript脚本，根据所述UI组件边距，对子页面中UI组件的样式进行动态调整，从而可依据以父页面的滚动高度计算出的子页面的UI组件边距，实现了基于父页面的滚动、对子页面中UI组件样式进行动态调整的目的，在子页面的开发过程中考虑到了父页面中滚动事件，对子页面中UI组件的展示位置的实时影响，解决了现阶段在使用Iframe整合父子页面的场景下，子页面的固定布局或者绝对布局方式的元素位置定位相对整个页面不准确的问题，提升了页面中UI组件展示的准确性，改善了用户体验。
附图说明
[0023]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
[0024]图1为本专利技术实施例中一种父页面和子页面的展示实例的示意图；
[0025]图2为本专利技术实施例中一种父页面和子页面的展示实例的示意图；
[0026]图3为本专利技术实施例中一种父页面和子页面的展示实例的示意图；
[0027]图4为本专利技术实施例中一种页面展示方法的流程示例图；
[0028]图5为本专利技术实施例中一种页面展示方法的具体示例图；
[0029]图6为本专利技术实施例中一种页面展示装置的结构示例图；
[0030]图7为本专利技术实施例中用于页面展示的计算机设备示意图。
具体实施方式
[0031]为使本专利技术实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本专利技术实施例做进一步详细说明。在此，本专利技术的示意性实施例及其说明用于解释本专利技术，但并不作为对本专利技术的限定。
[0032]本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至
少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
[0033]在本说明书的描述中，所使用的“包含”、“包括”、“具有”、“含有”等，均为开放性的用语，即意指包含但不限于。参考术语“一个实施例”、“一个具体实施例”、“一些实施例”、“例如”等的描述意指结合该实施例或示例描述的具体特征、结构或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。各实施例中涉及的步骤顺序用于示意性说明本申请的实施，其中的步骤顺序不作限定，可根据需要作适当调整。
[0034]本申请技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。
[0035]本专利技术实施例涉及下列名词，如下进行解释：
[0036]iframe:：一种HTML标签，用作在网页文档中传进包含另外一个网页文档的内联框架。
[0037]父页面：多个应用中作为主框架或者外层框架的应用服务，用来包裹其他子页面的展示。
[0038]子页面：相对父页面来说，可以独立完成单独功能本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面展示方法，其特征在于，应用于子页面，包括：使用父页面的文档句柄，监听父页面的滚动事件；所述父页面基于iframe加载与父页面同源的所述子页面；根据所述滚动事件，获取父页面的滚动高度；根据父页面的滚动高度，计算子页面的UI组件边距；使用JavaScript脚本，根据所述UI组件边距，对子页面中UI组件的样式进行动态调整。2.如权利要求1所述的方法，其特征在于，还包括：利用iframe的消息机制，将子页面的页面高度传给父页面；所述父页面用于将iframe的高度，设置为子页面的页面高度。3.如权利要求1所述的方法，其特征在于，根据父页面的滚动高度，计算子页面的UI组件边距，包括：基于CSS的transform属性,根据父页面的滚动高度，计算子页面的UI组件的竖直方向偏移量；根据子页面的UI组件的竖直方向偏移量，和子页面的UI组件的初始边距，计算子页面的UI组件边距。4.如权利要求1所述的方法，其特征在于，使用JavaScript脚本，根据所述UI组件边距，对子页面中UI组件的样式进行动态调整，包括：将所述UI组件边距和预设置的css样式代码进行拼接，得到目标css样式标签；使用JavaScript脚本，将所述目标css样式标签，插入至子页面的head标签；所述head标签用于动态调整子页面中UI组件的样式。5.一种页面展示装置，其特征在于，应用于子页面，包括：滚动事件监听模块，用于使用父页面的文档句柄，监听父页面的滚动事件；所述父页面基于iframe加载与父页面同源的所述子页面；滚动高度获取模块，用于根据所述滚动事件，获取父页面的滚动高度；U...

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