CN113268687A - 一种确定元素渲染位置的方法、装置及存储介质 - Google Patents

Abstract

本公开涉及计算机领域，公开了一种确定元素渲染位置的方法、装置及存储介质，该方法为：智能终端在网页中确定待渲染的目标元素，并获取目标元素在网页中的初始网页坐标，智能终端基于文档对象模型结构，确定目标元素的父元素，并确定父元素在网页中的参考网页坐标，在获取到上述初始网页坐标和参考网页坐标，智能终端计算目标元素相对于父元素的相对位置坐标，为目标元素生成相应的图层，将目标元素加载到图层中，以及在图层中按照相对位置坐标渲染目标元素，通过为目标元素单独生成图层，有效避免了共用图层对目标元素渲染位置的干扰，以父元素为参考得到渲染目标元素的相对位置坐标，消除了其他配置对渲染位置的影响，保障了渲染位置的准确性。

Description

一种确定元素渲染位置的方法、装置及存储介质

技术领域

本申请涉及计算机技术，特别涉及一种确定元素渲染位置的方法、装置及存储介质。

背景技术

目前，智能终端上页面的渲染过程主要包括文档对象模型(Document ObjectModel，DOM)结构的构造、布局和绘制页面三个步骤，即与前端显示相关的代码先通过原超文本标记语言(Hyper Text Markup Language，HTML)解析为文档对象模型结构，通过层叠样式表(Cascading Style Sheets，CSS)解析器构建出样式表规则，并将上述样式表规则分别放到对应的文档对象模型结构的节点上，之后，智能终端按照从上到下，从左到右的顺序，读取文档对象模型结构的节点，并在页面上设置好各个节点的布局，最后，通过可视化的操作将相关代码的内容绘制出来，完成整个页面的渲染。

但是，当希望某个元素(例如，对话框，提示框组件)始终显示在页面的最上方时，父容器的某些CSS配置也会影响该元素的显示效果，常见的父容器之间的z-index属性也存在制约关系。目前使用的方案会改动文档对象模型结构，导致原始设置的CSS样式失效；并且，使用CSS中的z-index属性来控制某个元素的显示位置时，父容器的某些CSS配置也会影响该元素的显示效果。

例如，overflow属性会设置溢出元素的显示样式，display属性会影响内部子元素的排列方式等。

针对上述情况，智能终端通常运用额外的代码将受到制约的元素移动到函数体下，使其成为函数体的直接子元素，或者，生成新元素并添加到函数体内，这样，对原本的HTML文档结构做了较大修改；并且，智能终端需要实时计算元素的位置，元素过多的情况下，页面重新渲染可能还会造成性能问题。

发明内容

本公开实施例提供了一种确定元素渲染位置的方法、装置及存储介质，用以提升网页中元素位置的渲染效果。

本公开提供的具体技术方案如下：

第一方面，一种确定元素渲染位置的方法，包括：

在网页中确定待渲染的目标元素，并获取目标元素在网页中的初始网页坐标；

基于文档对象模型结构，确定目标元素的父元素，并确定父元素在网页中的参考网页坐标；

基于初始网页坐标和参考网页坐标，计算目标元素相对于父元素的相对位置坐标；

为目标元素生成相应的图层，将目标元素加载到图层中；

在图层中，按照相对位置坐标渲染目标元素。

可选地，若待渲染的目标元素的个数为多个，则为目标元素生成相应的图层，将目标元素加载到图层中，包括：

分别为多个目标元素生成相应的图层；

分别将各个目标元素加载到相应的图层中；

分别为各个图层设置相应的渲染优先级；

根据各个图层对应的渲染优先级，确定各个图层在网页中的显示层次。

可选地，根据各个图层对应的渲染优先级，确定各个图层在网页中的显示层次，包括：

将各个图层对应的渲染优先级由高到低进行排序；

根据各个渲染优先级的排序结果，确定各个图层在网页中的显示层次，其中，渲染优先级的级别越高，相应的图层的显示层次表征图层与网页的页面的顶层距离越近。

可选地，获取目标元素在网页中的初始网页坐标，包括：

确定网页的初始原点坐标；

在网页中，确定目标元素相对于初始原点坐标的水平距离和垂直距离；

基于初始原点坐标、水平距离和垂直距离确定目标元素在网页中的初始网页坐标。

可选地，确定网页的初始原点坐标，包括：

将以下坐标中的一种作为初始原点坐标：

网页所在浏览器窗口的左上角的页面坐标；

网页所在浏览器窗口的右上角的页面坐标；

网页所在浏览器窗口的左下角的页面坐标；

网页所在浏览器窗口的右下角的页面坐标。

可选地，确定父元素在网页中的参考网页坐标，包括：

以父元素为参考元素，在网页中设置参考原点坐标，其中，参考原点坐标与初始原点坐标不重叠；

在网页中，获得父元素相对于参考原点坐标的参考水平距离和参考垂直距离；

基于参考原点坐标、参考水平距离和参考垂直距离确定父元素在所页中的参考网页坐标。

可选地，以父元素为参考元素，在网页中设置参考原点坐标，包括：

将以下坐标中的一种作为参考原点坐标：

将父元素的左上角的页面坐标；

父元素的右上角的页面坐标；

父元素的左下角的页面坐标；

父元素的右下角的页面坐标。

可选地，基于初始网页坐标和参考网页坐标，计算目标元素相对于父元素的相对位置坐标，包括：

计算参考原点坐标与初始原点坐标之间的第一距离差值；

计算参考水平距离和水平距离之间的第二距离差值；

计算参考垂直距离和垂直距离之间的第三距离差值；

