CN102662672B - 对网页进行换肤处理的方法和装置以及移动终端 - Google Patents

Abstract

本发明提供了一种对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法，包括：对所接收的网页内容的每个元素进行解析，确定该元素是否存在用于指示网页内容的皮肤样式信息的自定义扩展属性，该自定义扩展属性由浏览器客户端预先定义且提供给网页服务器使用，它的取值表示该元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息；在确定出存在自定义扩展属性后，基于索引信息在皮肤样式库中搜索与索引信息对应的皮肤样式信息；以及基于搜索出的皮肤样式信息来对该元素进行元素绘制。利用该方法，可以将浏览器客户端的皮肤效果直接无缝地对接到要在浏览器上显示的网页内容中，由此带来更好的用户体验。

Description

对网页进行换肤处理的方法和装置以及移动终端

技术领域

本发明涉及移动通信领域，更为具体地，涉及用于对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法和装置以及具有上述装置的移动终端。

背景技术

随着技术的发展，通过移动终端来进行网页浏览逐渐成为一种趋势。在进行网页浏览时，移动终端的客户端上的浏览器首先向网页服务器发送网页内容请求，网页服务器响应于该网页内容请求而向客户端发送所请求的网页内容，然后浏览器在客户端上呈现所请求的网页内容来供用户浏览。

为了给用户提供更好的浏览体验，目前很多浏览器都提供了换肤功能(或者主题切换功能)，即，将浏览器上的显示内容的皮肤更换为某套用户很心仪的皮肤，从而带来更好的用户体验。然而，这种换肤功能通常都只能应用在浏览器自身的UI控件(例如，标题栏、工具栏、菜单栏等等)上，即，应用于浏览器的外壳部分上，而不能应用于某个具体网页部分，例如，浏览器上当前正在显示的网页内容上。由此，在进行皮肤更换后，虽然浏览器的外壳部分看起来很漂亮，但是在浏览器上显示的网页内容仍然保持原来的皮肤，从而大大影响了整体美观，由此对用户体验造成不好的影响。

因此，需要一种将浏览器的皮肤效果无缝地对接到网页内容的方法。

发明内容

鉴于上述问题，本发明的一个目的是提供对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法，利用该方法，能够将浏览器的皮肤效果无缝地对接到网页内容中，从而使得浏览器的外壳部分和网页内容作为一个统一且美观的整体显示，由此给用户带来更好的使用体验。

本发明的另一目的是提供一种对移动终端的浏览器上显示的网页内容区域进行换肤处理的装置以及具有上述装置的移动终端。

根据本发明的一个方面，提供了一种对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法，包括：对从网页服务器接收的网页内容的每个元素进行解析，确定该元素中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性，所述自定义扩展属性由浏览器客户端预先定义并且提供给网页服务器来在生成该元素时添加到该元素中，以及所述自定义扩展属性的取值表示该元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息；在确定出存在所述自定义扩展属性时，基于所述自定义扩展属性的取值表示的索引信息，在浏览器客户端的皮肤样式库中搜索与所述索引信息对应的皮肤样式信息；以及基于搜索出的皮肤样式信息来对该元素进行元素绘制。

在上述方面的一个或多个示例中，对从网页服务器接收的网页内容的每个元素进行解析包括对从网页服务器接收的网页内容的每个元素的源代码进行解析，确定在该元素的源代码中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性。

在上述方面的一个或多个示例中，与所述索引信息对应的皮肤样式信息预先与所述索引信息相关联地存储在浏览器客户端的皮肤样式库中，或者经由浏览器客户端提供的专用接口由网页服务器添加到浏览器的客户端的皮肤样式库中。

在上述方面的一个或多个示例中，所述自定义扩展属性是自定义的CSS属性或Html元素属性。

在上述方面的一个或多个示例中，在确定出不存在所述自定义扩展属性或者基于索引信息在浏览器客户端的皮肤样式库中没有找到对应的皮肤样式信息时，浏览器客户端采用网页内容中原有的样式信息来对该元素进行元素绘制。

