CN105824925B - 基于浏览器网页元素的动态标注方法 - Google Patents

Abstract

本发明公开了一种基于浏览器网页元素的动态标注方法，所述的方法包括：步骤1、打开浏览器，初始化一个空页面；步骤2、打开一个网页，浏览器对网页进行HTML解析，解析出这个网页中可操作资源元素的标签；步骤3、计算步骤2中所解析出的可操作资源元素的标签的坐标；步骤4、叠加标注到所解析出的可操作资源元素的标签之上。本发明的方法是对网页资源元素加入一个标注，能够引导用户，给用户带来操作的便捷，能够促进用户与网页资源进行良好的互动，能够显著提升用户体验。

Description

基于浏览器网页元素的动态标注方法

技术领域

本发明涉及浏览器技术领域，具体涉及一种基于浏览器网页元素的动态标注方法。

背景技术

随着互联网技术的发展和主干网设备的升级，用户感知的网速得到了很大程度的提升，互联网中传递的图片、视频等各种资源不断增多。从人的感觉而言，图片带来的视觉感受强于文字描述，并且视频资源也可归于图片一类，所以有人称互联网正在进入一个“读图时代”。一方面是网络上各种资源的疯长，另一方面在智能电视、智能盒子上的嵌入式浏览器网页中对资源元素的某些操作被隐蔽或者操作方式不友好，这使用户的体验不能匹配网络中资源的增加带来的体验。

对上述问题，给出一个具体事例，比如在智能移动终端的浏览器中呈现一段视频，某用户打算对这段视频做某项操作，如分享给朋友或者保存视频，现存的方案主要是“长按”视频，将会弹出操作选项对话框，然而某些用户并不知道这种方法，面对这类需求的时候，就会显得束手无策；比如对大型页面，焦点在页面顶部，而需要对页面底部的一个输入框输入文字，需要多个步骤才可以达到页面底部的输入框，影响用户的交互体验，本发明正是针对上述浏览器对网页资源元素操作不友好的问题，做出的改进甚至创新，本发明是对网页资源元素加入一个标注，能够一定程度上引导用户与给用户带来操作的便捷，能够促进用户与网页资源进行良好的互动，通过本发明的方法也可以显著提升用户体验。

发明内容

本发明克服了现有技术的不足，提供一种基于浏览器网页元素的动态标注方法。

考虑到现有技术的上述问题，根据本发明公开的一个方面，本发明采用以下技术方案：

一种基于浏览器网页元素的动态标注方法，所述的方法包括以下步骤：

步骤1、打开浏览器，初始化一个空页面；

步骤2、打开一个网页，浏览器对网页进行HTML解析，解析出这个网页中可操作资源元素的标签；

步骤3、计算步骤2中所解析出的可操作资源元素的标签的坐标；

步骤4、叠加标注到所解析出的可操作资源元素的标签之上。

为了更好地实现本发明，进一步的技术方案是：

根据本发明的一个实施方案，步骤2中所述的解析出网页中可操作资源元素的标签形成为一颗DOM树。

更进一步的技术方案：所述步骤3具体为：

将解析出的可操作资源元素的标签的offsetTop值和offsetLeft值与其所对应的父容器的offsetTop值和offsetLeft值相加，然后再将所相加得到的offsetTop值和offsetLeft值加到其前述父容器的父容器上，累计叠加offsetTop值和offsetLeft值直到根容器，最后累加所得的offsetTop值和offsetLeft值便是可操作资源元素的标签的绝对坐标值，计算出的可操作资源元素的标签的绝对坐标值信息将保存在可操作资源元素的标签中；

其中：

offsetLeft值：为可操作资源元素的标签左上角与其父容器左上角的水平方向距离；

offsetTop值：为可操作资源元素的标签左上角与其父容器左上角的垂直方向距离。

再更进一步的技术方案：在当前打开的网页页面被刷新或者网页页面内的部分区域被刷新时，将重新执行步骤2，然后依次执行到步骤4，并重新在需要的网页元素上添加标注，完成对网页元素标注的动态添加。

与现有技术相比，本发明的有益效果之一是：

本发明的方法是对网页资源元素加入一个标注，能够引导用户，给用户带来操作的便捷，能够促进用户与网页资源进行良好的互动，能够显著提升用户体验。

附图说明

为了更清楚的说明本申请文件实施例或现有技术中的技术方案，下面将对实施例或现有技术的描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅是对本申请文件中一些实施例的参考，对于本领域技术人员来讲，在不付出创造性劳动的情况下，还可以根据这些附图得到其它的附图。

图1示出了根据本发明一个实施例的基于浏览器网页元素的动态标注方法的工作流程图。

图2示出了根据本发明一个实施例的基于浏览器网页元素的动态标注方法的效果示意图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例

一种基于浏览器网页元素的动态标注方法，参见图1所示，根据本发明的一个实施例，该方法包括以下步骤：

步骤1、打开浏览器，初始化一个空页面。

步骤2、打开一个网页，浏览器对网页进行HTML解析，解析出这个网页中可操作资源元素的标签。