基于第一距离差值、第二距离差值和第三距离差值确定目标元素相对于父元素的相对位置坐标。

第二方面，一种确定元素渲染位置的装置，包括：

确定单元，用于在网页中确定待渲染的目标元素，并获取目标元素在网页中的初始网页坐标；

参考单元，用于基于文档对象模型结构，确定目标元素的父元素，并确定父元素在网页中的参考网页坐标；

计算单元，用于基于初始网页坐标和参考网页坐标，计算目标元素相对于父元素的相对位置坐标；

加载单元，用于为目标元素生成相应的图层，将目标元素加载到图层中；

渲染单元，用于在图层中，按照相对位置坐标渲染目标元素。

可选地，若待渲染的目标元素的个数为多个，则为目标元素生成相应的图层，将目标元素加载到图层中，加载单元用于：

分别为多个目标元素生成相应的图层；

分别将各个目标元素加载到相应的图层中；

分别为各个图层设置相应的渲染优先级；

根据各个图层对应的渲染优先级，确定各个图层在网页中的显示层次。

可选地，根据各个图层对应的渲染优先级，确定各个图层在网页中的显示层次，加载单元用于：

将各个图层对应的渲染优先级由高到低进行排序；

根据各个渲染优先级的排序结果，确定各个图层在网页中的显示层次，其中，渲染优先级的级别越高，相应的图层的显示层次表征图层与网页的页面的顶层距离越近。

可选地，获取目标元素在网页中的初始网页坐标，确定单元用于：

确定网页的初始原点坐标；

在网页中，确定目标元素相对于初始原点坐标的水平距离和垂直距离；

基于初始原点坐标、水平距离和垂直距离确定目标元素在网页中的初始网页坐标。

可选地，确定网页的初始原点坐标，确定单元用于：

将以下坐标中的一种作为初始原点坐标：

网页所在浏览器窗口的左上角的页面坐标；

网页所在浏览器窗口的右上角的页面坐标；

网页所在浏览器窗口的左下角的页面坐标；

网页所在浏览器窗口的右下角的页面坐标。

可选地，确定父元素在网页中的参考网页坐标，参考单元用于：

以父元素为参考元素，在网页中设置参考原点坐标，其中，参考原点坐标与初始原点坐标不重叠；

在网页中，获得父元素相对于参考原点坐标的参考水平距离和参考垂直距离；

基于参考原点坐标、参考水平距离和参考垂直距离确定父元素在所页中的参考网页坐标。

可选地，以父元素为参考元素，在网页中设置参考原点坐标，参考单元用于：

将以下坐标中的一种作为参考原点坐标：

将父元素的左上角的页面坐标；

父元素的右上角的页面坐标；

父元素的左下角的页面坐标；

父元素的右下角的页面坐标。

可选地，基于初始网页坐标和参考网页坐标，计算目标元素相对于父元素的相对位置坐标，计算单元用于：

计算参考原点坐标与初始原点坐标之间的第一距离差值；

计算参考水平距离和水平距离之间的第二距离差值；

计算参考垂直距离和垂直距离之间的第三距离差值；

基于第一距离差值、第二距离差值和第三距离差值确定目标元素相对于父元素的相对位置坐标。

第三方面，一种智能终端，包括：

存储器，用于存储可执行指令；

处理器，用于读取并执行存储器中存储的可执行指令，以实现如第一方面任一项的方法。

第四方面，一种计算机可读存储介质，当所述存储介质中的指令由处理器执行时，使得所述处理器能够执行上述第一方面任一项所述的方法。

第五方面，一种计算机程序产品，包含可执行指令，当所述计算机程序产品的可执行指令由处理器执行时，能够实现如上述第一方面任一项所述的方法。

综上所述，本公开实施例中，智能终端在网页中确定待渲染的目标元素，并获取目标元素在网页中的初始网页坐标，同时，智能终端基于文档对象模型结构，确定目标元素的父元素，并确定父元素在网页中的参考网页坐标，在获取到上述初始网页坐标和参考网页坐标，智能终端计算目标元素相对于父元素的相对位置坐标，为目标元素生成相应的图层，将目标元素加载到图层中，以及在图层中按照相对位置坐标渲染目标元素，通过为目标元素单独生成图层，有效避免了共用图层对目标元素渲染位置的干扰，以父元素为参考得到渲染目标元素的相对位置坐标，消除了其他配置对渲染位置的影响，从而保障了渲染位置的准确性。

附图说明

图1为本申请实施例中智能终端确定元素渲染位置的流程示意图；

图2为本申请实施例中在客户端网页中同时显示多个对话框的示意图；

图3为本申请实施例中智能终端获取目标元素在网页中的初始网页坐标的流程示意图；

图4为本申请实施例中以网页所在浏览器窗口的左上角的页面坐标为原点建立坐标系的示意图；

图5为本申请实施例中以网页所在浏览器窗口的右上角的页面坐标为原点建立坐标系的示意图；

图6为本申请实施例中以网页所在浏览器窗口的左下角的页面坐标为原点建立坐标系的示意图；

图7为本申请实施例中以网页所在浏览器窗口的右下角的页面坐标为原点建立坐标系的示意图；

图8为本申请实施例中确定目标元素相对于初始原点坐标的水平距离和垂直距离的示意图；

图9为本申请实施例中智能终端确定父元素在网页中的参考网页坐标的流程示意图；

图10为本申请实施例中以父元素的左上角的页面坐标为原点建立坐标系的示意图；

图11为本申请实施例中以父元素的右上角的页面坐标为原点建立坐标系的示意图；

图12为本申请实施例中以父元素的左下角的页面坐标为原点建立坐标系的示意图；

