CN111897619A - 浏览器页面的显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了浏览器页面的显示方法、装置、电子设备及存储介质，涉及应用界面的显示、网页浏览处理领域。具体实现方案为：浏览器页面的显示方法，所述方法包括：响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面；将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域；根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面；显示所述第二页面。采用本申请实施例，可以提高页面加载显示的用户体验，使页面显示中的颜色呈现整体统一的显示效果。

Description

浏览器页面的显示方法、装置、电子设备及存储介质

技术领域

本申请涉及信息处理领域。本申请尤其涉及应用界面的显示、网页浏览处理领域、可应用于与浏览器页面显示相关的网页搜索等领域。

背景技术

随着便携设备、手机终端等电子设备相比以往更加智能化，芯片的解析能力更强，用户对界面上内容显示及配色的要求越来越高，希望得到更为清晰且整体风格更为统一的显示效果。

相关技术中，以网页浏览为例，如加载H5页面的情况下，可能出现页面中的内容与页面头部区域或其他区域的整体风格非统一的显示效果，其中，H5为HTML5的缩写，为超文本标记语言(HTML)经第5次修改后得到的可自定义的网页设计语言。对此，目前的解决方案需要花费大量的时间成本去收集用于统一该整体风格的信息，且终端侧自身不能独立完成该收集功能，从而无法达到很好的整体风格统一的显示效果。

发明内容

本申请提供了一种浏览器页面的显示方法、装置、电子设备及存储介质。

根据本申请的一方面，提供了一种浏览器页面的显示方法，包括：

响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面；

将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域；

根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面；

显示所述第二页面。

根据本申请的另一方面，提供了一种浏览器页面的显示装置，包括：

响应模块，用于响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面；

颜色处理模块，用于将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域；

颜色设置模块，用于根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面；

显示模块，用于显示所述第二页面。

根据本申请的另一方面，提供了一种电子设备，包括：

至少一个处理器；以及

与该至少一个处理器通信连接的存储器；其中，

该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行本申请任意一实施例所提供的方法。

根据本申请的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，该计算机指令用于使该计算机执行本申请任意一项实施例所提供的方法。

采用本申请，可以响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面。可以将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域。由于是将第一页面中第一区域的颜色信息，作为目标区域的待填充目标颜色，因此，根据所述待填充目标颜色对所述目标区域进行颜色设置得到第二页面后，所显示的该第二页面中的内容与页面头部区域或其他区域的整体风格呈现统一的显示效果，即至少页面显示中的颜色呈现整体统一(颜色一致或颜色适配的同色系)的显示效果。

应当理解，本部分所描述的内容并非旨在标识本申请的实施例的关键或重要特征，也不用于限制本申请的范围。本申请的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是应用于本申请实施例的一信息交互的硬件实体示意图；

图2是根据本申请实施例的浏览器页面的显示方法的流程示意图；

图3是根据本申请实施例的浏览器页面显示的第一页面及各区域的示意图；

图4是根据本申请实施例的浏览器页面显示的第二页面及各区域的示意图；

图5是根据本申请实施例的浏览器页面的显示方法的流程示意图；

图6是根据本申请实施例的浏览器页面的显示方法的流程示意图；

图7是根据本申请实施例的浏览器页面编码构成的示意图；

图8是根据本申请实施例的一应用示例的方案一的示意图；

图9是根据本申请实施例的一应用示例的方案二的示意图；

图10是根据本申请实施例的一应用示例的捕捉一个或多个像素点的示意图；

图11是根据本申请实施例的浏览器页面的显示装置的组成结构示意图；

图12是用来实现本申请实施例的浏览器页面的显示方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。本文中术语“第一”、“第二”表示指代多个类似的技术用语并对其进行区分，并不是限定顺序的意思，或者限定只有两个的意思，例如，第一特征和第二特征，是指代有两类/两个特征，第一特征可以为一个或多个，第二特征也可以为一个或多个。

另外，为了更好的说明本申请，在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解，没有某些具体细节，本申请同样可以实施。在一些实例中，对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述，以便于凸显本申请的主旨。