根据本发明的另一方面，提供了一种对移动终端的浏览器上显示的网页内容区域进行换肤处理的装置，包括：解析单元，用于对从网页服务器接收的网页内容的每个元素进行解析，确定该元素中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性，所述自定义扩展属性由浏览器客户端预先定义并且提供给网页服务器来在生成该元素时添加到该元素中，以及所述自定义扩展属性的取值表示该元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息；获取单元，用于在确定出存在所述自定义扩展属性时，基于所述自定义扩展属性的取值表示的索引信息，在浏览器客户端的皮肤样式库中搜索与所述索引信息对应的皮肤样式信息；以及绘制单元，用于基于搜索出的皮肤样式信息来对该元素进行元素绘制。

在上述方面的一个或多个示例中，所述解析单元被配置为对从网页服务器接收的网页内容的每个元素的源代码进行解析，确定在该元素的源代码中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性。

在上述方面的一个或多个示例中，与所述索引信息对应的皮肤样式信息预先与所述索引信息相关联地存储在浏览器客户端的皮肤样式库中，或者经由浏览器客户端提供的专用接口由网页服务器添加到浏览器的客户端的皮肤样式库中。

在上述方面的一个或多个示例中，所述绘制单元还被配置为：在确定出不存在所述自定义扩展属性或者基于索引信息在浏览器的客户端的皮肤样式库中没有找到对应的皮肤样式信息时，采用网页内容中原有的样式信息来对该元素进行元素绘制。

根据本发明的另一方面，提供了一种移动终端，包括如上所述的装置。

利用上述根据本发明的对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法和装置，可以将浏览器客户端的皮肤效果直接无缝地对接到要在浏览器上显示的网页内容中，从而使得所显示的网页内容的显示效果随着浏览器的皮肤切换而动态切换，并且使得整个浏览器的皮肤效果更加美观，由此给用户带来更好的使用体验。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

根据下述参照附图进行的详细描述，本发明的上述和其他目的、特征和优点将变得更加显而易见。在附图中：

图1示出了根据本发明的对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法的流程图；

图2A和2B示出了在浏览器客户端没有采用本发明的方法时浏览器的皮肤发生变化前后的效果图；

图3A和3B示出了在浏览器客户端采用本发明的方法时浏览器的皮肤切换到“圣诞皮肤”的前后效果图；

图4A和4B示出了在浏览器客户端采用本发明的方法时浏览器的皮肤切换到“海洋皮肤”的前后效果图；

图5示出了根据本发明的对移动终端的浏览器上显示的网页内容区域进行换肤处理的换肤处理装置的方框示意图；和

图6示出了具有根据本发明的换肤处理装置的移动终端的方框示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

以下将结合附图对本发明的具体实施例进行详细描述。

图1示出了根据本发明的对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法的流程图。

如图1所示，当移动终端的浏览器客户端从网页服务器接收到要显示的网页内容后，首先，对从网页服务器接收的网页内容的每个元素进行解析(步骤S110)，从而确定该元素中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性(步骤S120)。例如，对从网页服务器接收的网页内容的每个元素的源代码进行解析，从而确定在该元素的源代码中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性。这里，所述自定义扩展属性是由浏览器客户端预先定义的，并且预先提供给网页服务器，比如按照约定的方式预先提供给网页服务器，由此，在网页服务器中，在网页内容的编写人员进行网页内容的源代码编写时，可以依据该约定的方式将该自定义扩展属性添加到该元素的源代码中。此外，所述自定义扩展属性的取值表示该元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息。作为示例，所述自定义扩展属性可以是自定义的CSS(Cascading Style Sheet，层叠样式表)属性或Html(Hypertext Markup Language，超文本标记语言)元素属性。

例如，所述自定义扩展属性可以是自定义的CSS属性“-uc-skin”，其取值是一个字符串，用于表示元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息，例如，“news.title”，即，新闻标题。在如上定义后，在网页内容的编写人员编写网页内容的源代码时，可以在元素的源代码中加入下述源代码：

