CN112905938A

CN112905938A - 一种动态调整h5页面高度的控制方法及装置

Info

Publication number: CN112905938A
Application number: CN202110205440.0A
Authority: CN
Inventors: 廖艳坤
Original assignee: Shanghai 2345 Network Technology Co ltd
Current assignee: Shanghai 2345 Network Technology Co ltd
Priority date: 2021-02-24
Filing date: 2021-02-24
Publication date: 2021-06-04

Abstract

本发明提供了一种动态调整H5页面高度的控制方法，其特征在于，包括如下步骤：a.统计H5页面中全部动态展示区域F；b.对所述动态展示区域F中的每一个动态展示区域的高度进行累加计算，并获取H5页面最终累加高度fn，其中，所述n≥1；c.将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度，其中，所述n≥1。本发明能够实现嵌入的H5页面在指定展示区域内的动态调整，进而实现H5页面与原生页面的相适应的混排，本发明使用简单、功能强大、具有极高的商业价值。

Description

一种动态调整H5页面高度的控制方法及装置

技术领域

本发明属于移动互联网领域，特别涉及一种动态调整H5页面高度的控制方法及装置。

背景技术

HTML5是HTML的第五个版本，HTML5赋予网页更好的意义和结构，基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，因为可以将一些常用、不常更新的内容存储在本地。早在2014年，H5在互动营销方面已经崭露头角，火爆的H5小游戏刷屏盛行，H5这个词第一个以这样特别的方式正式出现在大众的面前，众所周知的是，H5虽然是一个网页的形式，但是主要是靠微信扫码、公众号、微信群和朋友圈等渠道传播，恰逢微信的发展势头如火如荼，H5这种新型的广告形式在一种程度上推动了H5技术的发展。

在实际应用中，若需要在一个设备显示页面的顶部指定区域嵌入一个H5页面，而设备显示页面中本身即存在原生页面信息，当嵌入所述H5页面时，会因为H5的高度问题而使得原生页面信息的显示出现问题，例如，当H5页面的高度过高时，则会占用原生页面区域而使得原生页面信息无法正常显示。如何对H5页面的高度进行实时调整，以使得每个H5页面在进行页面嵌入时能够实现原生页面与H5页面内容混排成为了目前亟待解决的技术问题。

目前在现有的技术中，并没有一种能够解决上述技术问题的技术方案，具体地，缺少一种动态调整H5页面高度的控制方法及装置。

发明内容

针对现有技术存在的技术缺陷，本发明的目的是提供一种动态调整H5页面高度的控制方法及装置，根据本发明的一个方面，提供了一种动态调整H5页面高度的控制方法，包括如下步骤：

a.统计H5页面中全部动态展示区域F；

b.对所述动态展示区域F中的每一个动态展示区域的高度进行累加计算，并获取H5页面最终累加高度fn，其中，所述n≥1；

c.将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度，其中，所述n≥1。

优选地，在所述步骤b中，通过如下步骤获取H5页面最终累加高度fn：

监听H5页面中动态展示区域F的动态渲染过程，动态获取网页元素累加高度，待全部动态展示区域F加载完成时，获取H5页面最终累加高度fn，其中，所述n≥1。

优选地，所述步骤c包括如下步骤：

c1：当所述最终累加高度fn低于所述静态区域高度T时，动态设置所述H5页面当前显示高度为fn；

c2：当所述最终累加高度fn不低于所述静态区域高度T时，动态设置所述H5页面当前显示高度为T。

优选地，通过修改所述H5页面高度属性值,动态设置所述H5页面当前显示高度。

优选地，基于设备参数计算设备显示页面中允许H5页面显示的静态区域高度T。

根据本发明的另一个方面，提供了一种动态调整H5页面高度的控制装置，包括：

第一处理装置：统计H5页面中全部动态展示区域F；

第一获取装置：对所述动态展示区域F中的每一个动态展示区域的高度进行累加计算，并获取H5页面最终累加高度fn，其中，所述n≥1；

第二处理装置：将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度，其中，所述n≥1。

优选地，所述第二处理装置包括：

第三处理装置：当所述最终累加高度fn低于所述静态区域高度T时，通过修改所述H5页面高度属性值，动态设置所述H5页面当前显示高度为fn；

第四处理装置：当所述最终累加高度fn不低于所述静态区域高度T时，通过修改所述H5页面高度属性值，动态设置所述H5页面当前显示高度为T。

