CN112347403B - 页面检查方法、装置、设备和存储介质 - Google Patents

Abstract

本发明实施例提供一种页面检查方法、装置、设备和存储介质，该方法包括：获取页面中的第一组件，第一组件为页面中包括的所有组件中的任一组件；判断第一组件是否存在上级组件；若第一组件存在上级组件，则基于上级组件的位置信息，确定第一组件的位置信息；若第一组件不存在上级组件，则获取第一组件的位置信息；获取页面中的第二组件的位置信息，第二组件为页面中包括的除第一组件之外的组件；若基于第一组件的位置信息和第二组件的位置信息判断第一组件和第二组件中的任一组件存在重叠，则输出提示信息，提示信息用于提示第一组件和任一组件存在重叠。采用本发明，可以判断不同组件之间是否产生重叠。

Description

页面检查方法、装置、设备和存储介质

技术领域

本发明涉及互联网技术领域，尤其涉及一种页面检查方法、装置、设备和存储介质。

背景技术

相关技术中，网页可以由不同组件拼接而成。每个组件有设定的在页面中的展示位置，在生成页面的过程中，会按照每个组件的展示位置对组件规划，以得到一个完整的页面。在某些应用场景中，组件本身在页面中会占有一定的展示空间，按照对应的展示位置进行排列的两个组件之间有可能会发生遮挡的情况。

发明内容

本发明实施例提供一种页面检查方法、装置、设备和存储介质，用以实现避免两个组件之间发生遮挡。

第一方面，本发明实施例提供一种页面检查方法，该方法包括：

获取页面中的第一组件，所述第一组件为所述页面中包括的所有组件中的任一组件；

判断所述第一组件是否存在上级组件；

若所述第一组件存在上级组件，则基于所述上级组件的位置信息，确定所述第一组件的位置信息；

若所述第一组件不存在上级组件，则获取所述第一组件的位置信息；

获取所述页面中的第二组件的位置信息，所述第二组件为所述页面中包括的除所述第一组件之外的组件；

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，所述提示信息用于提示所述第一组件和所述任一组件存在重叠。

可选地，所述位置信息包括组件与所述页面的页面顶端之间的距离和组件与所述页面的页面左边界之间的距离。

可选地，所述上级组件包括与所述第一组件直接关联的一级父组件以及与所述第一组件间接关联的二级父组件，所述二级父组件包括与所述一级父组件直接或者间接关联的父组件；所述基于所述上级组件的位置信息，确定所述第一组件的位置信息，包括：

获取各上级组件的位置信息；

按照所述各上级组件之间的级别关系，将所有上级组件的位置信息从所述一级父组件逐级进行叠加；

获取所述第一组件的初始位置信息；

将叠加结果与所述初始位置信息相加，得到所述第一组件的位置信息。

可选地，所述若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，包括：

获取所述第一组件的宽度和高度；

获取所述第二组件的宽度和高度；

基于所述第一组件和所述第二组件的宽度、高度和位置信息，判断所述第一组件和所述第二组件中的任一组件是否存在重叠；

若所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息。

可选地，所述若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，包括：

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，且所述第一组件和所述第二组件被设定为不能存在重叠，则输出提示信息；

所述方法还包括：

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，且允许所述第一组件和所述第二组件存在重叠，则不输出所述提示信息。

第二方面，本发明实施例提供一种页面检查装置，包括：

获取模块，用于获取页面中的第一组件，所述第一组件为所述页面中包括的所有组件中的任一组件；

判断模块，用于判断所述第一组件是否存在上级组件；

确定模块，用于若所述第一组件存在上级组件，则基于所述上级组件的位置信息，确定所述第一组件的位置信息；

所述获取模块，用于若所述第一组件不存在上级组件，则获取所述第一组件的位置信息；获取所述页面中的第二组件的位置信息，所述第二组件为所述页面中包括的除所述第一组件之外的组件；

提示模块，用于若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，所述提示信息用于提示所述第一组件和所述任一组件存在重叠。

可选地，所述位置信息包括组件与所述页面的页面顶端之间的距离和组件与所述页面的页面左边界之间的距离。

可选地，所述上级组件包括与所述第一组件直接关联的一级父组件以及与所述第一组件间接关联的二级父组件，所述二级父组件包括与所述一级父组件直接或者间接关联的父组件；

所述确定模块，用于：

获取各上级组件的位置信息；

按照所述各上级组件之间的级别关系，将所有上级组件的位置信息从所述一级父组件逐级进行叠加；

获取所述第一组件的初始位置信息；

将叠加结果与所述初始位置信息相加，得到所述第一组件的位置信息。