图13为本申请实施例中以父元素的右下角的页面坐标为原点建立坐标系的示意图；

图14为本申请实施例中确定目标元素相对于参考原点坐标的水平距离和垂直距离的示意图；

图15为本申请实施例中智能终端计算目标元素相对于父元素的相对位置坐标的流程示意图；

图16为本申请实施例中智能终端确定多个目标元素的渲染位置的流程示意图；

图17为本申请实施例中按照渲染优先级确定多个目标元素渲染位置的示意图；

图18为本申请实施例应用场景中确定元素渲染位置的示意图；

图19为本公开实施例中智能终端的逻辑架构示意图；

图20为本公开实施例中智能终端的实体架构示意图。

具体实施方式

为了提升网页中元素位置的渲染效果，本申请实施例中，智能终端在网页中确定待渲染的目标元素，进一步获取目标元素在网页中的初始网页坐标，同时，智能终端基于文档对象模型结构，确定目标元素的父元素，并进一步确定父元素在网页中的参考网页坐标，这样，智能终端基于初始网页坐标和参考网页坐标，计算目标元素相对于父元素的相对位置坐标；并且，智能终端为上述目标元素生成相应的图层，将目标元素加载到图层中，以及，在图层中，智能终端按照相对位置坐标渲染目标元素，从而对网页中的目标元素进行渲染，进而保障业务数据的安全性。

下面结合附图对本申请优选的实施方式进行详细说明。

本公开实施例中，确定元素渲染位置的方法的实现，主要在智能终端侧进行。参阅图1所示，本公开实施例中，智能终端确定元素渲染位置的具体流程如下：

步骤100：智能终端在网页中确定待渲染的目标元素，并获取目标元素在网页中的初始网页坐标。

通常，网页中待渲染的元素有多个，参阅图2所示，例如，在导导导地图进行导航的客户端网页中，当用户在客户端网页中输入导航的目的地之后，会弹出对话框以让用户确认上述目的地是否正确，以及，是否立即开始导航等等。在该客户端网页中，置于页面的底层的为用户当前位置的地图，置于页面的中间层的为供输入的输入框，置于页面的顶层的为确认对话框。

实施过程中，智能终端在网页中确定待渲染的目标元素，即获取上述置于页面的顶层的确认对话框，需要说明的是，通常在网页中希望始终显示在页面的顶层的元素的个数为多个，这里，以待渲染的目标元素为一个进行详细说明。

在智能终端确定了网页中待渲染的目标元素后，进一步获取目标元素在网页中的初始网页坐标，从而确定目标元素在当前网页中的位置，具体包括以下步骤：

步骤1000：智能终端确定网页的初始原点坐标。

为了准确获取目标元素在当前网页中的位置，以坐标来对其位置进行详细描述。智能终端先要确定目标元素所在网页的初始原点坐标，即当前网页所在坐标系的坐标原点。

参阅图3所示，具体包括：

智能终端将以下坐标中的一种作为初始原点坐标：

方式1：网页所在浏览器窗口的左上角的页面坐标。

智能终端以网页所在浏览器建立坐标系，并将浏览器窗口的左上角的页面坐标作为初始原点坐标，即浏览器窗口的左上角的页面坐标为(0，0)。在确定初始原点坐标为左上角的页面坐标后，相应的，浏览器窗口中构成左上角的两个边为坐标轴。参阅图4所示，初始原点坐标以左上角的页面坐标(0，0)来表示，X轴和Y轴的方向如图所示。在该坐标系下，获取目标元素在网页中的初始网页坐标时，只需考虑目标元素距离Y轴的水平距离(例如，距离左边沿的left值)和距离X轴的垂直距离(例如，距离上边沿的top值)即可。

方式2：网页所在浏览器窗口的右上角的页面坐标。

智能终端以网页所在浏览器建立坐标系，并将浏览器窗口的右上角的页面坐标作为初始原点坐标，即浏览器窗口的右上角的页面坐标为(0，0)。在确定初始原点坐标为右上角的页面坐标后，相应的，浏览器窗口中构成右上角的两个边为坐标轴。参阅图5所示，初始原点坐标以右上角的页面坐标(0，0)来表示，X轴和Y轴的方向如图所示。在该坐标系下，获取目标元素在网页中的初始网页坐标时，只需考虑目标元素距离Y轴的水平距离(例如，距离右边沿的right值)和距离X轴的垂直距离(例如，距离上边沿的top值)即可。

方式3：网页所在浏览器窗口的左下角的页面坐标。

智能终端以网页所在浏览器建立坐标系，并将浏览器窗口的左下角的页面坐标作为初始原点坐标，即浏览器窗口的左下角的页面坐标为(0，0)。在确定初始原点坐标为左下角的页面坐标后，相应的，浏览器窗口中构成左下角的两个边为坐标轴。参阅图6所示，初始原点坐标以左下角的页面坐标(0，0)来表示，X轴和Y轴的方向如图所示。在该坐标系下，获取目标元素在网页中的初始网页坐标时，只需考虑目标元素距离Y轴的水平距离(例如，距离左边沿的left值)和距离X轴的垂直距离(例如，距离下边沿的bottom值)即可。

方式4：网页所在浏览器窗口的右下角的页面坐标。

智能终端以网页所在浏览器建立坐标系，并将浏览器窗口的右下角的页面坐标作为初始原点坐标，即浏览器窗口的右下角的页面坐标为(0，0)。在确定初始原点坐标为右下角的页面坐标后，相应的，浏览器窗口中构成右下角的两个边为坐标轴。参阅图7所示，初始原点坐标以右下角的页面坐标(0，0)来表示，X轴和Y轴的方向如图所示。在该坐标系下，获取目标元素在网页中的初始网页坐标时，只需考虑目标元素距离Y轴的水平距离(例如，距离右边沿的right值)和距离X轴的垂直距离(例如，距离下边沿的bottom值)即可。