或者，所述自定义扩展属性可以是自定义的Html元素属性“uc-skin”，其取值是一个字符串，用于表示元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息，例如，“news.title”，即，新闻标题。在如上定义后，在网页内容的编写人员编写网页内容的源代码时，可以在元素的源代码中加入下述源代码：

<div uc-skin＝″news.title″>...</div>。

这里，在一个示例中，与所述索引信息对应的皮肤样式信息可以预先与所述索引信息相关联地存储在浏览器客户端的皮肤样式库中。或者，与所述索引信息对应的皮肤样式信息可以经由浏览器客户端提供的专用接口由网页内容的编写人员添加到浏览器的客户端的皮肤样式库中。至于皮肤样式库的格式和接口如何定义，可以有多种方式，例如，可以利用普通的配置文件、xml文件等等进行定义。作为一个示例，在本申请人于2012年2月28日提交的申请号为201210049001.6、发明名称为“控件内容展现方法、控件内容展现装置以及移动终端”的申请中给出了一种具体的实现方式。在此通过引用，将上述申请的全部内容并入本文中。

在确定出存在所述自定义扩展属性时，流程进行到步骤S130。否则，流程进行到步骤S160。

在步骤S130，基于所述自定义扩展属性的取值表示的索引信息，在浏览器客户端的皮肤样式库中搜索与所述索引信息对应的皮肤样式信息。例如，在自定义扩展属性是CSS属性时，如果浏览器客户端解析到-uc-skin这个CSS属性，则以″news.title″作为索引在自己的皮肤样式库中搜索相应的样式信息。或者，在自定义扩展属性是Html元素属性时，如果浏览器客户端解析到uc-skin这个Html元素属性，则以″news.title″作为索引在自己的皮肤样式库中搜索相应的样式信息。

如果在浏览器客户端的皮肤样式库中找到相应的样式信息，即步骤S140中的判断结果为是，则在步骤S150，利用搜索出的皮肤样式来绘制该元素。例如，如果在浏览器客户端的皮肤样式库中，以″news.title″作为索引找到与新闻标题对应的皮肤样式信息，则利用所找到的皮肤样式信息来进行元素的绘制。

如果在浏览器客户端的皮肤样式库中没有找到相应的样式信息，即步骤S140中的判断结果为否，则在步骤S160，采用该元素的原有皮肤样式信息来进行绘制。

如上重复进行步骤S110到S160，直到针对当前网页内容中的所有元素完成上述处理。

图2A和2B示出了在浏览器客户端没有采用本发明的方法时浏览器的皮肤发生变化前后的效果图。从图2A和2B中可以看出，当浏览器的皮肤发生变化后，在浏览器上显示的当前网页的皮肤并没有发生变化。

如果在网页源代码中加上uc-skin＝″...″，如下：(以中间部分为例)

那么，网页的显示样式就会随着客户端的皮肤切换而改变。

图3A和3B示出了在浏览器客户端采用本发明的方法时浏览器的皮肤切换到“圣诞皮肤”时的前后效果图。图4A和4B示出了在浏览器客户端采用本发明的方法时浏览器的皮肤切换到“海洋皮肤”时的前后效果图。

从图3A、3B、4A和4B中可以看出，当浏览器的皮肤发生变化时，在浏览器上显示的当前网页的皮肤跟随浏览器的皮肤的变化而发生相应的变化。

