[发明专利]一种元素位置的调整方法及装置

说明书

本发明公开了一种元素位置的调整方法及装置，涉及网页开发技术领域，为解决现有的页面调整时，页面中的内联框架所引入的子网页中元素位置会出现错位的问题。本发明的方法包括：采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件；如果发生所述预设操作事件，则确定所述预设操作事件的类别；如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；根据所述滚动距离对所述子网页中的预设元素的位置进行调整。本发明适合应用在元素位置的调整中。

技术领域

本发明涉及网页开发技术领域，尤其涉及一种元素位置的调整方法及装置。

背景技术

网站作为当前广泛使用的浏览媒介，已经成为人们日常生活中不可或缺的一个组成部分。在实际应用场景中，在一个网站的网页中可以引入第三方的web网页，例如可以将被引入的网页通过网页内联框架(简称内联框架)的形式在主网页中进行展示。

目前，在网页中引入第三方网页并在内联框架中进行展示时，为了避免设定内联框架高度固定时而出现滚动条影响用户体验，通常会设定内联框架高度自适应。然而，当内联框架高度自适应时，第三方网页中的弹窗等元素(或称组件)的位置只能是相对于内联框架布局的，当浏览器页面调整时，容易产生第三方网页中的弹窗等元素布局错位的情况。

发明内容

鉴于上述问题，本发明提供一种元素位置的调整方法及装置，主要目的在于对内联框架所加载的子网页中的元素位置进行调整以提高元素布局的性能。

为解决上述技术问题，第一方面，本发明提供了一种元素位置的调整方法，该方法包括：

采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中；

如果发生所述预设操作事件，则确定所述预设操作事件的类别；

如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；

根据所述滚动距离对所述子网页中的预设元素的位置进行调整。

可选的，所述父网页中部署有第二脚本文件，所述第二脚本文件用于在监听到尺寸调整事件时，触发所述父网页中的预设内联框架的尺寸调整，所述方法还包括：

如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与所述父网页调整后的尺寸相匹配。

可选的，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：

获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸；

根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。

可选的，所述尺寸调整事件为高度调整事件，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：

获取所述预设内联框架的调整前高度，所述预设内联框架的调整前高度与发生所述高度调整事件前的父网页的高度相匹配；

获取所述高度调整事件对应的调整高度；

根据所述预设内联框架的调整前高度和所述调整高度，计算调整后的预设内联框架的高度；

将所述预设内联框架的高度调整为所述调整后的预设内联框架的高度，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。

可选的，所述预设内联框架为iframe框架；和/或，

所述预设元素为弹窗元素、页面悬浮元素中的至少一种。