图1是应用于本申请实施例的一网页加载的信息交互的硬件实体示意图，图1中包括：服务器11(如一个独立的服务器，或者由多个服务器构成的服务器集群)、各终端(终端21-终端24)，比如台式机，PC机，手机，一体机等类型，及收到各终端的数据请求，服务器11提供给各终端的页面加载的信息31-页面加载的信息34，比如针对各终端的网页搜索请求，提供给各终端的搜索结果，并通过H5页面显示在浏览器应用中。其中，各终端可以通过有线网络或者无线网络与服务器11进行信息交互。

上述图1的例子只是实现本申请实施例的一个系统架构实例，本申请实施例并不限于上述图1所述的系统结构，基于该系统架构，提出本申请各个实施例。

根据本申请的实施例，提供了一种浏览器页面的显示方法，图2是根据本申请实施例的浏览器页面的显示方法的流程示意图，该方法可以应用于浏览器页面的显示装置，例如，该装置可以部署于终端或服务器或其它处理设备执行的情况下，可以执行网页浏览等处理。其中，终端可以为用户设备(UE，User Equipment)、移动设备、蜂窝电话、无绳电话、个人数字处理(PDA，Personal Digital Assistant)、手持设备、计算设备、车载设备、可穿戴设备等。在一些可能的实现方式中，该方法还可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。如图2所示，包括：

S101、响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面。

一示例中，浏览器页面可以为H5页面，H5是HTML5的缩写，H5可以在移动设备上支持多媒体显示、支持页面素材的预加载、支持音乐的加载过程中播放音乐、支持动态的文字和图片的显示、支持滑动页面的显示效果、支持用户自定义的文案及图片编辑等。

S102、将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域。

一示例中，在一个搜索操作的场景中，响应于浏览器页面的加载处理，所述目标区域包含搜索框的浏览器页面头部区域；所述第一区域包含搜索结果所在区域。

S103、根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面。

一示例中，若第一页面中第一区域的颜色信息为红色，目标区域的颜色可以为白色，则将红色作为待填充的目标颜色，对目标区域进行颜色设置，并将该目标区域的颜色由白色调整为红色，从而达到整体风格统一，至少在颜色上统一的显示效果。

S104、显示所述第二页面。

一示例中，上述S101-S104中提及的第一页面为初始页面，即所加载的初始浏览器页面。第二页面为根据该初始页面中第一区域的颜色，对该初始页面中待填充颜色的目标区域执行颜色填充后所得到的第二页面，即执行颜色填充后最终呈现给用户的最终页面。经颜色填充后，第二页面中目标区域的颜色，与第一页面中第一区域的颜色为颜色一致或者颜色相适配的同色系，比如第一区域和目标区域的颜色都为红色，又如，第一区域的颜色为深红，目标区域的颜色为：浅红等同色系的颜色。

图3是根据本申请实施例的浏览器页面显示的第一页面及各区域的示意图，如图3所示为第一页面100，第一页面100中包括目标区域11(包含搜索框111)，为浏览器页面的头部区域；第一页面中还包括：第一区域12(如包含图片形式的搜索结果)，以及页面内容13，页面内容13包括内容信息及进入其他链接的各个图标(如图片、词条、视频、热议、音乐等等)。图3中，以不同的阴影填充来表示目标区域11及第一区域12采用不同的颜色予以填充。

图4是根据本申请实施例的浏览器页面显示的第二页面及各区域的示意图，如图4所示为第二页面200，第二页面200中包括目标区域11(包含搜索框111)，为浏览器页面的头部区域；第一页面中还包括：第一区域12(如包含图片形式的搜索结果)，以及页面内容13，页面内容13包括内容信息及进入其他链接的各个图标(如图片、词条、视频、热议、音乐等等)。图4中，以相同的阴影填充来表示目标区域11及第一区域12采用颜色一致或者颜色适配的同色系予以填充。

经过对上述第一页面中目标区域颜色的重新设置，使得该目标区域中的目标颜色与浏览器页面中第一区域(如搜索结果所在区域，且与所述包含搜索框的浏览器页面头部区域相邻)的页面颜色相一致或者采用颜色相适配的同色系，比如，第一区域为一个图片形式的搜索结果，主体颜色为红色，则目标区域中的颜色可以为一样的红色，也可以为红色系，比如比主体颜色的“红色”略深的深红、或者比主体颜色的“红色”略浅的浅红等，只要从视觉效果上二者的颜色是适配的同色系，都在本申请的保护范围之内。

