一种web页面焦点导航方法和装置

技术领域

本申请涉及计算机应用技术领域，特别涉及一种web页面焦点导航方法和装置。

背景技术

目前，在web页面展示当前被选中焦点区域切换和移动时，存在以下几种状态：用户通过操作(按键、鼠标、触控等)，上下左右切换焦点框；用户对页面放大和缩小，焦点框同步刷新后进行焦点切换。

针对上述焦点切换和刷新的情景，现有基于Blink内核的浏览器采用的web页面焦点导航方案是由处于前端的web页面进行绘制实现。具体地，处于前端的web页面根据用户操作(包括按键、鼠标、触控等操作)触发的事件，按照预先设置的该事件所对应的逻辑处理方法，在web页面实现相应焦点的显示和切换。

发明人在实现本发明的过程中发现，上述现有的web页面焦点导航方案存在研发和维护成本高的问题，具体原因分析如下：

上述web页面焦点导航方案，需要由处于前端的web页面通过执行当前用户触发的操作事件所对应的逻辑处理方法，实现在当前web页面上焦点的显示和切换，这样，每个web页面中都需要具有相应的事件处理代码，从而导致:研发人员在web页面开发过程中需要分别针对每个web页面进行相应的事件处理设计。

另外，web页面中的事件处理逻辑需要区别用户操作类型的，比如，是按键操作还是鼠标操作或是触控操作，并且对于每种操作类型下的不同操作功能，比如是上移还是下移，分别提供相应的事件处理逻辑。如此，由于需要针对每种操作类型下的各种操作功能分别相应的事件处理代码。即使对于不同操作类型下的相同操作功能，比如同样是导致焦点上移的鼠标操作和触控操作，由于属于不同的操作类型，也需要分别设计事件处理逻辑，从而导致web页面开发时需要设计的事件处理逻辑复杂、代码开发量较大，进而导致web页面的研发和维护成本高。

发明内容

有鉴于此，本发明的主要目的在于提供一种web焦点导航方法和装置，能够有效降低web页面的研发复杂度和维护成本。

为了达到上述目的，本发明提出的技术方案为：

一种web页面焦点导航方法，包括：

当浏览器的web页面检测到焦点切换事件被触发时，将所述焦点切换事件被触发通知给所述浏览器的内核；

所述内核根据所述焦点切换事件和当前焦点控件的位置，确定相应切换后的新焦点控件并通知给所述web页面；从所述web页面获取焦点框属性信息；根据所述焦点框属性信息，生成相应的焦点框绘制信息，并发送给所述web页面；

所述web页面根据所述焦点框绘制信息，在所述web页面的所述新焦点控件处绘制相应焦点框。

较佳地，所述确定相应切换后的新焦点控件包括：

遍历所述web页面中的每个控件，判断该控件和当前焦点控件的对齐关系；

如果所述web页面中存在一个控件满足：与当前焦点控件完全对齐，则将该控件作为所述新焦点控件；

如果所述web页面中仅存在一个控件满足：与当前焦点控件交叉对齐，则将该控件作为所述新焦点控件；

如果所述web页面中的所有控件均与当前焦点控件完全不对齐，则将距离当前焦点控件最近的控件作为所述新焦点控件。

较佳地，所述内核为Blink内核。

一种web页面焦点导航装置，包括：处理器，所述处理器用于：

当浏览器的web页面检测到焦点切换事件被触发时，利用所述web页面将所述焦点切换事件被触发通知给所述浏览器的内核；

利用所述内核，根据所述焦点切换事件和当前焦点控件的位置，确定相应切换后的新焦点控件，并通知给所述web页面；从所述web页面获取当前页面的焦点框属性信息；根据所述焦点框属性信息，生成相应的焦点框绘制信息，并发送给所述web页面；

利用所述web页面，根据所述焦点框绘制信息，在所述web页面的所述新焦点控件处绘制相应焦点框。

较佳地，所述处理器具体用于：根据所述焦点切换事件和当前焦点控件的位置，确定相应切换后的新焦点控件，包括：

遍历所述web页面中的每个控件，判断该控件和当前焦点控件的对齐关系；

如果所述web页面中存在一个控件满足：与当前焦点控件完全对齐，则将该控件作为所述新焦点控件；

如果所述web页面中仅存在一个控件满足：与当前焦点控件交叉对齐，则将该控件作为所述新焦点控件；

如果所述web页面中的所有控件均与当前焦点控件完全不对齐，则将距离当前焦点控件最近的控件作为所述新焦点控件。

较佳地，所述内核为Blink内核。

本申请还公开了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储指令，所述指令在由处理器执行时使得所述处理器执行如前所述的web页面焦点导航方法的步骤。

本申请还公开了一种电子设备，包括如前所述的非易失性计算机可读存储介质、以及可访问所述非易失性计算机可读存储介质的所述处理器。

由上述技术方案可见，本申请提出的web页面焦点导航方法和装置，浏览器的web页面在检测到焦点切换事件被触发时，直接触发内核进行相应的焦点定位和绘制处理，如此可以避免在设计web页面时需要针对各种焦点切换事件实现新焦点的切换功能，从而能够有效降低web页面的研发复杂度和维护成本。

附图说明

图1为本发明实施例的方法流程示意图；

图2为本发明实施例的控件对齐关系示意图；

图3为本发明实施例的一网页焦点显示示例图；

图4为在图3示例网页的焦点移动示例图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图及具体实施例对本发明作进一步地详细描述。

图1为本发明实施例的方法流程示意图，如图1所示，该实施例实现的web页面焦点导航方法主要包括下述步骤：

步骤101、当浏览器的web页面检测到焦点切换事件被触发时，将所述焦点切换事件被触发，通知给所述浏览器的内核。