从上面可以看出，在本发明的对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法中，由于浏览器客户端扩展一些自定义的CSS属性或Html元素属性，并且提供相应的皮肤样式库，或者可以提供一种接口或手段：允许网页开发者来在浏览器客户端的皮肤样式库中添加相应皮肤样式信息，然后将这些属性提供给网页开发者，供网页开发者在编写网页内容的源代码时，将相应的自定义属性信息添加到对应元素的源代码中。由此，可以通过自定义属性信息中的索引信息来在浏览器客户端的皮肤样式库中找到对应的皮肤样式信息。按照这种方式，当浏览器客户端的皮肤样式库中的皮肤样式信息发生变化时，网页内容中的元素的皮肤样式信息也会对应地发生变化。由此，网页内容的元素的皮肤样式信息可以根据浏览器客户端的皮肤样式库中的皮肤样式信息的切换而动态切换，从而可以将浏览器客户端的皮肤效果直接无缝地对接到要在浏览器上显示的网页内容中，使得整个浏览器的皮肤效果更加美观，由此给用户带来更好的使用体验。

尤其是随着Html5、网页游戏、网页应用的快速发展，根据本发明的技术方案将会帮助Web开发者设计并打造出个性化更强、效果和体验更好的各种Web应用。

图5示出了根据本发明的对移动终端的浏览器上显示的网页内容区域进行换肤处理的换肤处理装置500的方框示意图。

如图5所示，根据本发明的换肤处理装置500包括解析单元510、搜索单元520和绘制单元530。

解析单元510用于对从网页服务器接收的网页内容的每个元素进行解析，确定该元素中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性，所述自定义扩展属性由浏览器客户端预先定义并且提供给网页服务器来在生成该元素时添加到该元素中，以及所述自定义扩展属性的取值表示该元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息。作为示例，所述自定义扩展属性由浏览器客户端按约定的方式提供给网页服务器来在生成元素时添加到该元素中。作为示例，所述自定义扩展属性可以是自定义的CSS属性或Html元素属性。

搜索单元520用于在确定出存在所述自定义扩展属性时，基于所述自定义扩展属性的取值表示的索引信息，在浏览器客户端的皮肤样式库中搜索与所述索引信息对应的皮肤样式信息。绘制单元530用于基于搜索出的皮肤样式信息来对该元素进行元素绘制。

这里，与所述索引信息对应的皮肤样式信息预先与所述索引信息相关联地存储在浏览器客户端的皮肤样式库中，或者经由浏览器客户端提供的专用接口由网页内容的编写人员添加到浏览器的客户端的皮肤样式库中。

在确定出不存在所述自定义扩展属性或者基于索引信息在浏览器的客户端的皮肤样式库中没有找到对应的皮肤样式信息时，绘制单元530还被配置为：采用网页内容中原有的样式信息来对该元素进行元素绘制。

图6示出了具有根据本发明的换肤处理装置500的移动终端10的方框示意图。这里要说明的是，图6中示出的移动终端10可以包括图5中示出的换肤处理装置500的各种变型。

此外，典型地，本发明所述的移动终端可为各种手持终端设备，例如手机、个人数字助理(PDA)等，因此本发明的保护范围不应限定为某种特定类型的移动终端。

此外，根据本发明的方法还可以被实现为由CPU执行的计算机程序。在该计算机程序被CPU执行时，执行本发明的方法中限定的上述功能。

此外，上述方法步骤以及系统单元也可以利用控制器(例如，处理器)以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储设备实现。

此外，应该明白的是，本文所述的计算机可读存储设备(例如，存储器)可以是易失性存储器或非易失性存储器，或者可以包括易失性存储器和非易失性存储器两者。作为例子而非限制性的，非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦写可编程ROM(EEPROM)或快闪存储器。易失性存储器可以包括随机存取存储器(RAM)，该RAM可以充当外部高速缓存存储器。作为例子而非限制性的，RAM可以以多种形式获得，比如同步RAM(DRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDR SDRAM)、增强SDRAM(ESDRAM)、同步链路DRAM(SLDRAM)以及直接RambusRAM(DRRAM)。所公开的方面的存储设备意在包括但不限于这些和其它合适类型的存储器。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本发明的范围。

结合这里的公开所描述的各种示例性逻辑块、模块和电路可以利用被设计成用于执行这里所述功能的下列部件来实现或执行：通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。通用处理器可以是微处理器，但是可替换地，处理器可以是任何传统处理器、控制器、微控制器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何其它这种配置。