所解析出网页中可操作资源元素的标签形成为一颗DOM树。网页中的标签是HTML语言中的基本单位，也是组成HTML语言的重要组成部分，浏览器进行解析便是把从服务器请求下来的HTML文件解析出标签，形成DOM树。因为不可被操作资源元素的标签所对应的资源是不能被操作或者用户不会去操作这些资源，解析网页中可操作资源元素的标签，这样能够减轻下一步骤中坐标的计算时间，其在不降低技术方案实施效果的前提下，从总体上提升了技术方案的实现效率。

步骤3、计算步骤2中所解析出的可操作资源元素的标签的坐标。

具体为：

将解析出的可操作资源元素的标签的offsetTop值和offsetLeft值与其所对应的父容器的offsetTop值和offsetLeft值相加，然后再将所相加得到的offsetTop值和offsetLeft值加到其前述父容器的父容器上，累计叠加offsetTop值和offsetLeft值直到根容器，最后累加所得的offsetTop值和offsetLeft值便是可操作资源元素的标签的绝对坐标值，计算出的可操作资源元素的标签的绝对坐标值信息将保存在可操作资源元素的标签中，在页面显示时被应用。

其中：

offsetLeft值：为可操作资源元素的标签左上角与其父容器左上角的水平方向距离；

offsetTop值：为可操作资源元素的标签左上角与其父容器左上角的垂直方向距离。

并且在相加时是offsetLeft值与offsetLeft值相加，offsetTop值与offsetTop值相加。

步骤4、叠加标注到所解析出的可操作资源元素的标签之上。

这一步操作是本发明的关键步骤，在这一步骤中，根据设计需求，在解析出的可操作资源元素的标签上叠加一个标签。在原网页可操作资源元素的标签上叠加标注属性对应的标签之后，在浏览器显示的网页上将显示出这种标注，这种标注的表现形式根据叠加的元素标签属性而定。标注效果是在原网页可操作资源元素上显示出双重属性，但不会改变原网页资源元素的属性。

如果当前打开的网页页面被刷新或者当前网页页面内的部分区域被刷新，将重新执行步骤2，然后依次执行到步骤4，将重新在需要的网页元素上添加标注，完成对网页元素标注的动态添加。这对页面内的部分区域刷新非常有用，因为如果对部分刷新的页面不更新标注，用户体验将会大幅降低，所以动态标注是非常的必要。

根据我们的需求，在获取的网页元素标签上叠加一个用于标注的标签。在原网页元素标签上叠加之后，这种标签的内在属性将在浏览器页面上以标注的形式显现出，在浏览器页面内显示出的效果是原网页元素标签有双重属性，而不会改变原网页元素标签的属性，参照图2所示。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同相似部分相互参见即可。

除上述以外，还需要说明的是，在本说明书中所谈到的“一个实施例”、“另一个实施例”、“实施例”等，指的是结合该实施例描述的具体特征、结构或者特点包括在本申请概括性描述的至少一个实施例中。在说明书中多个地方出现同种表述不是一定指的是同一个实施例。进一步来说，结合任一实施例描述一个具体特征、结构或者特点时，所要主张的是结合其他实施例来实现这种特征、结构或者特点也落在本发明的范围内。

尽管这里参照本发明的多个解释性实施例对本发明进行了描述，但是，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。更具体地说，在本申请公开和权利要求的范围内，可以对主题组合布局的组成部件和/或布局进行多种变型和改进。除了对组成部件和/或布局进行的变型和改进外，对于本领域技术人员来说，其他的用途也将是明显的。

Claims (3)

1.一种基于浏览器网页元素的动态标注方法，其特征在于，所述的方法包括以下步骤：

步骤1、打开浏览器，初始化一个空页面；

步骤2、打开一个网页，浏览器对网页进行HTML解析，解析出这个网页中可操作资源元素的标签；

步骤3、计算步骤2中所解析出的可操作资源元素的标签的坐标；所述步骤3具体为：

将解析出的可操作资源元素的标签的offsetTop值和offsetLeft值与其所对应的父容器的offsetTop值和offsetLeft值相加，然后再将所相加得到的offsetTop值和offsetLeft值加到其所述父容器的父容器上，累计叠加offsetTop值和offsetLeft值直到根容器，最后累加所得的offsetTop值和offsetLeft值便是可操作资源元素的标签的绝对坐标值，计算出的可操作资源元素的标签的绝对坐标值信息将保存在可操作资源元素的标签中；

其中：

offsetLeft值：为可操作资源元素的标签左上角与其父容器左上角的水平方向距离；

offsetTop值：为可操作资源元素的标签左上角与其父容器左上角的垂直方向距离；

步骤4、叠加标注到所解析出的可操作资源元素的标签之上。

2.根据权利要求1所述的基于浏览器网页元素的动态标注方法，其特征在于：步骤2中所述的解析出这个网页中可操作资源元素的标签形成为一颗DOM树。

3.根据权利要求1所述的基于浏览器网页元素的动态标注方法，其特征在于：在当前打开的网页页面被刷新或者网页页面内的部分区域被刷新时，将重新执行步骤2，然后依次执行到步骤4，并重新在需要的网页元素上添加标注，完成对网页元素标注的动态添加。