实施过程中，智能终端将方式1、方式2、方式3或者方式4中的页面坐标作为初始原点坐标，即确定网页的初始原点坐标。

步骤1001：智能终端在网页中，确定目标元素相对于初始原点坐标的水平距离和垂直距离。

在确定初始原点坐标，以及，相应的坐标系后，智能终端需要进一步确定目标元素在上述坐标系中的具体坐标。

实施过程中，智能终端在上述网页中，确定目标元素相对于初始原点坐标(0，0)的水平距离和垂直距离，即以上述初始原点坐标为起点，测量该起点与目标元素之间的水平距离，以及，以上述初始原点坐标为起点，测量该起点与目标元素之间的垂直距离。

参阅图8所示，例如，智能终端将方式1中的页面坐标作为初始原点坐标，即将网页所在浏览器窗口的左上角的页面坐标确定为网页的初始原点坐标。智能终端在网页中确定目标元素相对于初始原点坐标的水平距离，即以网页所在浏览器窗口的左上角为起点，测量该左上角到目标元素的水平距离为X，智能终端在网页中确定目标元素相对于初始原点坐标的垂直距离，即以网页所在浏览器窗口的左上角为起点，测量该左上角到目标元素的垂直距离为Y。

在另一种实施方式中，智能终端还可以在网页中，确定目标元素相对于初始原点坐标的直线距离，以及，该直线与坐标轴之间的夹角等，以计算出目标元素的水平距离和垂直距离，在此该方法不再进行详细展开。

步骤1002：智能终端基于初始原点坐标、水平距离和垂直距离确定目标元素在网页中的初始网页坐标。

在确定目标元素在网页中的初始原点坐标、水平距离和垂直距离后，智能终端可进一步确定目标元素在网页中的初始网页坐标。以上述例子进行具体描述即目标元素在网页中的初始网页坐标为(X，Y)。

步骤101：智能终端基于文档对象模型结构，确定目标元素的父元素，并确定父元素在网页中的参考网页坐标。

由于，文档对象模型结构中，每个元素只能有一个直接父元素，而通常，目标元素以及其父元素都被加载在同一个图层中，这样，在渲染过程中，同一个图层中的目标元素及其父元素都以网页所在坐标系来进行渲染。

而本申请实施例中，智能终端先要基于文档对象模型结构，确定目标元素的父元素，目的是将目标元素及其父元素拆分开来进行单独渲染，从而消除其他因素对目标元素渲染位置的影响。

进一步，智能终端在实施过程中，确定父元素在网页中的参考网页坐标。

参阅图9所示，具体包括：

步骤1010：智能终端以父元素为参考元素，在网页中设置参考原点坐标。

为了减小其他元素对目标元素在网页中的渲染位置的影响，本申请实施例中，以父元素为参考元素，来对其位置进行详细描述。智能终端先要以父元素为参考元素，在网页中设置的参考原点坐标，即以父元素为参考的坐标系的坐标原点。

具体包括：

智能终端将以下坐标中的一种作为参考原点坐标：

方式1’：将父元素的左上角的页面坐标。

智能终端以父元素为参考建立坐标系，并将父元素的左上角的页面坐标作为参考原点坐标，即父元素的左上角的页面坐标为(a，b)。在确定参考原点坐标为左上角的页面坐标后，相应的，父元素中构成左上角的两个边为坐标轴。参阅图10所示，参考原点坐标以左上角的页面坐标(a，b)来表示，X轴和Y轴的方向如图所示。在该坐标系下，获取目标元素在网页中的初始网页坐标时，只需考虑目标元素距离Y轴的水平距离(例如，距离左边沿的left值)和距离X轴的垂直距离(例如，距离上边沿的top值)即可。

方式2’：父元素的右上角的页面坐标。

智能终端以父元素为参考建立坐标系，并将父元素的右上角的页面坐标作为参考原点坐标，即父元素的右上角的页面坐标为(a，b)。在确定参考原点坐标为右上角的页面坐标后，相应的，父元素中构成右上角的两个边为坐标轴。参阅图11所示，参考原点坐标以右上角的页面坐标(a，b)来表示，X轴和Y轴的方向如图所示。在该坐标系下，获取目标元素在网页中的初始网页坐标时，只需考虑目标元素距离Y轴的水平距离(例如，距离右边沿的right值)和距离X轴的垂直距离(例如，距离上边沿的top值)即可。

方式3’：父元素的左下角的页面坐标。

智能终端以父元素为参考建立坐标系，并将父元素的左下角的页面坐标作为参考原点坐标，即父元素的左下角的页面坐标为(a，b)。在确定参考原点坐标为左下角的页面坐标后，相应的，父元素中构成左下角的两个边为坐标轴。参阅图12所示，参考原点坐标以左下角的页面坐标(a，b)来表示，X轴和Y轴的方向如图所示。在该坐标系下，获取目标元素在网页中的初始网页坐标时，只需考虑目标元素距离Y轴的水平距离(例如，距离左边沿的left值)和距离X轴的垂直距离(例如，距离下边沿的bottom值)即可。

方式4’：父元素的右下角的页面坐标。

智能终端以父元素为参考建立坐标系，并将父元素的右下角的页面坐标作为参考原点坐标，即父元素的右下角的页面坐标为(a，b)。在确定参考原点坐标为右下角的页面坐标后，相应的，父元素中构成右下角的两个边为坐标轴。参阅图13所示，参考原点坐标以右下角的页面坐标(a，b)来表示，X轴和Y轴的方向如图所示。在该坐标系下，获取目标元素在网页中的初始网页坐标时，只需考虑目标元素距离Y轴的水平距离(例如，距离右边沿的right值)和距离X轴的垂直距离(例如，距离下边沿的bottom值)即可。