可选地，所述提示模块，用于：

获取所述第一组件的宽度和高度；

获取所述第二组件的宽度和高度；

基于所述第一组件和所述第二组件的宽度、高度和位置信息，判断所述第一组件和所述第二组件中的任一组件是否存在重叠；

若所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息。

可选地，所述提示模块，用于：

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，且所述第一组件和所述第二组件被设定为不能存在重叠，则输出提示信息；

所述提示模块，还用于：

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，且允许所述第一组件和所述第二组件存在重叠，则不输出所述提示信息。

第三方面，本发明实施例提供一种电子设备，其中包括处理器和存储器，其中，所述存储器上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器至少可以实现第一方面中的页面检查方法。

第四方面，本发明实施例提供了一种非暂时性机器可读存储介质，所述非暂时性机器可读存储介质上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器至少可以实现第一方面中的页面检查方法。

采用本发明，可以自动计算出页面中任一组件的准确的位置信息，然后用该组件的位置信息和页面中其他组件的位置信息进行比较，以判断不同组件之间是否产生重叠。如果发现两个组件之间产生了重叠，则可以输出提示信息，这样可以提示技术人员进行修改，基于修改结果，避免页面中出现产生重叠的组件。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种页面检查方法的流程图示意图；

图2为本发明实施例提供的一种页面检查装置的结构示意图；

图3为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定。

图1为本发明实施例提供的一种页面检查方法的流程图，如图1所示，该方法包括如下步骤：

101、获取页面中的第一组件，第一组件为页面中包括的所有组件中的任一组件。

102、判断第一组件是否存在上级组件。

103、若第一组件存在上级组件，则基于上级组件的位置信息，确定第一组件的位置信息。

104、若第一组件不存在上级组件，则获取第一组件的位置信息。

105、获取页面中的第二组件的位置信息，第二组件为页面中包括的除第一组件之外的组件。

106、若基于第一组件的位置信息和第二组件的位置信息判断第一组件和第二组件中的任一组件存在重叠，则输出提示信息，提示信息用于提示第一组件和任一组件存在重叠。

在实际应用中，可以获取页面的文档对象模型(Document Object Model，DOM)，DOM中记录了页面使用到的所有组件。对于页面中的每个组件都可以执行一次本发明实施例提供的方法，来判断它是否和页面中的其他组件存在重叠的情况。本发明实施例中第一组件可以作为页面中包括的所有组件中的任一组件，第二组件作为页面中包括的除第一组件之外的组件，采用本发明实施例提供的方法可以检测第一组件是否和第二组件中的任一组件发生重叠。

每个组件都有各自的属性信息(style.position)，属性信息可以是浮动型组件(fixed)或者绝对定位型组件(absolute)。

可选地，上述位置信息可以包括组件与页面的页面顶端之间的距离(offsetTop)和组件与页面的页面左边界之间的距离(offsetLeft)。

在实际应用中，可以判断第一组件是否存在上级组件，如果第一组件不存在上级组件，那么第一组件的offsetTop和offsetLeft就为第一组件最终参考的位置信息。如果第一组件存在父组件(offsetParent)，甚至offsetParent还存在offsetParent，那么需要将这些上级组件都找出来，将它们的位置信息进行叠加。

基于此，可选地，上级组件包括与第一组件直接关联的一级父组件以及与第一组件间接关联的二级父组件，二级父组件包括与一级父组件直接或者间接关联的父组件。基于上级组件的位置信息，确定第一组件的位置信息的过程可以实现为：获取各上级组件的位置信息；按照各上级组件之间的级别关系，将所有上级组件的位置信息从一级父组件逐级进行叠加；获取第一组件的初始位置信息；将叠加结果与初始位置信息相加，得到第一组件的位置信息。

举例来说，假设第一组件为组件A，组件A的父组件为组件B，那么组件B是与组件A直接关联的一级父组件。如果组件B还有父组件为组件C，那么组件C是与组件A间接关联的二级父组件。甚至，如果组件C还有父组件D，那么组件D也是与组件A间接关联的二级父组件。重复上述过程，直到找不到父组件或者tagName等于BODY，然后将所有找到的父组件的位置信息进行叠加。

在求得叠加结果之后，可以获取第一组件的初始位置信息，将叠加结果与初始位置信息相加计算出第一组件最终参考的位置信息。

需要说明的是，属性信息为fixed的组件可能不存在上级组件，属性信息为absolute的组件可能存在上级组件。其中，属性信息为fixed的组件为，当页面滚动显示时，fixed组件在页面中的展示位置不会随着页面的滚动而变化，无论页面如何滚动显示，fixed组件都会出现在显示出的页面的固定位置上。