一示例中，上述S101-S104，可以由终端中安装的客户端(如浏览器客户端)来实现，即：浏览器客户端响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面。浏览器客户端将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域。浏览器客户端根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面，显示所述第二页面。其中，第一区域可以由该浏览器客户端自身的编码所生成，目标区域可以由加载浏览器页面(如H5页面)时所加载的H5控件编码所生成，目标区域可以与该第一区域相邻部署。采用本示例，通过客户端自身就可以获取到目标区域的待填充目标颜色，使得目标区域与第一区域呈现整体风格统一的显示效果。

采用本申请，可以响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面。可以将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域。由于是将第一页面中第一区域的颜色信息，作为目标区域的待填充目标颜色，因此，根据所述待填充目标颜色对所述目标区域进行颜色设置得到第二页面后，所显示的该第二页面中的内容与页面头部区域或其他区域的整体风格呈现统一的显示效果，即至少页面显示中的颜色呈现整体统一(颜色一致或颜色适配的同色系)的显示效果。

根据本申请的实施例，提供了一种浏览器页面的显示方法，图5是根据本申请实施例的浏览器页面的显示方法的流程示意图，如图5所示，包括：

S201、在H5页面的加载处理过程中，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始H5页面。

一示例中，H5是HTML5的缩写，H5可以在移动设备上支持多媒体显示、支持页面素材的预加载、支持音乐的加载过程中播放音乐、支持动态的文字和图片的显示、支持滑动页面的显示效果、支持用户自定义的文案及图片编辑等。

一示例中，H5页面的加载可以触发浏览器页面的加载处理，可以在H5页面的加载处理过程中，获取第一页面中第一区域的颜色信息。其中，所述第一区域包括：搜索结果所在区域，且与所述包含搜索框的浏览器页面头部区域相邻。

一示例中，在H5页面的加载处理过程中，可以根据屏幕刷新率或定时器触发至少一次的页面刷新，从而，获取到所述第一页面中所述第一区域的颜色信息为至少一个。相应的，还可以根据至少一个该颜色信息，对所述目标区域进行颜色设置，以得到第二页面。

S202、将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含搜索框的浏览器页面头部区域，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域。

一示例中，在一个搜索操作的场景中，响应于H5页面的加载处理，所述目标区域包含搜索框的浏览器页面头部区域；所述第一区域包含搜索结果所在区域。

S203、根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面。

一示例中，若第一页面中第一区域的颜色信息为红色，目标区域的颜色可以为白色，则将红色作为待填充的目标颜色，对目标区域进行颜色设置，并将该目标区域的颜色由白色调整为红色，从而达到整体风格统一，至少在颜色上统一的显示效果。

S204、显示所述第二页面。

一示例中，上述S201-S204中提及的第一页面为初始页面，即所加载的初始浏览器页面。第二页面为根据该初始页面中第一区域的颜色，对该初始页面中待填充颜色的目标区域执行颜色填充后所得到的第二页面，即执行颜色填充后最终呈现给用户的最终页面。经颜色填充后，第二页面中目标区域的颜色，与第一页面中第一区域的颜色为颜色一致或者颜色相适配的同色系，比如第一区域和目标区域的颜色都为红色，又如，第一区域的颜色为深红，目标区域的颜色为浅红等等同色系。

采用本申请，可以响应于浏览器页面的加载处理，从而在浏览器页面的加载处理过程中，获取第一页面中第一区域的颜色信息。由于在浏览器页面的加载处理过程中可以持续获取H5页面的第一区域中的颜色信息，并更改目标区域的目标颜色，并使目标区域的目标颜色与H5页面的第一区域中的颜色保持一致或二者颜色为适配的同色系，不仅可以达到所显示的该第二页面中的内容与页面头部区域或其他区域的整体风格呈现统一的显示效果，即至少页面显示中的颜色呈现整体统一(颜色一致或颜色适配的同色系)的显示效果，而且在未加载完成就可以获取到该第一区域中的颜色信息，提高了颜色填充的处理效率，可以更快的得到颜色呈现整体统一的显示效果。