实施过程中，智能终端将方式1’、方式2’、方式3’或者方式4’中的页面坐标作为参考原点坐标，即确定以父元素为参考元素，在网页中设置参考原点坐标。

需要进行说明的是，上述参考原点坐标与初始原点坐标不重叠，以将目标元素在网页中的初始网页坐标和以父元素为参考在网页中的参考网页坐标区别开来。

步骤1011：智能终端在网页中，获得父元素相对于参考原点坐标的参考水平距离和参考垂直距离。

在确定参考原点坐标，以及，相应的坐标系后，智能终端需要进一步确定目标元素在上述坐标系中的具体坐标。

实施过程中，智能终端在上述坐标系中，确定目标元素相对于参考原点坐标(a，b)的水平距离和垂直距离，即以上述参考原点坐标为起点，测量该起点与目标元素之间的水平距离，以及，以上述参考原点坐标为起点，测量该起点与目标元素之间的垂直距离。

参阅图14所示，例如，智能终端将方式1’中的页面坐标作为参考原点坐标，即将父元素的左上角的页面坐标确定为网页的参考原点坐标。智能终端在网页中确定目标元素相对于参考原点坐标的水平距离，即以网页所在父元素的左上角为起点，测量该左上角到目标元素的水平距离为W，智能终端在网页中确定目标元素相对于参考原点坐标的垂直距离，即以网页所在父元素的左上角为起点，测量该左上角到目标元素的垂直距离为Z。

在另一种实施方式中，智能终端还可以在网页中，确定目标元素相对于参考原点坐标的直线距离，以及，该直线与坐标轴之间的夹角等，以计算出目标元素的水平距离和垂直距离，在此该方法不再进行详细展开。

步骤1012：智能终端基于参考原点坐标、参考水平距离和参考垂直距离确定父元素在所页中的参考网页坐标。

在确定目标元素在网页中的参考原点坐标、水平距离和垂直距离后，智能终端可进一步确定目标元素在网页中的参考网页坐标。以上述例子进行具体描述即目标元素在网页中的参考网页坐标为(W，Z)。

步骤102：智能终端基于初始网页坐标和参考网页坐标，计算目标元素相对于父元素的相对位置坐标。

参阅图15所示，具体包括：

步骤1020：智能终端计算参考原点坐标与初始原点坐标之间的第一距离差值。

由于，上述参考原点坐标与初始原点坐标不重叠；并且，目标元素原有的坐标需要搬移到以父元素为参考的坐标系中。那么，实施过程中，智能终端先计算参考原点坐标与初始原点坐标之间的第一距离差值，即a-0，b-0，这样，计算得出目标元素的原点需要搬移的距离，以坐标表示为(a，b)。

步骤1021：智能终端计算参考水平距离和水平距离之间的第二距离差值。

同样的，实施过程中，智能终端先计算参考水平距离和水平距离之间的第二距离差值，这样，计算得出目标元素的水平距离需要搬移的距离。

以上述例子进行说明，则智能终端计算参考水平距离W和水平距离X之间的第二距离差值为X-W。

步骤1022：智能终端计算参考垂直距离和垂直距离之间的第三距离差值。

进一步的，实施过程中，智能终端先计算参考垂直距离和垂直距离之间的第三距离差值，这样，计算得出目标元素的垂直距离需要搬移的距离。

以上述例子进行说明，则智能终端计算参考垂直距离Z和垂直距离Y之间的第二距离差值为Y-Z。

步骤1023：智能终端基于第一距离差值、第二距离差值和第三距离差值确定目标元素相对于父元素的相对位置坐标。

在获取到第一距离差值、第二距离差值和第三距离差值后，即智能终端确定了目标元素搬移到以父元素为参考的坐标系中，原点、水平方向以及垂直方向上要移动的距离，分别为(0,0)移动到(a，b)的距离，X-W的距离以及Y-Z的距离。这样，智能终端可以基于上述第一距离差值、第二距离差值和第三距离差值确定目标元素相对于父元素的相对位置坐标。

实施过程中，智能终端可先将目标元素的原点由位置(0,0)移动到位置(a，b)，将目标元素的水平距离移动X-W的距离，以及，将目标元素的垂直距离移动Y-Z的距离，从而得到目标元素在以父元素为参考的坐标系中的参考原点坐标(a，b)，以及，参考网页坐标(W，Z)。

步骤103：智能终端为目标元素生成相应的图层，将目标元素加载到图层中。

考虑到目标元素及其父元素是加载在同一个图层中同时以网页的初始原点坐标为参考来进行渲染的，为了消除其他因素对目标元素渲染位置的影响，实施过程中，智能终端为目标元素生成相应的图层，即使目标元素脱离开原有的父元素来进行单独渲染；并且，智能终端将该目标元素加载到图层中。

若待渲染的目标元素的个数为多个(例如，确认对话框为多个时)，则智能终端为目标元素生成相应的图层，将目标元素加载到图层中，参阅图16所示，包括：

步骤1030：智能终端分别为多个目标元素生成相应的图层。

基于消除各个目标元素之间的相互影响的考虑，当待渲染的目标元素的个数为多个时，智能终端分别为多个目标元素生成相应的图层，即智能终端为每个目标元素都生成一个相应的图层，以为各个图层单独进行渲染做好准备。

步骤1031：智能终端分别将各个目标元素加载到相应的图层中。

