一种浏览器焦点控制实现方法及实现系统与流程

本发明涉及浏览器焦点控制技术领域，尤其涉及一种浏览器焦点控制实现方法及实现系统。

背景技术：

伴随着互联网技术的飞速发展，具有上网功能的设备越来越多。比如手机、电脑，pad，机顶盒，手表，手持设备等等。传统上网途径浏览网页时，可以使用鼠标或触摸屏等直接于网页中众多焦点元素中选取目标。而对于非鼠标和触摸的方式的设备来说浏览网页并不是很方便。现有的技术并没有友好的支持使用方向键来控制焦点方式来浏览网页。

目前非鼠标和触摸的方式的设备中按方向键，浏览器重新在DOM树(DOM为Document Object Model的简写，即文档对象模型)中遍历焦点，在给定初始焦点后，按照固有算法重新计算选取距离最近的DOM树节点作为下一个焦点，并按此方法移动焦点，移动效率低下，容易出现误操作，也不方便于开发人员调试。

因此，现有技术还有待于改进和发展。

技术实现要素：

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种浏览器焦点控制实现方法及实现系统，旨在解决现有技术中非鼠标和触摸的方式的设备浏览网页中控制焦点移动效率低下，容易出现误操作，也不方便于开发人员调试的问题。

本发明解决技术问题所采用的技术方案如下：

一种浏览器焦点控制实现方法，其中，包括以下步骤：

网页加载完成时，选取一可视dom树节点为初始焦点，并遍历网页中所有可视的dom树节点；

将初始焦点及网页中所有可视的dom树节点按升序设置编号，依序获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；

当接收到方向键按键指令时则根据当前焦点遍历dom树，并查询与当前焦点相对应相邻节点编号信息中所包括的编号值是否与目标dom树节点的编号相同；

若与当前焦点相对应相邻节点编号信息中所包括的编号值与目标dom树节点的编号相同时，则将当前焦点移动至目标dom树节点。

所述浏览器焦点控制实现方法，其中，所述网页加载完成时，选取一可视dom树节点为初始焦点，并遍历网页中所有可视的dom树节点的步骤具体包括：

网页加载完成时，选取一可视dom树节点为初始焦点；

遍历网页中所有可视的dom树节点，并得到每一dom树节点的位置信息和大小信息。

所述浏览器焦点控制实现方法，其中，所述将初始焦点及网页中所有可视的dom树节点按升序设置编号，依序获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息的步骤具体包括：

对初始焦点及网页中所有可视的dom树节点设置编号，及设置包括向上相邻节点编号、向下相邻节点编号、向左相邻节点编号、向右相邻节点编号的相邻节点编号信息；

对初始焦点及网页中所有可视的dom树节点的编号按升序赋值，其中初始焦点的编号设置为0，网页中所有可视的dom树节点的编号从1开始升序设置，且编号均为整数；

依序计算获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；其中，若初始焦点及网页中所有可视的dom树节点中有节点的左侧、右侧、上侧或下侧无相邻节点，则对应将向上相邻节点编号、向下相邻节点编号、向左相邻节点编号或向右相邻节点编号置为-1。

所述浏览器焦点控制实现方法，其中，所述当接收到方向键按键指令时则根据当前焦点遍历dom树，并查询与当前焦点相对应相邻节点编号信息中所包括的编号值是否与目标dom树节点的编号相同的步骤中具体包括：

当接收到方向键按键指令时，则以当前焦点为起始点遍历dom树；

查询与当前焦点的向上相邻节点编号、向下相邻节点编号、向左相邻节点编号或向右相邻节点编号的编号值是否与目标dom树节点的编号相同。

所述浏览器焦点控制实现方法，其中，所述当接收到方向键按键指令时则根据当前焦点遍历dom树，并查询与当前焦点相对应相邻节点编号信息中所包括的编号值是否与目标dom树节点的编号相同的步骤之后还包括：

当检测到页面有更新时，则返回执行网页加载完成时，选取一可视dom树节点为初始焦点，并遍历网页中所有可视的dom树节点的步骤。

