CN104899319B - 一种网页图标加载方法及装置 - Google Patents

Abstract

本申请公开了一种网页图标加载方法及装置，预先获取图标集合，该集合中各个图标的图标标识不同，用户若要在网页中某个位置加载图标，仅需要在文档树对应节点上输入预置字体类型的文本即可，输入的文本内容为待加载图标的图标标识。这样，通过本申请提供的方法，在遍历网页的文档树时，对于字体类型与预置字体类型一致的文本，从图标集合中选择图标标识与其相同的图标，并利用该图标替换掉文本，从而在网页中显示出图标。本申请的方法仅需要用户输入图标的标识，而无需输入图标的链接地址，从而大大简化了用户工作量，提高了网页开发的速度，并且降低了用户输入错误的概率。

Description

一种网页图标加载方法及装置

技术领域

本申请涉及软件技术领域，更具体地说，涉及一种网页图标加载方法及装置。

背景技术

现在是视觉时代，如何在第一时间抓住人们的视线成为网页制作过程中要重点考虑的一个方面。俗话说，一图胜千言，在网页制作中，准确而合理的运用好图片，能够使得页面设计更加亮丽、内容更加丰富，从而吸引更多用户的点击。

现有在网页中嵌入图标的做法主要是，由用户在html页面中明文使用<img>标签的src属性来引用需要插入的图标。src属性的值为待引用图标的链接地址。

显然，现有技术中需要用户输入待引用图标的链接地址，这给用户带来了很大的不便，即影响网页开发的速度又存在用户输错链接地址，造成图标在网页中无法显示的问题。

发明内容

有鉴于此，本申请提供了一种网页图标加载方法及装置，用于解决现有网页开发过程在嵌入图标时，需要用户输入待嵌入图标的链接地址，因而影响网页开发速度且存在用户输错链接地址，造成图标无法显示的问题。

为了实现上述目的，现提出的方案如下：

一种网页图标加载方法，包括：

遍历网页的文档树，在检测到节点元素是文本时，判断所述文本的字体类型是否与预置字体类型相同，预置字体类型的字体为预先安装的字体；

若是，则从预先获取的图标集合中选择图标标识与所述文本相同的图标；

利用选择的图标替换所述文本，以在网页中显示所选择的图标。

优选地，还包括：

在遍历网页的文档树过程，若检测到图标配置文件，则下载所述图标配置文件指定的图标，并将下载的图标存入所述图标集合中。

优选地，所述图标配置文件包括元标签meta和/或脚本文件，所述下载所述图标配置文件指定的图标，包括：

遍历元标签meta，下载其指定的图标；和/或，

遍历脚本文件，下载其指定的图标。

优选地，所述利用选择的图标替换所述文本，包括：

确定所述选择的图标的统一资源定位符url；

创建标签img，并将所述url作为所述标签img的src属性值，利用所述标签img替换所述文本。

优选地，

在所述图标为图片时，所述从预先获取的图标集合中选择图标标识与所述文本相同的图标，包括：

从预先获取的图标集合中，选择图片标识与所述文本相同的图片；

在所述图标为字符串char时，所述从预先获取的图标集合中选择图标标识与所述文本相同的图标，包括：

从预先获取的图标集合中，选择字符串标识与所述文本相同的字符串char。

一种网页图标加载装置，包括：

文档树遍历单元，用于遍历网页的文档树，在检测到节点元素是文本时，判断所述文本的字体类型是否与预置字体类型相同，预置字体类型的字体为预先安装的字体；

图标选择单元，用于在所述文档树遍历单元判断所述文本的字体类型与所述预置字体类型相同时，从预先获取的图标集合中选择图标标识与所述文本相同的图标；

文本替换单元，用于利用选择的图标替换所述文本，以在网页中显示所选择的图标。

优选地，还包括：

图标下载单元，用于在遍历网页的文档树过程，若检测到图标配置文件，则下载所述图标配置文件指定的图标，并将下载的图标存入所述图标集合中。

优选地，所述图标下载单元包括：

第一图标下载子单元，用于遍历元标签meta，下载其指定的图标；

第二图标下载子单元，用于遍历脚本文件，下载其指定的图标。

优选地，所述文本替换单元包括：

第一文本替换子单元，用于确定所述选择的图标的统一资源定位符url；

第二文本替换子单元，用于创建标签img，并将所述url作为所述标签img的src属性值，利用所述标签img替换所述文本。