在实施过程中，在获取到多个相应的图层后，智能终端分别将各个目标元素加载到相应的图层中，从而获得了要渲染的多个图层，进而实现了各个目标元素与其父元素的剥离。

步骤1032：智能终端分别为各个图层设置相应的渲染优先级。

在获取到多个图层后，各个图层的渲染优先级需要进一步进行设置，例如，可以为各个图层设置root-index这个属性，以确定上述多个确认对话框中哪个对话框是置于网页中的页面的顶层，哪一个需要置于网页中的页面的底层。

基于此，智能终端分别为各个图层设置相应的渲染优先级，参阅图17所示，例如，为3个确认对话框(确认选择哪一条导航路线的对话框、确认目的地是否正确的对话框以及确认现在出发么的对话框)设置相应的渲染优先级为确认目的地是否正确、确认选择哪一条导航路线以及确认现在出发么。

步骤1033：智能终端根据各个图层对应的渲染优先级，确定各个图层在网页中的显示层次。

具体包括：

步骤a：将各个图层对应的渲染优先级由高到低进行排序。

实施过程中，智能终端根据步骤1032中设置的各个图层对应的渲染优先级，将各个图层对应的渲染优先级由高到低进行排序。

步骤b：根据各个渲染优先级的排序结果，确定各个图层在网页中的显示层次，其中，渲染优先级的级别越高，相应的图层的显示层次表征图层与网页的页面的顶层距离越近。

获取到上述优先级的排序结果后，智能终端按照优先级由高到低的顺序来明确图层的显示层次，具体实施时，渲染优先级的级别越高，相应的图层的显示层次表征图层与网页的页面的顶层距离越近，即优先级高的图层显示在网页的页面的顶层，优先级低的图层显示在网页的页面的底层。通过渲染优先级的设置，智能终端能够在网页中按照不同的显示层次，显示上述相应的各个图层，这样，进一步消除了上述各个图层在显示效果上的影响，提升了网页的渲染效果。

仍以上述例子中的3个确认对话框(确认选择哪一条导航路线、确认目的地是否正确以及确认现在出发么)为例，由于，步骤1032中设置的渲染优先级由高到低的顺序为确认目的地是否正确的对话框、确认选择哪一条导航路线的对话框以及确认现在出发么的对话框，即确认目的地是否正确的对话框所在图层的渲染优先级为3，即root-index的属性值为3，确认选择哪一条导航路线的对话框所在图层的渲染优先级为2，即root-index的属性值为2，确认现在出发么的对话框所在图层的渲染优先级为1，即root-index的属性值为1，则在网页中相应的显示层次为确认目的地是否正确的对话框在页面的顶层、确认选择哪一条导航路线的对话框在页面的中间层以及确认现在出发么的对话框在页面的底层。这样，智能终端先在页面的底层渲染确认现在出发么的对话框，之后在页面的中间层渲染确认选择哪一条导航路线的对话框，最后在页面的顶层渲染确认目的地是否正确的对话框。即确定上述三个图层在网页中由页面的顶层到底层的显示顺序依次为确认目的地是否正确的对话框、确认选择哪一条导航路线的对话框以及确认现在出发么的对话框。

步骤104：智能终端在图层中，按照相对位置坐标渲染目标元素。

实施过程中，在将目标元素加载到图层后，以及，获取到目标元素在以父元素为参考的坐标系中的相对位置坐标后，智能终端在该图层中按照相对位置坐标渲染目标元素。

这样，智能终端将目标元素加载到所在图层后，单独渲染该目标元素，这样，当其他元素的CSS配置变动时并不影响目标元素所在的图层，从而减小了其他因素对该目标元素渲染位置的影响。

下面采用几个具体的应用场景对上述实施例作出进一步详细说明。

应用场景1：智能终端在导导导地图软件中确定请选择目的地的对话框和请确认目的地是否正确的对话框的渲染位置。

参阅图18所示，智能终端在导导导地图软件的客户端网页中确定待渲染的请选择目的地的对话框和请确认目的地是否正确的对话框，需要补充说明的是，请选择目的地的对话框和请确认目的地是否正确的对话框以及相应的父元素1和父元素2，智能终端分别获取请选择目的地的对话框和请确认目的地是否正确的对话框在网页中的初始网页坐标。这里，假设初始网页坐标的初始原点坐标为网页所在浏览器窗口的左上角的页面坐标，请选择目的地的对话框的相对于初始原点坐标的水平距离为5，垂直距离为6，获得请选择目的地的对话框的初始网页坐标为(5，6)；请确认目的地是否正确的对话框的相对于初始原点坐标的水平距离为3，垂直距离为4，获得请确认目的地是否正确的对话框的初始网页坐标为(3，4)。

智能终端基于文档对象模型结构，确定父元素1和父元素2在网页中的参考网页坐标，即父元素1和父元素2的参考原点坐标，这里，假设参考原点坐标为父元素的左上角的页面坐标，测得父元素相对于参考原点坐标的参考水平距离为1，参考垂直距离为2，获得父元素1的参考网页坐标为(1，2)，父元素2的参考网页坐标为(2，1)。

智能终端基于初始网页坐标(5，6)和参考网页坐标(1，2)，计算请选择目的地的对话框相对于父元素的相对位置坐标(4，4)；基于初始网页坐标(3，4)和参考网页坐标(2，1)，计算请确认目的地是否正确的对话框相对于父元素的相对位置坐标(1，3)。