一种浏览器焦点控制实现系统，其中，包括：

初始化及遍历模块，用于网页加载完成时，选取一可视dom树节点为初始焦点，并遍历网页中所有可视的dom树节点；

编号设置模块，用于将初始焦点及网页中所有可视的dom树节点按升序设置编号，依序获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；

判断模块，用于当接收到方向键按键指令时则根据当前焦点遍历dom树，并查询与当前焦点相对应相邻节点编号信息中所包括的编号值是否与目标dom树节点的编号相同；

焦点移动控制模块，用于若与当前焦点相对应相邻节点编号信息中所包括的编号值与目标dom树节点的编号相同时，则将当前焦点移动至目标dom树节点。

所述浏览器焦点控制实现系统，其中，所述初始化及遍历模块具体包括：

初始焦点选取单元，用于网页加载完成时，选取一可视dom树节点为初始焦点；

dom树节点遍历单元，用于遍历网页中所有可视的dom树节点，并得到每一dom树节点的位置信息和大小信息。

所述浏览器焦点控制实现系统，其中，所述编号设置模块具体包括：

参数定义单元，用于对初始焦点及网页中所有可视的dom树节点设置编号，及设置包括向上相邻节点编号、向下相邻节点编号、向左相邻节点编号、向右相邻节点编号的相邻节点编号信息；

编号赋值单元，用于对初始焦点及网页中所有可视的dom树节点的编号按升序赋值，其中初始焦点的编号设置为0，网页中所有可视的dom树节点的编号从1开始升序设置，且编号均为整数；

相邻节点编号信息获取单元，用于依序计算获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；其中，若初始焦点及网页中所有可视的dom树节点中有节点的左侧、右侧、上侧或下侧无相邻节点，则对应将向上相邻节点编号、向下相邻节点编号、向左相邻节点编号或向右相邻节点编号置为-1。

所述浏览器焦点控制实现系统，其中，所述判断模块具体包括：

方向键检测单元，用于当接收到方向键按键指令时，则以当前焦点为起始点遍历dom树；

查询单元，用于查询与当前焦点的向上相邻节点编号、向下相邻节点编号、向左相邻节点编号或向右相邻节点编号的编号值是否与目标dom树节点的编号相同。

所述浏览器焦点控制实现系统，其中，还包括：

更新模块，用于当检测到页面有更新时，则返回启动初始化及遍历模块。

有益效果：本发明所述浏览器焦点控制实现方法及实现系统，用户使用非鼠标和触摸的方式的设备浏览网页时，检测到用户按方向键时，不用每次都需要遍历并去计算每个dom树的布局大小，最佳距离等，通过编号即可找到潜在要切换的焦点，这样节省了二次计算的过程，更加利于使用方向键方式浏览网页，而且方便于开发人员调试。

附图说明

图1是本发明中所述浏览器焦点控制实现方法较佳实施例的流程图；

图2是本发明中网页包括7个dom树节点的编号及相邻节点编号信息示意图；

图3是本发明中所述浏览器焦点控制实现系统较佳实施例的结构框图。

具体实施方式

为使本发明的目的、技术方案及优点更加清楚、明确，以下参照附图，并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，其为本发明中所述浏览器焦点控制实现方法较佳实施例的流程图。如图1所示，所述浏览器焦点控制实现方法，包括以下步骤：

步骤S100、网页加载完成时，选取一可视dom树节点为初始焦点，并遍历网页中所有可视的dom树节点；

步骤S200、将初始焦点及网页中所有可视的dom树节点按升序设置编号，依序获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；

步骤S300、当接收到方向键按键指令时则根据当前焦点遍历dom树，并查询与当前焦点相对应相邻节点编号信息中所包括的编号值是否与目标dom树节点的编号相同；

步骤S400、若与当前焦点相对应相邻节点编号信息中所包括的编号值与目标dom树节点的编号相同时，则将当前焦点移动至目标dom树节点。