本步骤中，与现有方案不同的是当浏览器的web页面检测到焦点切换事件被触发时(例如，用户通过按键或鼠标操作，对焦点进行了移动)，需要将该所述焦点切换事件被触发，通知给所述浏览器的内核，以便由内核对该焦点切换事件所引发的焦点更新进行相应处理，而不是由浏览器的web页面来执行这些焦点更新处理，这样，在设计web页面时不再需要实现上述功能，从而可以有效地降低web页面的设计复杂度和成本。

较佳地，所述浏览器可以为内核为Blink内核的浏览器，如chromium等，但不限于此。

步骤102、所述内核根据所述焦点切换事件和当前焦点控件的位置，确定相应切换后的新焦点控件，并通知给所述web页面；从所述web页面获取焦点框属性信息，根据所述焦点框属性信息，生成相应的焦点框绘制信息，并发送给所述web页面。

本步骤中，浏览器内核收到焦点切换事件被触发的通知后，将对该焦点切换事件所引发的焦点更新进行处理，与现有方案中web页面的处理所不同，不需要区分触发焦点切换事件的方式是按键操作还是鼠标操作或是触控操作等，而是直接根据焦点切换事件确定相应切换后的新焦点控件，并生成焦点框绘制信息，将所确定的新焦点控件和焦点框绘制信息发送给web页面，web页面只需要基于此在新焦点控件位置处进行焦点框渲染即可，从而可以降低web页面的研发复杂度和维护成本。

本步骤中，根据web页面中设置的焦点框属性信息(如焦点框的颜色、宽度等属性)，生成相应的焦点框绘制信息的具体方法为本领域技术人员所掌握，在此不再赘述。

较佳地，可以采用下述方法确定相应切换后的新焦点控件：

步骤x1、遍历所述web页面中的每个控件，判断该控件和当前焦点控件的对齐关系。

本步骤中，将确定web页面中每个控件分别和当前焦点控件的对齐关系，以便后续步骤中，根据各控制和当前焦点控件的对齐关系，确定新焦点控件。

在实际应用中，浏览器的内核可以从web页面中获知当前焦点控件，具体方法为本领域技术人员所掌握，在此不再赘述。

这里，页面中每个控件与当前焦点控件的对齐关系(包括完全对齐、交叉对齐和完全不对齐三种)可采用现有方法进行判断。

图2给出了每种对齐关系的示意图，其中，图(a)为完全对齐的示意图：矩形之间完全垂直或水平相交；图(b)为交叉全对齐的示意图：矩形之间在垂直或水平方向上存在部分相交；图(c)为完全不对齐的示意图：此时，两者之间没有对齐的元素。

步骤x2、如果所述web页面中存在一个控件满足：与当前焦点控件完全对齐，则将该控件作为所述新焦点控件。

如果所述web页面中仅存在一个控件满足：与当前焦点控件交叉对齐，则将该控件作为所述新焦点控件。

如果所述web页面中的所有控件均与当前焦点控件完全不对齐，则将距离当前焦点控件最近的控件作为所述新焦点控件。

本步骤中，通过按照完全对齐关系最优先、交叉对齐关次优先、距离当前焦点控件最近为最低优先级的方式，确定新焦点控件，可以确保焦点框显示位置的准确性。

步骤103、所述web页面根据所述焦点框绘制信息，在所述web页面的所述新焦点控件处绘制相应焦点框。

本步骤中，web页面收到所述焦点框绘制信息后，即可以在页面的所述新焦点控件处绘制出对应的焦点框，从而可以在页面中呈现新的焦点框。

通过上述实施例可以看出，采用本申请可以有效减少web页面的代码设计量，降低web页面的设计复杂度，降低实现成本。下面以一web页面为例对此效果进一步说明：

对于具有下述页面内容的web页面，进行页面加载后呈现如图3所示的效果，此时焦点位于数字1处，，当操作按键或鼠标操作后，焦点会移动到新的位置(即数字2处)。可见，采用本申请可以大幅度降低web页面的代码复杂度。

与上述方法实施例相对应，本申请还提出了一种web页面焦点导航装置，包括：处理器，所述处理器用于：

当浏览器的web页面检测到焦点切换事件被触发时，利用所述web页面将所述焦点切换事件被触发通知给所述浏览器的内核；

利用所述内核，根据所述焦点切换事件和当前焦点控件的位置，确定相应切换后的新焦点控件，并通知给所述web页面；从所述web页面获取当前页面的焦点框属性信息；根据所述焦点框属性信息，生成相应的焦点框绘制信息，并发送给所述web页面；

利用所述web页面，根据所述焦点框绘制信息，在所述web页面的所述新焦点控件处绘制相应焦点框。

较佳地，所述处理器具体用于：根据所述焦点切换事件和当前焦点控件的位置，确定相应切换后的新焦点控件，包括：

遍历所述web页面中的每个控件，判断该控件和当前焦点控件的对齐关系；

如果所述web页面中存在一个控件满足：与当前焦点控件完全对齐，则将该控件作为所述新焦点控件；

如果所述web页面中仅存在一个控件满足：与当前焦点控件交叉对齐，则将该控件作为所述新焦点控件；

如果所述web页面中的所有控件均与当前焦点控件完全不对齐，则将距离当前焦点控件最近的控件作为所述新焦点控件。

较佳地，所述内核为Blink内核。

此外，本申请还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储指令，所述指令在由处理器执行时使得所述处理器执行如前所述的web页面焦点导航方法的步骤。

此外，本申请还提供了一种电子设备，包括如上所述的非易失性计算机可读存储介质、以及可访问所述非易失性计算机可读存储介质的所述处理器。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。