智能终端为请选择目的地的对话框生成相应的图层1，将请选择目的地的对话框加载到图层1中，在图层1中渲染请选择目的地的对话框；为请确认目的地是否正确的对话框生成相应的图层2，将请确认目的地是否正确的对话框加载到图层2中，在图层2中渲染请确认目的地是否正确的对话框。假设，智能终端为图层1和图层2设置相应的渲染优先级为1、2，则相应的图层1和图层2的显示层次为图层2和图层1。将图层1和图层2对应的渲染优先级由高到低进行排序，得到排序结果为图层2和图层1，即确定上述两个图层在网页中的显示层次为图层2距离网页的页面的顶层距离较近，图层1距离网页的页面的顶层距离较远。这样，智能终端在网页所在的页面的底层渲染图层1，在网页所在的页面的顶层渲染图层2，即先在页面的底层渲染请选择目的地的对话框，后在页面的顶层渲染请确认目的地是否正确的对话框，以供用户在选择目的地后再次确认正确与否。

基于同一发明构思，参阅图19所示，本申请实施例中提供一种确定元素渲染位置的装置，包括：

确定单元1910，用于在网页中确定待渲染的目标元素，并获取目标元素在网页中的初始网页坐标；

参考单元1920，用于基于文档对象模型结构，确定目标元素的父元素，并确定父元素在网页中的参考网页坐标；

计算单元1930，用于基于初始网页坐标和参考网页坐标，计算目标元素相对于父元素的相对位置坐标；

加载单元1940，用于为目标元素生成相应的图层，将目标元素加载到图层中；

渲染单元1950，用于在图层中，按照相对位置坐标渲染目标元素。

可选地，若待渲染的目标元素的个数为多个，则为目标元素生成相应的图层，将目标元素加载到图层中，加载单元1940用于：

分别为多个目标元素生成相应的图层；

分别将各个目标元素加载到相应的图层中；

分别为各个图层设置相应的渲染优先级；

根据各个图层对应的渲染优先级，确定各个图层在网页中的显示层次。

可选地，根据各个图层对应的渲染优先级，确定各个图层在网页中的显示层次，加载单元1940用于：

将各个图层对应的渲染优先级由高到低进行排序；

根据各个渲染优先级的排序结果，确定各个图层在网页中的显示层次，其中，渲染优先级的级别越高，相应的图层的显示层次表征图层与网页的页面的顶层距离越近。

可选地，获取目标元素在网页中的初始网页坐标，确定单元1910用于：

确定网页的初始原点坐标；

在网页中，确定目标元素相对于初始原点坐标的水平距离和垂直距离；

基于初始原点坐标、水平距离和垂直距离确定目标元素在网页中的初始网页坐标。

可选地，确定网页的初始原点坐标，确定单元1910用于：

将以下坐标中的一种作为初始原点坐标：

网页所在浏览器窗口的左上角的页面坐标；

网页所在浏览器窗口的右上角的页面坐标；

网页所在浏览器窗口的左下角的页面坐标；

网页所在浏览器窗口的右下角的页面坐标。

可选地，确定父元素在网页中的参考网页坐标，参考单元1920用于：

以父元素为参考元素，在网页中设置参考原点坐标，其中，参考原点坐标与初始原点坐标不重叠；

在网页中，获得父元素相对于参考原点坐标的参考水平距离和参考垂直距离；

基于参考原点坐标、参考水平距离和参考垂直距离确定父元素在所页中的参考网页坐标。

可选地，以父元素为参考元素，在网页中设置参考原点坐标，参考单元1920用于：

将以下坐标中的一种作为参考原点坐标：

将父元素的左上角的页面坐标；

父元素的右上角的页面坐标；

父元素的左下角的页面坐标；

父元素的右下角的页面坐标。

可选地，基于初始网页坐标和参考网页坐标，计算目标元素相对于父元素的相对位置坐标，计算单元1930用于：

计算参考原点坐标与初始原点坐标之间的第一距离差值；

计算参考水平距离和水平距离之间的第二距离差值；

计算参考垂直距离和垂直距离之间的第三距离差值；

基于第一距离差值、第二距离差值和第三距离差值确定目标元素相对于父元素的相对位置坐标。

基于同一发明构思，参阅图20所示，本申请实施例中提供一种智能终端，包括：

参照图20，智能终端2000可以包括以下一个或多个组件：处理组件2002，存储器2004，电源组件2006，多媒体组件20012，音频组件2012，输入/输出(I/O)的接口2012，传感器组件2014，以及通信组件2016。

处理组件2002通常控制智能终端2000的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件2002可以包括一个或多个处理器2020来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件2002可以包括一个或多个模块，便于处理组件2002和其他组件之间的交互。例如，处理组件2002可以包括多媒体模块，以方便多媒体组件20012和处理组件2002之间的交互。

存储器2009被配置为存储各种类型的数据以支持在智能终端2000的操作。这些数据的示例包括用于在智能终端2000上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器2004可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件2006为智能终端2000的各种组件提供电力。电源组件2006可以包括电源管理系统，一个或多个电源，及其他与为智能终端2000生成、管理和分配电力相关联的组件。

多媒体组件20012包括在智能终端2000和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件20012包括一个前置摄像头和/或后置摄像头。当智能终端2000处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件2012被配置为输出和/或输入音频信号。例如，音频组件2012包括一个麦克风(MIC)，当智能终端2000处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器2004或经由通信组件2016发送。在一些实施例中，音频组件2012还包括一个扬声器，用于输出音频信号。