优选地，所述图标选择单元包括：

第一图标选择子单元，用于在所述图标为图片时，从预先获取的图标集合中，选择图片标识与所述文本相同的图片；

第二图表选择子单元，用于在所述图标为字符串char时，从预先获取的图标集合中，选择字符串标识与所述文本相同的字符串char。

从上述的技术方案可以看出，本申请实施例提供的网页图标加载方法，预先获取图标集合，该集合中各个图标的图标标识不同，用户若要在网页中某个位置加载图标，仅需要在文档树对应节点上输入预置字体类型的文本即可，输入的文本内容为待加载图标的图标标识。这样，通过本申请提供的方案，在遍历网页的文档树时，对于字体类型与预置字体类型一致的文本，从图标集合中选择图标标识与其相同的图标，并利用该图标替换掉文本，从而在网页中显示出图标。本申请的方法仅需要用户输入图标的标识，而无需输入图标的链接地址，从而大大简化了用户工作量，提高了网页开发的速度，并且降低了用户输入错误的概率。

附图说明

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

图1为本申请实施例公开的一种网页图标加载方法流程图；

图2为本申请实施例公开的另一种网页图标加载方法流程图；

图3为本申请实施例公开的一种利用选择的图标替换文本的方法流程图；

图4为本申请实施例公开的一种网页图标加载装置结构示意图；

图5为本申请实施例公开的另一种网页图标加载装置结构示意图；

图6为本申请实施例公开的一种图标下载单元结构示意图；

图7为本申请实施例公开的一种文本替换单元结构示意图；

图8为本申请实施例公开的一种图标选择单元结构示意图。

具体实施方式

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

本申请实施例公开了一种网页图标加载方案，该方案中，用户需要在终端上安装指定的字体，并预先获取图标集合，该图标集合可以是系统默认提供的图标集合，也可以是用户后期下载并更新的图标集合。图标集合中，各个图标的图标标识不同，其中图标标识为文本格式。用户在网页开发阶段，若要在某个节点插入图标，则可以使用指定字体类型的字体输入待插入图标的图标标识。这样，当浏览器遍历网页的文档树时，在检测到某个节点的文本是指定字体类型的字体时，从图标集合中选择图标标识与该文本相同的图标，利用图标替换掉文本，从而将图标显示在网页中。

下面将对本申请方案进行详细的介绍。

参见图1，图1为本申请实施例公开的一种网页图标加载方法流程图。

如图1所示，该方法包括：

步骤S100、遍历网页的文档树，在检测到节点元素是文本时，判断所述文本的字体类型是否与预置字体类型相同；若是，执行步骤S110；

其中，预置字体类型的字体为预先安装的字体。对于执行方法的终端，已经预先安装了该预置字体类型的字体。这里，预置字体类型可以是传统的黑体、楷体等现有字体，也可以是单独开发出的新字体。

步骤S110、从预先获取的图标集合中选择图标标识与所述文本相同的图标；

这里，预先获取的图标集合可以是系统默认提供的图标集合，也可以由用户预先下载，然后存入图标集合中。图标集合中的各个图标均标识了图标标识，图标标识为文本格式，例如w1等。

步骤S120、利用选择的图标替换所述文本，以在网页中显示所选择的图标。

通过将图标替换掉节点中的文本内容，再经过后期的排版等操作，最终得到的网页中相应位置显示有图标。

本申请实施例提供的网页图标加载方法，预先获取图标集合，该集合中各个图标的图标标识不同，用户若要在网页中某个位置加载图标，仅需要在文档树对应节点上输入预置字体类型的文本即可，输入的文本内容为待加载图标的图标标识。这样，通过本申请提供的方案，在遍历网页的文档树时，对于字体类型与预置字体类型一致的文本，从图标集合中选择图标标识与其相同的图标，并利用该图标替换掉文本，从而在网页中显示出图标。本申请的方法仅需要用户输入图标的标识，而无需输入图标的链接地址，从而大大简化了用户工作量，提高了网页开发的速度，并且降低了用户输入错误的概率。

此外，由于本申请中的图标已经预先下载好了，因此在遍历网页文档树过程，发现某个地方需要插入标签时，直接插入已经下载好的图标即可，无需像现有技术那样再次根据图标的url去服务器请求图标。因而，降低了服务器的请求压力。