本发明的实施例中，当网页加载完成时，则选取一个可见的dom树节点作为初始焦点，然后对dom树节点遍历，根据可视的dom树节点的矩形框的位置给每一个dom树节点做一个标记，之后每次按方向键时即可根据该标记来移动焦点。而且，在网页有动态刷新更新，同时刷新每个dom树节点的标记。

这样，当用户按方向键时候不用每次都需要遍历并去计算每个dom树的布局大小，最佳距离等。通过编号即可找到潜在要切换的焦点，这样节省了二次计算的过程

优选的，作为本发明所述浏览器焦点控制实现方法的具体实施例，所述步骤S100具体包括：

步骤S101、网页加载完成时，选取一可视dom树节点为初始焦点；

步骤S102、遍历网页中所有可视的dom树节点，并得到每一dom树节点的位置信息和大小信息。

优选的，作为本发明所述浏览器焦点控制实现方法的具体实施例，所述步骤S200具体包括：

步骤S201、对初始焦点及网页中所有可视的dom树节点设置编号，及设置包括向上相邻节点编号、向下相邻节点编号、向左相邻节点编号、向右相邻节点编号的相邻节点编号信息；

步骤S202、对初始焦点及网页中所有可视的dom树节点的编号按升序赋值，其中初始焦点的编号设置为0，网页中所有可视的dom树节点的编号从1开始升序设置，且编号均为整数；

步骤S203、依序计算获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；其中，若初始焦点及网页中所有可视的dom树节点中有节点的左侧、右侧、上侧或下侧无相邻节点，则对应将向上相邻节点编号、向下相邻节点编号、向左相邻节点编号或向右相邻节点编号置为-1。

请参考图2，其为网页中包括7个dom树节点的编号及相邻节点编号信息示意图。在步骤S201中，对dom树中每个dom树节点给定一个编号index和四个标记，分别是indexUp，indexDown，indexLeft，indexRight，其中indexUp表示向上相邻节点编号、indexDown表示向下相邻节点编号、indexLeft表示向左相邻节点编号、indexRight表示向右相邻节点编号。

之后，在步骤S202中，将初始焦点的编号设置为0，即记为index(0)，其他的dom树节点依次编号，且每个dom树节点的编号不能相同。最佳的，按升序的方式对除初始焦点外的dom树节点进行编号。图2中，除了index(0)的另外6个dom树节点分别记为index(1)、index(2)、index(3)、index(4)、index(5)、index(6)。

在步骤S203中，以初始焦点的dom树节点为起点。先计算初始焦点的上下左右的节点，并把对应的dom树节点编号记录在indexUp，indexDown，indexLeft，indexRight。如果dom树节点节点的上侧、下侧、左侧或右侧没有下一个节点，则把对应的值改为-1；例如index（0）已经是网页布局中位置最靠上的节点了，把这个dom树节点的indexUp值改为-1。如此按照步骤S203，把所有的dom树节点的indexUp，indexDown，indexLeft，indexRight都记录上。

优选的，作为本发明所述浏览器焦点控制实现方法的具体实施例，所述步骤S300具体包括：

步骤S301、当接收到方向键按键指令时，则以当前焦点为起始点遍历dom树；

步骤S302、查询与当前焦点的向上相邻节点编号、向下相邻节点编号、向左相邻节点编号或向右相邻节点编号的编号值是否与目标dom树节点的编号相同。

当用户按方向键的时候，遍历一次dom树，如果indexUp，indexDown，indexLeft，indexRight中记录的值和dom树节点的编号相同，则是需要切换的焦点。找到这个候选焦点后，把焦点移动到这个候选焦点上。

例如，若当前焦点处于初始焦点index（0），index（0）所述对应的相邻节点编号信息记为indexUp（-1），indexDown（2），indexLeft（-1），indexRight（1）。当用户按下向左的方向键时，则当前焦点不移动；当用户按下向上的方向键时，则当前焦点不移动；当用户按下向下的方向键时，则当前焦点移动至index（2）；当用户按下向右的方向键时，则当前焦点移动至index（1）。

优选的，作为本发明所述浏览器焦点控制实现方法的具体实施例，所述步骤S400之后还包括：