I/O接口2012为处理组件2002和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件2014包括一个或多个传感器，用于为智能终端2000提供各个方面的状态评估。例如，传感器组件2014可以检测到智能终端2000的打开/关闭状态，组件的相对定位，例如所述组件为智能终端2000的显示器和小键盘，传感器组件2014还可以检测智能终端2000或智能终端2000一个组件的位置改变，用户与智能终端2000接触的存在或不存在，智能终端2000方位或加速/减速和智能终端2000的温度变化。传感器组件2014可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件2014还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件2014还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件2016被配置为便于智能终端2000和其他设备之间有线或无线方式的通信。智能终端2000可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件2016经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件2016还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，智能终端2000可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述第一方面的任意一种方法。

基于同一发明构思，本申请实施例提供一种计算机可读存储介质，当所述存储介质中的指令由处理器执行时，使得所述处理器能够执行上述第一方面任一项所述的方法。

基于同一发明构思，本申请实施例提供一种计算机程序产品，包含可执行指令，当所述计算机程序产品的可执行指令由处理器执行时，能够实现如上述第二方面任一项所述的方法。

综上所述，本申请实施例中，智能终端在网页中确定待渲染的目标元素，并获取目标元素在网页中的初始网页坐标，同时，智能终端基于文档对象模型结构，确定目标元素的父元素，并确定父元素在网页中的参考网页坐标，在获取到上述初始网页坐标和参考网页坐标，智能终端计算目标元素相对于父元素的相对位置坐标，为目标元素生成相应的图层，将目标元素加载到图层中，以及在图层中按照相对位置坐标渲染目标元素，通过为目标元素单独生成图层，有效避免了共用图层对目标元素渲染位置的干扰，以父元素为参考得到渲染目标元素的相对位置坐标，消除了其他配置对渲染位置的影响，从而保障了渲染位置的准确性。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品系统。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品系统的形式。

本申请是参照根据本申请的方法、设备(系统)、和计算机程序产品系统的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

1.一种确定元素渲染位置的方法，其特征在于，该方法包括：

在网页中确定待渲染的目标元素，并获取所述目标元素在所述网页中的初始网页坐标；

基于文档对象模型结构，确定所述目标元素的父元素，并确定所述父元素在所述网页中的参考网页坐标；

基于所述初始网页坐标和所述参考网页坐标，计算所述目标元素相对于所述父元素的相对位置坐标；

为所述目标元素生成相应的图层，将所述目标元素加载到所述图层中；

在所述图层中，按照所述相对位置坐标渲染所述目标元素。

2.如权利要求1所述的方法，其特征在于，若所述待渲染的目标元素的个数为多个，则所述为所述目标元素生成相应的图层，将所述目标元素加载到所述图层中，包括：

分别为所述多个目标元素生成相应的图层；

分别将所述各个目标元素加载到相应的图层中；

分别为所述各个图层设置相应的渲染优先级；

根据所述各个图层对应的渲染优先级，确定所述各个图层在网页中的显示层次。

3.如权利要求2所述的方法，其特征在于，所述根据所述各个图层对应的渲染优先级，确定所述各个图层在网页中的显示层次，包括：

将所述各个图层对应的渲染优先级由高到低进行排序；

根据所述各个渲染优先级的排序结果，确定所述各个图层在所述网页中的显示层次，其中，渲染优先级的级别越高，相应的图层的显示层次表征所述图层与所述网页的页面的顶层距离越近。

4.如权利要求1或2所述的方法，其特征在于，所述获取所述目标元素在所述网页中的初始网页坐标，包括：

确定所述网页的初始原点坐标；

在所述网页中，确定所述目标元素相对于所述初始原点坐标的水平距离和垂直距离；

基于所述初始原点坐标、所述水平距离和所述垂直距离确定所述目标元素在所述网页中的初始网页坐标。

5.如权利要求4所述的方法，其特征在于，所述确定所述网页的初始原点坐标，包括：

将以下坐标中的一种作为所述初始原点坐标：

所述网页所在浏览器窗口的左上角的页面坐标；

所述网页所在浏览器窗口的右上角的页面坐标；

所述网页所在浏览器窗口的左下角的页面坐标；

所述网页所在浏览器窗口的右下角的页面坐标。

6.如权利要求4所述的方法，其特征在于，所述确定所述父元素在所述网页中的参考网页坐标，包括：

以所述父元素为参考元素，在所述网页中设置参考原点坐标，其中，所述参考原点坐标与所述初始原点坐标不重叠；

在所述网页中，获得所述父元素相对于所述参考原点坐标的参考水平距离和参考垂直距离；

基于所述参考原点坐标、所述参考水平距离和所述参考垂直距离确定所述父元素在所页中的参考网页坐标。

7.如权利要求6所述的方法，其特征在于，所述以所述父元素为参考元素，在所述网页中设置参考原点坐标，包括：

将以下坐标中的一种作为所述参考原点坐标：

将所述父元素的左上角的页面坐标；

所述父元素的右上角的页面坐标；

所述父元素的左下角的页面坐标；

所述父元素的右下角的页面坐标。

8.如权利要求6所述的方法，其特征在于，所述基于所述初始网页坐标和所述参考网页坐标，计算所述目标元素相对于所述父元素的相对位置坐标，包括：

计算所述参考原点坐标与所述初始原点坐标之间的第一距离差值；

计算所述参考水平距离和所述水平距离之间的第二距离差值；

计算所述参考垂直距离和所述垂直距离之间的第三距离差值；

基于所述第一距离差值、所述第二距离差值和所述第三距离差值确定所述目标元素相对于所述父元素的相对位置坐标。

9.一种计算机可读存储介质，其特征在于，当所述存储介质中的指令由处理器执行时，使得所述处理器能够执行如权利要求1-8任一项所述的方法。

10.一种计算机程序产品，其特征在于，包含可执行指令，当所述计算机程序产品的可执行指令由处理器执行时，能够实现如权利要求1-8任一项所述的方法。

Images