除了组件的位置信息，由于组件在页面还占有一定的展示空间，因此还可以将组件的宽度和高度考虑到影响组件产生重叠的因素中。可选地，若基于第一组件的位置信息和第二组件的位置信息判断第一组件和第二组件中的任一组件存在重叠，则输出提示信息的过程可以实现为：获取第一组件的宽度和高度；获取第二组件的宽度和高度；基于第一组件和第二组件的宽度、高度和位置信息，判断第一组件和第二组件中的任一组件是否存在重叠；若第一组件和第二组件中的任一组件存在重叠，则输出提示信息。

在实际应用中，可以获取组件的高度(offsetHeig)和宽度(offsetWidth)。结合第一组件和第二组件的offsetLeft、offsetTop、offsetWidth、offsetHeigt判断第一组件和第二组件是否会发生重叠。如果第一组件和第二组件发生了重叠，可以输出提示信息，这样在技术人员看到提示信息之后，可以获知哪些组件发生了重叠，那么就可以有针对性的对这些发生重叠的组件的位置信息进行修改，以防止它们重叠。

可选地，出于页面设计考虑，有些组件之间是可以产生重叠的，而有些组件之间是不能产生重叠的。对于不能产生重叠的组件如果产生了重叠，可以输出提示信息，对于可以产生重叠的组件如果产生了重叠，则可以不输出提示信息，因为这种情况是被允许的。基于此，若基于第一组件的位置信息和第二组件的位置信息判断第一组件和第二组件中的任一组件存在重叠，则输出提示信息的过程可以实现为：若基于第一组件的位置信息和第二组件的位置信息判断第一组件和第二组件中的任一组件存在重叠，且第一组件和第二组件被设定为不能存在重叠，则输出提示信息；相应地，若基于第一组件的位置信息和第二组件的位置信息判断第一组件和第二组件中的任一组件存在重叠，且允许第一组件和第二组件存在重叠，则不输出提示信息。

采用本发明，可以自动计算出页面中任一组件的准确的位置信息，然后用该组件的位置信息和页面中其他组件的位置信息进行比较，以判断不同组件之间是否产生重叠。如果发现两个组件之间产生了重叠，则可以输出提示信息，这样可以提示技术人员进行修改，基于修改结果，避免页面中出现产生重叠的组件。

以下将详细描述本发明的一个或多个实施例的页面检查装置。本领域技术人员可以理解，这些页面检查装置均可使用市售的硬件组件通过本方案所教导的步骤进行配置来构成。

图2为本发明实施例提供的一种页面检查装置的结构示意图，如图2所示，该装置包括：

获取模块21，用于获取页面中的第一组件，所述第一组件为所述页面中包括的所有组件中的任一组件；

判断模块22，用于判断所述第一组件是否存在上级组件；

确定模块23，用于若所述第一组件存在上级组件，则基于所述上级组件的位置信息，确定所述第一组件的位置信息；

所述获取模块21，用于若所述第一组件不存在上级组件，则获取所述第一组件的位置信息；获取所述页面中的第二组件的位置信息，所述第二组件为所述页面中包括的除所述第一组件之外的组件；

提示模块24，用于若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，所述提示信息用于提示所述第一组件和所述任一组件存在重叠。

可选地，所述位置信息包括组件与所述页面的页面顶端之间的距离和组件与所述页面的页面左边界之间的距离。

可选地，所述上级组件包括与所述第一组件直接关联的一级父组件以及与所述第一组件间接关联的二级父组件，所述二级父组件包括与所述一级父组件直接或者间接关联的父组件；

所述确定模块23，用于：

获取各上级组件的位置信息；

按照所述各上级组件之间的级别关系，将所有上级组件的位置信息从所述一级父组件逐级进行叠加；

获取所述第一组件的初始位置信息；

将叠加结果与所述初始位置信息相加，得到所述第一组件的位置信息。

可选地，所述提示模块24，用于：

获取所述第一组件的宽度和高度；

获取所述第二组件的宽度和高度；

基于所述第一组件和所述第二组件的宽度、高度和位置信息，判断所述第一组件和所述第二组件中的任一组件是否存在重叠；

若所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息。

可选地，所述提示模块24，用于：

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，且所述第一组件和所述第二组件被设定为不能存在重叠，则输出提示信息；

所述提示模块24，还用于：

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，且允许所述第一组件和所述第二组件存在重叠，则不输出所述提示信息。

图2所示装置可以执行前述图1所示实施例中提供的页面检查方法，详细的执行过程和技术效果参见前述实施例中的描述，在此不再赘述。

