[发明专利]一种动态调整H5页面高度的控制方法及装置

说明书

本发明提供了一种动态调整H5页面高度的控制方法，其特征在于，包括如下步骤：a.统计H5页面中全部动态展示区域F；b.对所述动态展示区域F中的每一个动态展示区域的高度进行累加计算，并获取H5页面最终累加高度fn，其中，所述n≥1；c.将所述最终累加高度fn与设备显示页面中允许H5页面显示的静态区域高度T进行对比，并将两者间最小值作为所述H5页面当前显示高度，其中，所述n≥1。本发明能够实现嵌入的H5页面在指定展示区域内的动态调整，进而实现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；