一实施方式中，所述获取第一页面中第一区域的颜色信息，包括：采集所述第一区域中的至少一个像素点，获得所述至少一个像素点对应的色值，根据所述至少一个像素点对应的色值，得到所述颜色信息。

一示例中，可以采集到第一区域中的三个像素点，其中两个像素点对应的色值为红色，而另一个像素点对应的色值为黑色，则根据所述至少一个像素点对应的色值进行分析，分析策略可以为：取更具备代表性的色值为后续作为目标区域填充的目标颜色，即分析得到的该颜色信息为红色，并将该红色作为目标颜色，以填充目标区域使用。

根据本申请的实施例，提供了一种浏览器页面的显示方法，图6是根据本申请实施例的浏览器页面的显示方法的流程示意图，如图6所示，包括：

S301、在H5页面加载完成后，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始H5页面。

一示例中，H5是HTML5的缩写，H5可以在移动设备上支持多媒体显示、支持页面素材的预加载、支持音乐的加载过程中播放音乐、支持动态的文字和图片的显示、支持滑动页面的显示效果、支持用户自定义的文案及图片编辑等。

一示例中，H5页面的加载可以触发浏览器页面的加载处理，可以在H5页面的加载完成后，获取第一页面中第一区域的颜色信息。其中，所述第一区域包括：搜索结果所在区域，且与所述包含搜索框的浏览器页面头部区域相邻。

S302、将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域。

一示例中，在一个搜索操作的场景中，响应于H5页面的加载处理，所述目标区域包含搜索框的浏览器页面头部区域；所述第一区域包含搜索结果所在区域。

S303、根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面。

一示例中，若第一页面中第一区域的颜色信息为红色，目标区域的颜色可以为白色，则将红色作为待填充的目标颜色，对目标区域进行颜色设置，并将该目标区域的颜色由白色调整为红色，从而达到整体风格统一，至少在颜色上统一的显示效果。

S304、显示所述第二页面。

一示例中，上述S301-S304中提及的第一页面为初始页面，即所加载的初始浏览器页面。第二页面为根据该初始页面中第一区域的颜色，对该初始页面中待填充颜色的目标区域执行颜色填充后所得到的第二页面，即执行颜色填充后最终呈现给用户的最终页面。经颜色填充后，第二页面中目标区域的颜色，与第一页面中第一区域的颜色为颜色一致或者颜色相适配的同色系，比如第一区域和目标区域的颜色都为红色，又如，第一区域的颜色为深红，目标区域的颜色为浅红等等同色系。

采用本申请，可以响应于浏览器页面的加载处理，从而在浏览器页面的加载完成后，获取第一页面中第一区域的颜色信息。由于在浏览器页面的加载完成后可以持续获取H5页面的第一区域中的颜色信息，并更改目标区域的目标颜色，并使目标区域的目标颜色与H5页面的第一区域中的颜色保持一致或二者颜色为适配的同色系，不仅可以达到所显示的该第二页面中的内容与页面头部区域或其他区域的整体风格呈现统一的显示效果，即至少页面显示中的颜色呈现整体统一(颜色一致或颜色适配的同色系)的显示效果，而且在加载完成该第一区域中的颜色信息由于不会因为屏幕的刷新继续变化，颜色的显示趋于稳定，颜色的显示更精准，因此，在加载完成之后获取到该第一区域中的颜色信息，提高了颜色填充的稳定性，可以更精准的得到颜色呈现整体统一的显示效果。

一实施方式中，所述获取第一页面中第一区域的颜色信息，包括：采集所述第一区域中的至少一个像素点，获得所述至少一个像素点对应的色值，根据所述至少一个像素点对应的色值，得到所述颜色信息。

一示例中，采集到第一区域中的四个像素点，其中两个像素点对应的色值为红色，而另两个像素点对应的色值为黑色，则根据所述至少一个像素点对应的色值进行分析，分析策略可以为：色值为黑色的像素点所在的目标对象(如醒目的大宣传语)在第一区域中的面积占比较大，则取更具备代表性目标对象的色值为后续作为目标区域填充的目标颜色，即分析得到的该颜色信息为黑色，并将该黑色作为目标颜色，以填充目标区域使用。