本发明提供了一种动态调整H5页面高度的控制方法，通过统计H5页面中全部动态展示区域F；对所述动态展示区域F中的每一个动态展示区域的高度进行累加计算，并获取H5页面最终累加高度fn，其中；将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度，其中，所述n≥1。本发明能够实现嵌入的H5页面在指定展示区域内的动态调整，进而实现H5页面与原生页面的相适应的混排，本发明使用简单、功能强大、具有极高的商业价值。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1示出了本发明的具体实施方式的，一种动态调整H5页面高度的控制方法的具体流程示意图；

图2示出了本发明的第一实施例的，在一种动态调整H5页面高度的控制方法中，将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度的具体流程示意图；以及

图3示出了本发明的另一具体实施方式的，一种动态调整H5页面高度的控制装置的模块连接示意图。

具体实施方式

为了更好的使本发明的技术方案清晰的表示出来，下面结合附图对本发明作进一步说明。

图1示出了本发明的具体实施方式的，一种动态调整H5页面高度的控制方法的具体流程示意图；其用于在嵌入H5页面后，动态调整H5页面的高度进而保证展示页面中其他页面内容的完整显示，具体地，在本发明中所公开的动态调整H5页面高度的控制方法，包括如下步骤：

首先，进入步骤S101，统计H5页面中全部动态展示区域F，在这样的实施例中，即确定需要嵌入的H5页面，并获取到所述H5页面中需要进行动态展示的全部动态展示区域F具体参数。

然后，进入步骤S102，对所述动态展示区域F中的每一个动态展示区域的高度进行累加计算，并获取H5页面最终累加高度fn，其中，所述n≥1，本领域技术人员理解，监听H5页面中动态展示区域F的动态渲染过程，动态获取网页元素累加高度，待全部动态展示区域F加载完成时，获取H5页面最终累加高度fn，其中，所述n≥1，所述H5页面最终累加高度fn即为在自然伸展状态下，在设备显示页面中允许H5页面显示的静态区域高度T足够高的前提下，所述H5页面最终能够展示的高度。

最后，进入步骤S103，将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度，其中，所述n≥1，在这样的实施例中，本发明的设备显示页面中存在允许H5页面显示的静态区域高度T以及不允许H5页面显示的区域，不允许H5页面显示的区域即为原生页面展示区域，而这样的区域的高度与原生页面展示区域的高度、设备自身允许显示页面的高度等相关，例如，在本发明旨在设备显示页面的顶部的指定区域嵌入H5页面，通过控制H5部分的高度，使整个页面下方仍然有空间显示原生页面内容，从而达到原生页面与H5页面内容混排的目的。

在一个优选地实施例中，若设备显示页面可以显示的高度为100px，设备显示页面中允许H5页面显示的静态区域高度T为40px，即H5页面只能展示在这样的40px的高度内，相应地，本发明上述中所描述的其他广告、原生页面内容等信息则显示在60px的高度内，然而H5页面的内容是动态的，实际内容的高度可能超过40px，因此要动态的累加计算页面高度Fn是否超过40px，如果不超过40px，则按H5页面原始高度完全显示；如果超过40px，则将H5页面动态设置为最大40px，以保证下方的原生内容能够正常显示。

进一步地，基于设备参数计算设备显示页面中允许H5页面显示的静态区域高度T，所述设备参数即为终端的显示区域的长、宽、高、分辨率等参数，基于设备参数从而确定设备显示页面中允许页面显示区域高度，基于其他广告、原生页面内容设置在不允许H5页面显示的区域的高度中，所述不允许H5页面显示的区域的高度可以由其他广告、原生页面内容设置来决定，也可以由设备自身设置，进一步地，基于设备显示页面中允许页面显示区域高度、不允许H5页面显示的区域的高度从而确定设备显示页面中允许H5页面显示的静态区域高度T，而在其他实施例中，所述设备显示页面中允许H5页面显示的静态区域高度T也可以由人为设定，这都不影响本发明的具体实施方案，在此不予赘述。

图2示出了本发明的第一实施例的，在一种动态调整H5页面高度的控制方法中，将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度的具体流程示意图，具体地，图2主要示出的是步骤S103的详细流程，包括如下步骤：

首先，进入步骤S1031，当所述最终累加高度fn低于所述静态区域高度T时，动态设置所述H5页面当前显示高度为fn，即当所述H5页面的高度低于所述静态区域高度T时，则可以将所述H5页面在允许H5页面显示的静态区域高度T内完全显示，进而动态设置所述H5页面当前显示高度为当前H5页面的高度fn。