步骤S500、当检测到页面有更新时，则返回执行网页加载完成时，选取一可视dom树节点为初始焦点，并遍历网页中所有可视的dom树节点的步骤。

当页面有动态更新、或局部刷新的时候，需要重新给定所有dom树节点的编号，并重新计算所有dom树节点的indexUp，indexDown，indexLeft，indexRight的值。

可见，本发明提供了快速切换焦点的方式，把所有dom树节点都标记起来，并且记下每个dom树节点上下左右的节点，切换焦点时只需要找到编号即可。

基于上述方法实施例，本发明还提供了一种浏览器焦点控制实现系统。如图3所示，所述浏览器焦点控制实现系统包括：

初始化及遍历模块100，用于网页加载完成时，选取一可视dom树节点为初始焦点，并遍历网页中所有可视的dom树节点；

编号设置模块200，用于将初始焦点及网页中所有可视的dom树节点按升序设置编号，依序获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；

判断模块300，用于当接收到方向键按键指令时则根据当前焦点遍历dom树，并查询与当前焦点相对应相邻节点编号信息中所包括的编号值是否与目标dom树节点的编号相同；

焦点移动控制模块400，用于若与当前焦点相对应相邻节点编号信息中所包括的编号值与目标dom树节点的编号相同时，则将当前焦点移动至目标dom树节点。

优选的，在所述浏览器焦点控制实现系统中，所述初始化及遍历模块100具体包括：

初始焦点选取单元，用于网页加载完成时，选取一可视dom树节点为初始焦点；

dom树节点遍历单元，用于遍历网页中所有可视的dom树节点，并得到每一dom树节点的位置信息和大小信息。

优选的，在所述浏览器焦点控制实现系统中，所述编号设置模块200具体包括：

参数定义单元，用于对初始焦点及网页中所有可视的dom树节点设置编号，及设置包括向上相邻节点编号、向下相邻节点编号、向左相邻节点编号、向右相邻节点编号的相邻节点编号信息；

编号赋值单元，用于对初始焦点及网页中所有可视的dom树节点的编号按升序赋值，其中初始焦点的编号设置为0，网页中所有可视的dom树节点的编号从1开始升序设置，且编号均为整数；

相邻节点编号信息获取单元，用于依序计算获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；其中，若初始焦点及网页中所有可视的dom树节点中有节点的左侧、右侧、上侧或下侧无相邻节点，则对应将向上相邻节点编号、向下相邻节点编号、向左相邻节点编号或向右相邻节点编号置为-1。

优选的，在所述浏览器焦点控制实现系统中，所述判断模块300具体包括：

方向键检测单元，用于当接收到方向键按键指令时，则以当前焦点为起始点遍历dom树；

查询单元，用于查询与当前焦点的向上相邻节点编号、向下相邻节点编号、向左相邻节点编号或向右相邻节点编号的编号值是否与目标dom树节点的编号相同。

优选的，在所述浏览器焦点控制实现系统中，还包括：

更新模块，用于当检测到页面有更新时，则返回启动初始化及遍历模块。

综上所述，本发明所述浏览器焦点控制实现方法及实现系统，方法包括：网页加载完成时，选取一可视dom树节点为初始焦点，并遍历网页中所有可视的dom树节点；将初始焦点及网页中所有可视的dom树节点按升序设置编号，依序获取初始焦点及网页中所有可视的dom树节点的相邻节点编号信息；当接收到方向键按键指令时则根据当前焦点遍历dom树，并查询与当前焦点相对应相邻节点编号信息中所包括的编号值是否与目标dom树节点的编号相同；若与当前焦点相对应相邻节点编号信息中所包括的编号值与目标dom树节点的编号相同时，则将当前焦点移动至目标dom树节点。用户使用非鼠标和触摸的方式的设备浏览网页时，检测到用户按方向键时，不用每次都需要遍历并去计算每个dom树的布局大小，最佳距离等，通过编号即可找到潜在要切换的焦点，这样节省了二次计算的过程，更加利于使用方向键方式浏览网页，而且方便于开发人员调试。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。