应用示例：

应用本申请实施例一处理流程包括如下内容：

图7是根据本申请实施例的浏览器页面编码构成的示意图，如图7所示，包括浏览器页面300，浏览器页面300中包括：由浏览器中客户端自身的编码所生成的第一页面区域21，及由浏览器中所加载的H5控件编码所生成的第二页面区域22。其中，第一页面区域21中包括：图3-图4所示的目标区域11，目标区域11在一示例中可以为包含搜索框的浏览器页面头部区域，以下简称为原生(NA，Native)头部。第二页面区域22中包括图3-图4所示的第一区域12，第一区域12在一浏览器页面的示例中可以为H5页面中的一部分，比如搜索结果(搜索得到的图片，如“四姑娘山的词条图片”)所在区域，且与所述包含搜索框的NA头部区域相邻。

一相关技术的示例中，浏览器可以通过H5控件透传H5页面的颜色信息给客户端，通过H5控件与客户端的交互来达到预期的浏览器页面的显示效果，但是，要达到预期的浏览器页面的显示效果，比如整体风格统一的显示效果，需要花费大量的时间成本去收集用于统一该整体风格的信息，且终端侧的客户端自身不能独立完成该收集功能，从而无法达到很好的整体风格统一的显示效果。也就是说，采用这种方式实现功能成本较大，开发人员联调时间较长，客户端严重依赖前端H5页面返回的颜色信息，不能做到客户端独立完成此功能。

针对这个问题，采用本申请的应用示例，通过客户端自身就可以达到很好的整体风格统一的显示效果，还有利于后期业务(如各类H5页面)开发的直接复用，提升开发效率及降低开发业务的成本。

本应用示例包括如下内容：

1)方案一：客户端持续获取H5页面设置区域颜色信息，并更改NA头部颜色使其与H5页面设置区域颜色保持一致。

图8是根据本申请实施例的一应用示例的方案一的示意图，在H5页面加载过程中，可以持续获取H5页面设置区域(即上述第一区域)的相关颜色信息，即一帧帧刷新以得到多帧图像，对于得到的当前帧图像，可以获取该帧图像的H5页面中一像素点的颜色信息，根据该像素点的颜色信息更改NA头部的通栏，进一步还可以通过相关的转化算法将该像素点的颜色信息转化成可供客户端使用的目标颜色，并更改NA头部的通栏(通栏可以包括NA头部搜索框区域，还可以包括NA头部搜索框区域+H5页面头部区域等)颜色，从而达到与H5页面具备整体风格统一的显示效果。

一帧帧的刷新以得到多帧图像的过程中，还可以在客户端设置定时器，以便于在H5页面加载过程中，定时的持续获取该H5页面设置区域的颜色信息，由于不断刷新可以得到多个颜色信息，因此，还可以从多个颜色信息中选取最大的色值，并使用该最大的色值生成供客户端使用的颜色并更改NA头部通栏颜色与H5页面头部达到完美匹配，以与H5页面具备整体风格统一的显示效果。

2)方案二：客户端在H5页面加载完成后，获取设置区域颜色信息，并更改NA头部颜色使其与H5页面设置区域颜色保持一致。

图9是根据本申请实施例的一应用示例的方案二的示意图，在H5页面加载完成后，可以获取H5页面设置区域(即上述第一区域)的相关颜色信息，即获取H5页面所加载完成得到图像后，可以获取该图像的H5页面中一像素点的颜色信息，根据该像素点的颜色信息更改NA头部的通栏，进一步还可以通过相关的转化算法将该像素点的颜色信息转化成可供客户端使用的目标颜色，并更改NA头部的通栏(通栏可以包括NA头部搜索框区域，还可以包括NA头部搜索框区域+H5页面头部区域等)颜色，从而达到与H5页面具备整体风格统一的显示效果。

采用本应用示例的方案一和方案二，可以简化上述相关技术的示例中是需要通过H5控件透传H5页面的颜色信息给NA头部的过程，无需通过H5控件透传H5页面的颜色信息，而是客户端自主实现H5指定区域的像素点的取色，从而达到很好的整体风格统一的显示效果。