作为与步骤S1031相配合的关联步骤S1032，给出了一种当所述最终累加高度fn不低于所述静态区域高度T时的具体流程，即当所述最终累加高度fn不低于所述静态区域高度T时，即所述H5页面当前显示高度高出所述静态区域高度T，则需要对H5页面当前显示高度进行限制，而限制的方式则是给出当前H5页面显示高度的最大值，即动态设置所述H5页面当前显示高度为T。

进一步地，本发明通过修改所述H5页面高度属性值进而动态设置所述H5页面当前显示高度。

图3示出了本发明的另一具体实施方式的，一种动态调整H5页面高度的控制装置的模块连接示意图，进一步地，本发明公开了一种动态调整H5页面高度的控制装置，其采用图1以及图2中所示出的控制方法，包括第一处理装置1：统计H5页面中全部动态展示区域F，所述第一处理装置1的工作原理可以参考前述步骤S101，在此不予赘述。

进一步地，所述动态调整H5页面高度的控制装置还包括第一获取装置2：对所述动态展示区域F中的每一个动态展示区域的高度进行累加计算，并获取H5页面最终累加高度fn，其中，所述n≥1，所述第一获取装置2的工作原理可以参考前述步骤S102，在此不予赘述。

进一步地，所述动态调整H5页面高度的控制装置还包括第二处理装置3：将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度，其中，所述n≥1，所述第二处理装置3的工作原理可以参考前述步骤S103，在此不予赘述。

进一步地，所述第二处理装置3包括第三处理装置31：当所述最终累加高度fn低于所述静态区域高度T时，通过修改所述H5页面高度属性值，动态设置所述H5页面当前显示高度为fn，所述第三处理装置31的工作原理可以参考前述步骤S1031，在此不予赘述。

进一步地，所述第二处理装置3还包括第四处理装置32：当所述最终累加高度fn不低于所述静态区域高度T时，通过修改所述H5页面高度属性值，动态设置所述H5页面当前显示高度为T，所述第四处理装置32的工作原理可以参考前述步骤S1032，在此不予赘述。

需要说明的是，上述各装置实施例的具体实施方式与前述对应方法实施例的具体实施方式相同，在此不再赘述。综上所述，本发明的技术方案，为用户提供了一种动态调整H5页面高度的控制方法及装置，通过将所述最终累加高度fn与所述静态区域高度T对比进而实现对于H5页面的动态调整，该技术方案实现了H5页面与原生页面的相适应的混排，功能强大、自适应动态调节，提高了在具有H5页面时的调整效率。

在此提供的算法和显示不与任何特定计算机、虚拟装置或者其它设备固有相关。各种通用装置也可以与基于在此的示教一起使用。根据上面的描述，构造这类装置所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实施例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

此外，本领域技术人员理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域技术人员理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。词语“包含”不排除存在未列在权利要求中的元件或步骤。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变形或修改，这并不影响本发明的实质内容。

Claims

1.一种动态调整H5页面高度的控制方法，其特征在于，包括如下步骤：

a.统计H5页面中全部动态展示区域F；

2.根据权利要求1所述的控制方法，其特征在于，在所述步骤b中，通过如下步骤获取H5页面最终累加高度fn：

3.根据权利要求1或2所述的控制方法，其特征在于，所述步骤c包括如下步骤：

4.根据权利要求3所述的控制方法，其特征在于，通过修改所述H5页面高度属性值,动态设置所述H5页面当前显示高度。

5.根据权利要求1所述的控制方法，其特征在于，基于设备参数计算设备显示页面中允许H5页面显示的静态区域高度T。

6.一种动态调整H5页面高度的控制装置，其采用如权利要求1-5中任一项所述的控制方法，其特征在于，包括：

第一处理装置(1)：统计H5页面中全部动态展示区域F；

第一获取装置(2)：对所述动态展示区域F中的每一个动态展示区域的高度进行累加计算，并获取H5页面最终累加高度fn，其中，所述n≥1；

第二处理装置(3)：将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度，其中，所述n≥1。

7.根据权利要求6所述的控制装置，其特征在于，所述第二处理装置(3)包括：

第三处理装置(31)：当所述最终累加高度fn低于所述静态区域高度T时，通过修改所述H5页面高度属性值，动态设置所述H5页面当前显示高度为fn；

第四处理装置(32)：当所述最终累加高度fn不低于所述静态区域高度T时，通过修改所述H5页面高度属性值，动态设置所述H5页面当前显示高度为T。