需要说明的是，上述图标可以是图片或者字符串char。当图标为图片时，则从预先获取的图标集合中选择图片标识与所述文本相同的图片，并进行替换；当图标为字符串时，则从预先获取的图标集合中选择字符串标识与所述文本相同的字符串char，并利用字符串char替换掉原文本。

在本申请的另一个实施例中，公开了另一种网页图标记载方法。

如图2所示，该方法包括：

步骤S200、在遍历网页的文档树过程，若检测到图标配置文件，则下载所述图标配置文件指定的图标，并将下载的图标存入图标集合中；

具体地，在网页的文档树中还存在一些图标配置文件，图标配置文件可以是脚本文件或者标签文件等，图标配置文件指定了需要下载的图标。通过下载图标配置文件指定的图标，然后将其存储到图标集合中。

当然，上述步骤S200与下述步骤S210-S230的实施顺序并非图2所示的顺序，其在检测到图标配置文件时即执行下载动作。

步骤S210、遍历网页的文档树，在检测到节点元素是文本时，判断所述文本的字体类型是否与预置字体类型相同；若是，执行步骤S110；

其中，预置字体类型的字体为预先安装的字体。对于执行方法的终端，已经预先安装了该预置字体类型的字体。这里，预置字体类型可以是传统的黑体、楷体等现有字体，也可以是单独开发出的新字体。

步骤S220、从预先获取的图标集合中选择图标标识与所述文本相同的图标；

这里，预先获取的图标集合可以是系统默认提供的图标集合，也可以由用户预先下载，然后存入图标集合中。图标集合中的各个图标均标识了图标标识，图标标识为文本格式，例如/w1等。

步骤S230、利用选择的图标替换所述文本，以在网页中显示所选择的图标。

相比于上一实施例，本实施例中增加了图标下载的过程。需要说明的是，网页文档树遍历过程所下载的图标并不能够为本次图标加载所用，其仅仅是为了后续遍历其它网页文档树时，加载图标所使用。

具体地，在下载图标文件时，可以按照下述两种方式下载：

第一，遍历元标签meta，下载其指定的图标。

举例如，<meta name＝”downloadIcons”content＝”url”>//url指图标icons文件路径。

第二，遍历脚本文件，下载其指定的图标。

举例如，<script>脚本指定下载，js方法如下:

iPanel.downloadicons(“url”)；//url指图标icons文件路径。

在本申请的又一个实施例中，我们公开了一种利用选择的图标替换所述文本的方法。

参见图3，图3为本申请实施例公开的一种利用选择的图标替换文本的方法流程图。

如图3所示，该方法包括：

步骤S300、确定所述选择的图标的统一资源定位符url；

具体地，我们可以预先设置各个图标的url，这样当选择出图标标识与所述文本相同的图标后，可以进一步确定图标的url。

步骤S310、创建标签img，并将所述url作为所述标签img的src属性值，利用所述标签img替换所述文本。

与现有技术区别的是，现有技术在网页开发阶段引用标签img的src属性来插入图标，但是需要用户手动输入图标的url作为src属性值。而本申请中，在步骤S300确定出图标的url后，自动创建标签img，并将所述url作为所述标签img的src属性值，利用所述标签img替换所述文本。整个过程中，无需用户输入url，因此减少了用户的工作量，且降低了用户输入错误的概率。

下面对本申请实施例提供的网页图标加载装置进行描述，下文描述的网页图标加载装置与上文描述的网页图标加载方法可相互对应参照。

参见图4，图4为本申请实施例公开的一种网页图标加载装置结构示意图。

如图4所示，该装置包括：

文档树遍历单元41，用于遍历网页的文档树，在检测到节点元素是文本时，判断所述文本的字体类型是否与预置字体类型相同，预置字体类型的字体为预先安装的字体；

图标选择单元42，用于在所述文档树遍历单元判断所述文本的字体类型与所述预置字体类型相同时，从预先获取的图标集合中选择图标标识与所述文本相同的图标；

文本替换单元43，用于利用选择的图标替换所述文本，以在网页中显示所选择的图标。

可选的，参见图5，图5示例了本申请上述网页图标加载装置的另一种可选结构，结合图4和图5可知，网页图标加载装置还可以包括：

图标下载单元44，用于在遍历网页的文档树过程，若检测到图标配置文件，则下载所述图标配置文件指定的图标，并将下载的图标存入所述图标集合中。

可选的，图6示例了上述图标下载单元44的一种可选结构，如图6所示，图标下载单元44可以包括：

