CN114117296A

CN114117296A - Html页面标注方法、装置及存储介质

Info

Publication number: CN114117296A
Application number: CN202111347919.4A
Authority: CN
Inventors: 唐恒; 何丹阳; 张丰; 文朝
Original assignee: Bangdao Technology Co ltd
Current assignee: Bangdao Technology Co ltd
Priority date: 2021-11-15
Filing date: 2021-11-15
Publication date: 2022-03-01

Abstract

本发明提供一种HTML页面标注方法、装置及存储介质，所述方法包括：通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；通过所述交互窗口获得标注信息，将所述位置信息和所述标注信息保存到数据库中，其中所述位置信息与所述标注信息相对应；从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息。本发明所提供的HTML页面标注方法简化了对HTML页面添加标注信息需要截图并通过第三方工具传输文件的繁琐操作，可以极大的提高信息标注效率。

Description

HTML页面标注方法、装置及存储介质

技术领域

本发明涉及互联网开发领域中的HTML技术，特别地，涉及到一种HTML页面标注方法、装置及存储介质。

背景技术

HTML的英文全称是Hyper Text Markup Language，即超文本标记语言，用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(例如，UNIX，Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。

在现有的技术中，假设用户需要对HTML页面某部分打上额外标注信息，信息的展示方式包含文本、图形、表格、动画、链接等等，但又希望HTML页面本体维持原状，往往只能通过对HTML页面进行截图，保持至Word或WPS等类似软件，并在期望产生标注的位置附上文字说明，最后再把文档通过文件传输工具，把HTML页面附着文字、图片信息的标注文档传输给需要分享的目标用户。此方法效率较低，需要通过多个第三方工具完成，且只能记录一些静态的HTML页面。

发明内容

本发明提供一种HTML页面标注方法、装置及存储介质，简化了对HTML页面添加标注信息需要截图并通过第三方工具传输文件的繁琐操作，可以极大的提高信息标注效率。

具体地，本发明是通过以下技术方案来实现的：

第一方面，本发明提供了一种HTML页面标注方法，所述方法包括：

通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；

将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；

通过所述交互窗口获得标注信息，将所述位置信息和所述标注信息保存到数据库中，其中所述位置信息与所述标注信息相对应。

进一步地，所述方法还包括：

从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息。

进一步地，根据所述位置信息，在所述HTML页面中展示所述标注信息包括：

根据所述位置信息确定相对于所述HTML页面DOM根节点的偏移量，

基于所述偏移量计算确定所述标注信息的渲染展示位置，

将所述标注信息的定位方式设置为绝对定位，并且将所述标注信息在文档流中z轴层叠展示的顺序权重调到最高。

进一步地，所述脚本存储在服务器中，在使用时加载到HTML页面的body节点之后。

进一步地，通过HTML页面的Document接口，将所述脚本插入所述HTML页面。

进一步地，从所述数据库获取所述位置信息和所述标注信息包括：通过标注服务端接口从所述数据库获取所述位置信息和所述标注信息，其中所述标注服务端接口用于与所述数据库进行数据传输。

进一步地，所述标注信息包括文本、图形、表格、动画、链接中的至少一种。

第二方面，本发明又提供了一种HTML页面标注装置，所述装置包括：

位置信息获取模块，通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；

交互窗口生成模块，将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；

标注信息获取模块，通过所述交互窗口获得标注信息；

信息存储模块，将所述位置信息和所述标注信息保存到数据库中。

标注信息展示模块，从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息。

第三方面，本发明又提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现如第一方面的中任一项所述的HTML页面标注方法的步骤。

第四方面，本发明又提供了一种非暂态计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面的中任一项所述的HTML页面标注方法的步骤。

本发明通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；通过所述交互窗口获得标注信息，将所述位置信息和所述标注信息保存到数据库中，其中所述位置信息与所述标注信息相对应；从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息，简化了对HTML页面添加标注信息需要截图并通过第三方工具传输文件的繁琐操作，极大地提高了信息标注效率，从而克服了现有技术中存在的问题。

附图说明

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

图1是根据本发明的一个实施例的HTML页面标注方法的流程图；

图2是根据本发明的另一个实施例的HTML页面标注方法的流程图；

图3是根据本发明的又一个实施例的HTML页面标注装置的流程图；

图4是根据本发明的又一个实施例的电子设备的结构示意图。

具体实施方式

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

图1是根据本发明的一个实施例的HTML页面标注方法的流程图。参照图1，该方法可以包括如下步骤：

步骤101：通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；

步骤102：将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；

步骤103：通过所述交互窗口获得标注信息，将所述位置信息和所述标注信息保存到数据库中，其中所述位置信息与所述标注信息相对应。

具体地，该HTML页面标注方法的具体过程可以包括：

在访问需要标注的宿主页面(即HTML页面)时，首先通过需要获取宿主页面窗口的全局变量，通过HTML标准事件获取鼠标点击HTML页面时的位置信息，即通过HTML标准事件中的鼠标事件(Mouse Event)实时捕获用户鼠标点击行为，获取鼠标事件发生时相对于用户屏幕的水平坐标位置screen X和鼠标事件发生时相对于用户屏幕的垂直坐标位置screen Y，并记录该位置信息。

进一步，将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；其中该脚本是预先配置完成、存储在服务器中，并且可以随时加载使用的代码片段，该脚本用于生成交互弹窗，方便用户根据页面位置填写标注信息，并且交互窗口与所记录的位置信息相对应，在使用时通过HTML页面的Document接口，将该脚本加载到HTML页面的body节点之后。另外，用户通过交互窗口标注的标注信息可以包括文本、图形、表格、动画、链接中的至少一种。

进一步，通过交互窗口获得标注信息，将位置信息和标注信息通过用于与数据库进行数据传输的标注服务端接口保存到数据库中，其中该位置信息与该标注信息相对应。

图2是根据本发明的另一个实施例的HTML页面标注方法的流程图；参照图2，该方法还可以包括：

步骤204：从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息。

在通过上述的HTML页面标注方法完成信息标注之后，再次打开该HTML页面时，可以从数据库获取位置信息和对应的标注信息，并且根据该位置信息，在该HTML页面中展示相应的标注信息。具体地，在获取到标注信息后，可以提取该标注信息的位置信息(即坐标信息)，根据该坐标信息来确定相对于HTML页面(宿主页面)DOM根节点的偏移量，然后基于该偏移量来计算确定该标注信息的渲染展示的位置，进一步地，设置该标注信息在宿主页面中的定位方式为绝对定位，脱离原有的文档流布局，同时将标注信息在文档流中z轴层叠展示的顺序权重调到最高，以展示标注信息。另外需要说明的是，通过标注服务端接口从数据库获取位置信息和标注信息，其中标注服务端接口用于与数据库进行数据传输，并且其中该标注信息包括文本、图形、表格、动画、链接中的至少一种。

本实施例中的步骤201、202、203与前述实施例中的步骤101、102、103完全相同，因此省略对其的详细描述。另外，加载该脚本的具体过程可以包括：通过浏览器加载到宿主页面中，遍历Html元素DOM节点树，找到body节点后插入script标签，指定src来源为脚本地址，给script标签绑定加载成功事件回调函数，当加载完成后执行脚本代码，最终通过访问和操作网页内容的入口Document接口，进行页面节点操作。

由以上可知，本发明提供的HTML页面标注方法通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；通过所述交互窗口获得标注信息，将所述位置信息和所述标注信息保存到数据库中，其中所述位置信息与所述标注信息相对应；从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息，简化了对HTML页面添加标注信息需要截图并通过第三方工具传输文件的繁琐操作，极大地提高了信息标注效率，从而克服了现有技术中存在的问题。

另外，本发明的实施例提供了一种HTML页面标注装置，该装置包括：

标注信息获取模块，通过所述交互窗口获得标注信息；

由于本发明实施例提供的HTML页面标注装置，可以用于执行上述实施例所述的HTML页面标注方法，其工作原理和有益效果类似，故此处不再详述，具体内容可参见上述实施例的介绍。

基于相同的发明构思，本发明又一实施例提供了一种电子设备，参见图4，所述电子设备具体包括如下内容：处理器401、存储器402、通信接口403和通信总线404；其中，所述处理器401、存储器402、通信接口403通过所述通信总线404完成相互间的通信。

所述处理器401用于调用所述存储器402中的计算机程序，所述处理器执行所述计算机程序时实现上述的HTML页面标注方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述过程：通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；通过所述交互窗口获得标注信息，将所述位置信息和所述标注信息保存到数据库中，其中所述位置信息与所述标注信息相对应；从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息。

可以理解的是，所述计算机程序可以执行的细化功能和扩展功能可参照上面实施例的描述。

基于相同的发明构思，本发明又一实施例提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述的HTML页面标注方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述过程：通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；通过所述交互窗口获得标注信息，将所述位置信息和所述标注信息保存到数据库中，其中所述位置信息与所述标注信息相对应；从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息。

基于相同的发明构思，本发明又一实施例提供了一种计算机程序产品，所计算机程序产品包括有计算机程序，该计算机程序被处理器执行时实现上述的HTML页面标注方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述过程：通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；将脚本插入所述HTML页面，基于所述脚本并且根据所述位置信息生成交互窗口；通过所述交互窗口获得标注信息，将所述位置信息和所述标注信息保存到数据库中，其中所述位置信息与所述标注信息相对应；从所述数据库获取所述位置信息和所述标注信息，并且根据所述位置信息，在所述HTML页面中展示所述标注信息。

此外，上述的存储器中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的HTML页面标注方法。

此外，在本发明中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

此外，在本发明中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

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

Claims

1.一种HTML页面标注方法，其特征在于，包括：

通过HTML标准事件获取鼠标点击所述HTML页面时的位置信息；

2.根据权利要求1所述的HTML页面标注方法，其特征在于，还包括：

3.根据权利要求2所述的HTML页面标注方法，其特征在于，所述根据所述位置信息，在所述HTML页面中展示所述标注信息包括：

基于所述偏移量计算确定所述标注信息的渲染展示位置，

4.根据权利要求1所述的HTML页面标注方法，其特征在于，所述脚本存储在服务器中，在使用时加载到HTML页面的body节点之后。

5.根据权利要求1所述的HTML页面标注方法，其特征在于，通过HTML页面的Document接口，将所述脚本插入所述HTML页面。

6.根据权利要求2所述的HTML页面标注方法，其特征在于，所述从所述数据库获取所述位置信息和所述标注信息包括：通过标注服务端接口从所述数据库获取所述位置信息和所述标注信息，其中所述标注服务端接口用于与所述数据库进行数据传输。

7.根据权利要求1至6任一项所述的HTML页面标注方法，其特征在于，所述标注信息包括文本、图形、表格、动画、链接中的至少一种。

8.一种HTML页面标注装置，其特征在于，所述装置包括：

标注信息获取模块，通过所述交互窗口获得标注信息；

9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至7任一项所述的HTML页面标注方法的步骤。

10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的HTML页面标注方法的步骤。