结合这里的公开所描述的方法或算法的步骤可以直接包含在硬件中、由处理器执行的软件模块中或这两者的组合中。软件模块可以驻留在RAM存储器、快闪存储器、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动盘、CD-ROM、或本领域已知的任何其它形式的存储介质中。示例性的存储介质被耦合到处理器，使得处理器能够从该存储介质中读取信息或向该存储介质写入信息。在一个替换方案中，所述存储介质可以与处理器集成在一起。处理器和存储介质可以驻留在ASIC中。ASIC可以驻留在用户终端中。在一个替换方案中，处理器和存储介质可以作为分立组件驻留在用户终端中。

如上参照附图以示例的方式描述根据本发明的对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法和装置。但是，本领域技术人员应当理解，对于上述本发明所提出的对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法和装置，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (3)

1.一种对移动终端的浏览器上显示的网页内容区域进行换肤处理的方法，包括：

当移动终端的浏览器客户端从网页服务器接收到要显示的网页内容后，对从网页服务器接收的网页内容的每个元素进行解析，确定该元素中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性，所述自定义扩展属性由浏览器客户端预先定义并且提供给网页服务器来在生成该元素时添加到该元素中，以及所述自定义扩展属性的取值表示该元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息；

在确定出不存在所述自定义扩展属性或者基于索引信息在浏览器客户端的皮肤样式库中没有找到对应的皮肤样式信息时，采用网页内容中原有的样式信息来对该元素进行元素绘制；

在确定出存在所述自定义扩展属性时，基于所述自定义扩展属性的取值表示的索引信息，在浏览器客户端的皮肤样式库中搜索与所述索引信息对应的皮肤样式信息；以及基于搜索出的皮肤样式信息来对该元素进行元素绘制；

其中，对从网页服务器接收的网页内容的每个元素进行解析包括对从网页服务器接收的网页内容的每个元素的源代码进行解析，确定在该元素的源代码中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性；

与所述索引信息对应的皮肤样式信息预先与所述索引信息相关联地存储在浏览器客户端的皮肤样式库中，或者经由浏览器客户端提供的专用接口从网页服务器添加到浏览器的客户端的皮肤样式库中。

2.如权利要求1所述的方法，其中，所述自定义扩展属性是自定义的CSS属性或Html元素属性。

3.一种对移动终端的浏览器上显示的网页内容区域进行换肤处理的装置，包括：

解析单元，用于当移动终端的浏览器客户端从网页服务器接收到要显示的网页内容后，对从网页服务器接收的网页内容的每个元素进行解析，确定该元素中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性，所述自定义扩展属性由浏览器客户端预先定义并且提供给网页服务器来在生成该元素时添加到该元素中，以及所述自定义扩展属性的取值表示该元素的皮肤样式信息在浏览器客户端的皮肤样式库中的索引信息；

搜索单元，用于在解析单元确定出存在所述自定义扩展属性时，基于所述自定义扩展属性的取值表示的索引信息，在浏览器客户端的皮肤样式库中搜索与所述索引信息对应的皮肤样式信息；

绘制单元，用于基于搜索单元搜索出的皮肤样式信息来对该元素进行元素绘制；以及，在确定出不存在所述自定义扩展属性或者基于索引信息在浏览器客户端的皮肤样式库中没有找到对应的皮肤样式信息时，采用网页内容中原有的样式信息来对该元素进行元素绘制；

其中，所述解析单元被配置为对从网页服务器接收的网页内容的每个元素的源代码进行解析，确定在该元素的源代码中是否存在用于指示该元素的皮肤样式信息的自定义扩展属性；以及，

与所述索引信息对应的皮肤样式信息预先与所述索引信息相关联地存储在浏览器客户端的皮肤样式库中，或者经由浏览器客户端提供的专用接口从网页服务器添加到浏览器的客户端的皮肤样式库中。