第一图标下载子单元441，用于遍历元标签meta，下载其指定的图标；

第二图标下载子单元442，用于遍历脚本文件，下载其指定的图标。

可选的，图7示例了本申请文本替换单元43的一种可选结构，如图7所示，文本替换单元43可以包括：

第一文本替换子单元431，用于确定所述选择的图标的统一资源定位符url；

第二文本替换子单元432，用于创建标签img，并将所述url作为所述标签img的src属性值，利用所述标签img替换所述文本。

可选的，图8示例了本申请图标选择单元42的一种可选结构，如图8所示，图标选择单元42可以包括：

第一图标选择子单元421，用于在所述图标为图片时，从预先获取的图标集合中，选择图片标识与所述文本相同的图片；

第二图表选择子单元422，用于在所述图标为字符串char时，从预先获取的图标集合中，选择字符串标识与所述文本相同的字符串char。

本申请实施例提供的网页图标加载装置，预先获取图标集合，该集合中各个图标的图标标识不同，用户若要在网页中某个位置加载图标，仅需要在文档树对应节点上输入预置字体类型的文本即可，输入的文本内容为待加载图标的图标标识。这样，利用本申请的装置，在遍历网页的文档树时，对于字体类型与预置字体类型一致的文本，从图标集合中选择图标标识与其相同的图标，并利用该图标替换掉文本，从而在网页中显示出图标。本申请的装置仅需要用户输入图标的标识，而无需输入图标的链接地址，从而大大简化了用户工作量，提高了网页开发的速度，并且降低了用户输入错误的概率。

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

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

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (6)

1.一种网页图标加载方法，其特征在于，应用于终端，包括：

遍历网页的文档树，在检测到节点元素是文本时，判断所述文本的字体类型是否与预置字体类型相同，预置字体类型的字体为预先安装的字体，所述预置字体类型包括单独开发出的新字体；

若是，则从预先获取的图标集合中选择图标标识与所述文本相同的图标；

利用选择的图标替换所述文本，以在网页中显示所选择的图标；

还包括：

在遍历网页的文档树过程，若检测到图标配置文件，则下载所述图标配置文件指定的图标，并将下载的图标存入所述图标集合中；

在所述图标为字符串char时，所述从预先获取的图标集合中选择图标标识与所述文本相同的图标，包括：

从预先获取的图标集合中，选择字符串标识与所述文本相同的字符串char。

2.根据权利要求1所述的方法，其特征在于，所述图标配置文件包括元标签meta和/或脚本文件，所述下载所述图标配置文件指定的图标，包括：

遍历元标签meta，下载其指定的图标；和/或，

遍历脚本文件，下载其指定的图标。

3.根据权利要求1所述的方法，其特征在于，所述利用选择的图标替换所述文本，包括：

确定所述选择的图标的统一资源定位符url；

创建标签img，并将所述url作为所述标签img的src属性值，利用所述标签img替换所述文本。

4.一种网页图标加载装置，其特征在于，应用于终端，包括：

文档树遍历单元，用于遍历网页的文档树，在检测到节点元素是文本时，判断所述文本的字体类型是否与预置字体类型相同，预置字体类型的字体为预先安装的字体，所述预置字体类型包括单独开发出的新字体；

图标选择单元，用于在所述文档树遍历单元判断所述文本的字体类型与所述预置字体类型相同时，从预先获取的图标集合中选择图标标识与所述文本相同的图标；

文本替换单元，用于利用选择的图标替换所述文本，以在网页中显示所选择的图标；

还包括：

图标下载单元，用于在遍历网页的文档树过程，若检测到图标配置文件，则下载所述图标配置文件指定的图标，并将下载的图标存入所述图标集合中；

所述图标选择单元包括：

第二图表选择子单元，用于在所述图标为字符串char时，从预先获取的图标集合中，选择字符串标识与所述文本相同的字符串char。

5.根据权利要求4所述的装置，其特征在于，所述图标下载单元包括：

第一图标下载子单元，用于遍历元标签meta，下载其指定的图标；

第二图标下载子单元，用于遍历脚本文件，下载其指定的图标。

6.根据权利要求4所述的装置，其特征在于，所述文本替换单元包括：

第一文本替换子单元，用于确定所述选择的图标的统一资源定位符url；

第二文本替换子单元，用于创建标签img，并将所述url作为所述标签img的src属性值，利用所述标签img替换所述文本。