一示例中，可以捕捉一个像素点，还可以捕捉多个像素点，且像素点捕捉位置的坐标可以根据各类H5页面的设计需求来决定。图10为根据本申请实施例的一应用示例的捕捉一个或多个像素点的示意图，对于同一个H5图，可以分别取一个像素点，两个像素点或多个像素点(如图10中的三个像素点)，则根据不同像素点的捕捉，所得到的像素点颜色信息略有差异，使得根据像素点的颜色信息得到的客户端使用的目标颜色也有相应差异，更改NA头部的通栏(通栏可以包括NA头部搜索框区域，还可以包括NA头部搜索框区域+H5页面头部区域等)颜色也有相应差异，但不会与H5页面整体的风格出现特别大的差异，因此，仍然可以达到与H5页面具备整体风格统一的显示效果。

根据本申请的实施例，提供了一种浏览器页面的显示装置，图11是根据本申请实施例的浏览器页面的显示装置的组成结构示意图，如图11所示，包括：响应模块41，用于响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面；颜色处理模块42，用于将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域；颜色设置模块43，用于根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面；显示模块44，用于显示所述第二页面。

一实施方式中，所述浏览器页面的加载处理由H5页面加载的情况下，所述响应模块，包括：第一获取子模块，用于在所述H5页面的加载处理过程中，获取所述第一页面中所述第一区域的颜色信息；所述目标区域包含搜索框的浏览器页面头部区域；所述第一区域包含搜索结果所在区域。

一实施方式中，所述第一获取子模块，用于在所述H5页面的加载处理过程中，根据屏幕刷新率或定时器触发至少一次的页面刷新，获取所述第一页面中所述第一区域的颜色信息为至少一个。

一实施方式中，所述颜色设置模块，用于根据至少一个所述颜色信息，对所述目标区域进行颜色设置，得到第二页面。

一实施方式中，所述第一获取子模块，用于采集所述第一区域中的至少一个像素点，获得所述至少一个像素点对应的色值；根据所述至少一个像素点对应的色值，得到所述颜色信息。

一实施方式中，所述浏览器页面的加载处理由H5页面加载的情况下，所述响应模块，包括：第二获取子模块，用于在所述H5页面加载完成后，获取所述第一页面中所述第一区域的颜色信息；所述第一区域包括：搜索结果所在区域，且与所述包含搜索框的浏览器页面头部区域相邻。

一实施方式中，所述第二获取子模块，用于采集所述第一区域中的至少一个像素点，获得所述至少一个像素点对应的色值；根据所述至少一个像素点对应的色值，得到所述颜色信息。

本申请实施例各装置中的各模块的功能可以参见上述方法中的对应描述，在此不再赘述。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图12所示，是用来实现本申请实施例的浏览器页面的显示方法的电子设备的框图。该电子设备可以为前述部署设备或代理设备。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图12所示，该电子设备包括：一个或多个处理器801、存储器802，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图12中以一个处理器801为例。

存储器802即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的浏览器页面的显示方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的浏览器页面的显示方法。

存储器802作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的浏览器页面的显示方法对应的程序指令/模块(例如，附图11所示的响应模块、颜色处理模块、颜色设置模块、显示模块等模块)。处理器801通过运行存储在存储器802中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的浏览器页面的显示方法。

存储器802可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器802可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器802可选包括相对于处理器801远程设置的存储器，这些远程存储器可以通过网络连接至电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

浏览器页面的显示方法的电子设备，还可以包括：输入装置803和输出装置804。处理器801、存储器802、输入装置803和输出装置804可以通过总线或者其他方式连接，图12中以通过总线连接为例。

输入装置803可接收输入的数字或字符信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置804可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

采用本申请，可以响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面。可以将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域为包含搜索框的浏览器页面头部区域。由于是将第一页面中第一区域的颜色信息，作为目标区域的待填充目标颜色，因此，根据所述待填充目标颜色对所述目标区域进行颜色设置得到第二页面后，所显示的该第二页面中的内容与页面头部区域或其他区域的整体风格呈现统一的显示效果，即至少页面显示中的颜色呈现整体统一(颜色一致或颜色适配的同色系)的显示效果。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (16)

1.一种浏览器页面的显示方法，所述方法包括：