在一个可能的设计中，上述图2所示页面检查装置的结构可实现为一电子设备，如图3所示，该电子设备可以包括：处理器91、存储器92。其中，所述存储器92上存储有可执行代码，当所述可执行代码被所述处理器91执行时，使所述处理器91至少可以实现如前述图1所示实施例中提供的页面检查方法。

可选地，该电子设备中还可以包括通信接口93，用于与其他设备进行通信。

另外，本发明实施例提供了一种非暂时性机器可读存储介质，所述非暂时性机器可读存储介质上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器至少可以实现如前述图1所示实施例中提供的页面检查方法。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助加必需的通用硬件平台的方式来实现，当然也可以通过硬件和软件结合的方式来实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以计算机产品的形式体现出来，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例提供的页面检查方法可以由某种程序/软件来执行，该程序/软件可以由网络侧提供，前述实施例中提及的电子设备可以将该程序/软件下载到本地的非易失性存储介质中，并在其需要执行前述页面检查方法时，通过CPU将该程序/软件读取到内存中，进而由CPU执行该程序/软件以实现前述实施例中所提供的页面检查方法，执行过程可以参见前述图1中的示意。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (8)

1.一种页面检查方法，其特征在于，包括：

获取页面中的第一组件，所述第一组件为所述页面中包括的所有组件中的任一组件；

判断所述第一组件是否存在上级组件，其中，所述上级组件包括与所述第一组件直接关联的一级父组件以及与所述第一组件间接关联的二级父组件，所述二级父组件包括与所述一级父组件直接或者间接关联的父组件；

若所述第一组件存在上级组件，则获取各上级组件的位置信息；

按照所述各上级组件之间的级别关系，将所有上级组件的位置信息从所述一级父组件逐级进行叠加；

获取所述第一组件的初始位置信息；

将叠加结果与所述初始位置信息相加，得到所述第一组件的位置信息；

若所述第一组件不存在上级组件，则获取所述第一组件的位置信息；

获取所述页面中的第二组件的位置信息，所述第二组件为所述页面中包括的除所述第一组件之外的组件；

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，所述提示信息用于提示所述第一组件和所述任一组件存在重叠。

2.根据权利要求1所述的方法，其特征在于，所述位置信息包括组件与所述页面的页面顶端之间的距离和组件与所述页面的页面左边界之间的距离。

3.根据权利要求1所述的方法，其特征在于，所述若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，包括：

获取所述第一组件的宽度和高度；

获取所述第二组件的宽度和高度；

基于所述第一组件和所述第二组件的宽度、高度和位置信息，判断所述第一组件和所述第二组件中的任一组件是否存在重叠；

若所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息。

4.根据权利要求1所述的方法，其特征在于，所述若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，包括：

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，且所述第一组件和所述第二组件被设定为不能存在重叠，则输出提示信息；

所述方法还包括：

若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，且允许所述第一组件和所述第二组件存在重叠，则不输出所述提示信息。

5.一种页面检查装置，其特征在于，包括：

获取模块，用于获取页面中的第一组件，所述第一组件为所述页面中包括的所有组件中的任一组件；

判断模块，用于判断所述第一组件是否存在上级组件，其中，所述上级组件包括与所述第一组件直接关联的一级父组件以及与所述第一组件间接关联的二级父组件，所述二级父组件包括与所述一级父组件直接或者间接关联的父组件；

确定模块，用于若所述第一组件存在上级组件，则获取各上级组件的位置信息；按照所述各上级组件之间的级别关系，将所有上级组件的位置信息从所述一级父组件逐级进行叠加；获取所述第一组件的初始位置信息；将叠加结果与所述初始位置信息相加，得到所述第一组件的位置信息；

所述获取模块，用于若所述第一组件不存在上级组件，则获取所述第一组件的位置信息；获取所述页面中的第二组件的位置信息，所述第二组件为所述页面中包括的除所述第一组件之外的组件；

提示模块，用于若基于所述第一组件的位置信息和所述第二组件的位置信息判断所述第一组件和所述第二组件中的任一组件存在重叠，则输出提示信息，所述提示信息用于提示所述第一组件和所述任一组件存在重叠。

6.根据权利要求5所述的装置，其特征在于，所述位置信息包括组件与所述页面的页面顶端之间的距离和组件与所述页面的页面左边界之间的距离。

7.一种电子设备，其特征在于，包括：存储器、处理器；其中，所述存储器上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1-4中任一项所述的页面检查方法。

8.一种非暂时性机器可读存储介质，其特征在于，所述非暂时性机器可读存储介质上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如权利要求1-4中任一项所述的页面检查方法。

Images