响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面；

将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域；

根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面；

显示所述第二页面。

2.根据权利要求1所述的方法，还包括：所述浏览器页面的加载处理由超文本标记语言H5页面加载；

其中，所述响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，包括：

在所述H5页面的加载处理过程中，获取所述第一页面中所述第一区域的颜色信息；

所述目标区域，包含搜索框的浏览器页面头部区域；

所述第一区域，包含搜索结果所在区域。

3.根据权利要求2所述的方法，其中，所述在所述浏览器页面的加载处理过程中，获取所述第一页面中所述第一区域的颜色信息，包括：

在所述H5页面的加载处理过程中，根据屏幕刷新率或定时器触发至少一次的页面刷新，获取所述第一页面中所述第一区域的颜色信息为至少一个。

4.根据权利要求3所述的方法，其中，所述根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面，包括：

根据至少一个所述颜色信息，对所述目标区域进行颜色设置，得到第二页面。

5.根据权利要求2-4中任一项所述的方法，其中，所述获取第一页面中第一区域的颜色信息，包括：

采集所述第一区域中的至少一个像素点，获得所述至少一个像素点对应的色值；

根据所述至少一个像素点对应的色值，得到所述颜色信息。

6.根据权利要求1所述的方法，还包括：所述浏览器页面的加载处理由H5页面加载；

所述响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，包括：

在所述H5页面加载完成后，获取所述第一页面中所述第一区域的颜色信息；

所述目标区域，包含搜索框的浏览器页面头部区域；

所述第一区域，包含搜索结果所在区域。

7.根据权利要求6所述的方法，其中，所述获取第一页面中第一区域的颜色信息，包括：

采集所述第一区域中的至少一个像素点，获得所述至少一个像素点对应的色值；

根据所述至少一个像素点对应的色值，得到所述颜色信息。

8.一种浏览器页面的显示装置，所述装置包括：

响应模块，用于响应于浏览器页面的加载处理，获取第一页面中第一区域的颜色信息，所述第一页面为所加载的初始浏览器页面；

颜色处理模块，用于将所述颜色信息作为目标区域的待填充目标颜色，所述目标区域包含浏览器页面头部区域且与所述第一区域相邻，所述第一区域包含响应于所述加载处理得到的操作结果所在区域；

颜色设置模块，用于根据所述待填充目标颜色对所述目标区域进行颜色设置，得到第二页面；

显示模块，用于显示所述第二页面。

9.根据权利要求8所述的装置，所述浏览器页面的加载处理由超文本标记语言H5页面加载的情况下，所述响应模块，包括：

第一获取子模块，用于在所述H5页面的加载处理过程中，获取所述第一页面中所述第一区域的颜色信息；

所述目标区域，包含搜索框的浏览器页面头部区域；

所述第一区域，包含搜索结果所在区域。

10.根据权利要求9所述的装置，其中，所述第一获取子模块，用于：

在所述H5页面的加载处理过程中，根据屏幕刷新率或定时器触发至少一次的页面刷新，获取所述第一页面中所述第一区域的颜色信息为至少一个。

11.根据权利要求10所述的装置，其中，所述颜色设置模块，用于：

根据至少一个所述颜色信息，对所述目标区域进行颜色设置，得到第二页面。

12.根据权利要求9-11中任一项所述的装置，其中，所述第一获取子模块，用于：

采集所述第一区域中的至少一个像素点，获得所述至少一个像素点对应的色值；

根据所述至少一个像素点对应的色值，得到所述颜色信息。

13.根据权利要求8所述的装置，所述浏览器页面的加载处理由H5页面加载的情况下，所述响应模块，包括：

第二获取子模块，用于在所述H5页面加载完成后，获取所述第一页面中所述第一区域的颜色信息；

所述目标区域，包含搜索框的浏览器页面头部区域；

所述第一区域，包含搜索结果所在区域。

14.根据权利要求13所述的装置，其中，所述第二获取子模块，用于：

采集所述第一区域中的至少一个像素点，获得所述至少一个像素点对应的色值；

根据所述至少一个像素点对应的色值，得到所述颜色信息。

15.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的方法。

16.一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行权利要求1-7中任一项所述的方法。

Images