CN103631867B - 网页的显示方法和浏览器 - Google Patents

Abstract

本发明提供了一种网页的显示方法和浏览器。其中，网页显示方法包括：获取网页的主题内容区域；计算网页中元素相对于所述主题内容区域的位置关系；根据位置关系设置元素的显示背景；按照设置后的显示背景在浏览器中显示网页。使用本发明的技术方案，根据网页元素相对于主题内容区域的位置关系设置其显示背景，不影响网页主题内容的显示，并保证了网页背景与浏览器的界面保持一致，使网页与浏览器形成一体化的视觉效果，提高了用户的体验，避免了浏览器出现大片空白或者背景图片与网页不匹配导致的显示问题。

Description

网页的显示方法和浏览器

技术领域

本发明涉及互联网领域，特别是涉及一种网页的显示方法和浏览器。

背景技术

为了兼容各种显示器尺寸，绝大多说的网站都将主体内容部分集中在一个固定的区域内，例如900像素大小的区域内，随着显示器尺寸的增大，显示器的显示区域增大，远超过网页主题内容的显示区域，从而屏幕的大部分区域只能显示空白或者特定预设的图片。然而千变万化的网页的背景颜色或者图片差异很大，这就导致难以满足对视觉体验要求较高的用户，特别是要求浏览器一体化视觉体验的用户的需要。

针对以上用户对浏览器显示效果的需求，现有的浏览器所采用的方案由：通过扩展改变一些特定页面的背景颜色或者图片；将所有页面的背景都设置成统一的背景色或者图片。图1是根据现有技术中改变特定页面背景图片后某网页的显示效果图，图2是根据现有技术中改变统一背景图片后某网页的显示效果图。

从以上效果图中可以看出以上的解决方案存在两方面的问题：一、影响页面中主体内容显示；二、视觉效果差。因此，以上方案仅能针对特定的页面设置特定背景色或者背景图片，无法适用于大量的视觉分割差异较大的页面，而且无法根据浏览器当前主题的特性进行设置，从而无法与浏览器形成一体化的视觉效果。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的浏览器和相应的网页的显示方法。

基于本发明的一个方面提供了一种网页的显示方法。该网页显示方法包括：获取网页的主题内容区域；计算网页中元素相对于所述主题内容区域的位置关系；根据位置关系设置元素的显示背景；按照设置后的显示背景在浏览器中显示网页。

可选地，获取网页的主题内容区域包括：计算网页中各元素的边界信息；根据边界信息确定主题内容区域。

可选地，根据边界信息确定主题内容区域包括：根据边界信息确定网页中各元素的左边界和右边界；计算右边界的集中区域与左边界的集中区域之间的区域的宽度；判断区域的宽度是否在预设的数值范围内；若是，将右边界的集中区域与左边界的集中区域之间的区域作为主题内容区域。

可选地，根据位置信息确定主题内容区域包括：通过预设的元素选择规则在网页的元素中挑选出主题元素；将主题元素的显示区域作为主题内容区域。

可选地，在通过预设的元素选择规则挑选出主题元素之前还包括：判断网页是否在预设的白名单内；若是，获取白名单中预置的与所述网页对应的元素选择规则。

可选地，计算网页中元素相对于主题内容区域的位置关系包括：分别将元素的左右边界与主题内容区域的左右边界比较；在元素的右边界位于主题内容区域的左边界左侧或者元素的左边界位于主题内容区域的右边界右侧的情况下，确定元素位于主题内容区域之外；在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，确定元素位于主题内容区域内部；在元素的左边界位于主题内容区域的左边界左侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，或者在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界右侧的情况下，确定元素部分位于主题内容区域内部。

可选地，根据位置关系设置元素的显示背景包括：分别创建浏览器背景显示层、主题内容背景显示层、元素背景显示层，其中，元素背景显示层位于主题内容背景显示层的上方，主题内容背景显示层位于浏览器背景显示层的上方；对于位于主题内容区域之外的元素，将该元素的背景设置为浏览器背景显示层的内容；对于位于主题内容区域之内的元素，将该元素的背景设置为主题内容背景显示层的内容；对于部分位于主题内容区域内部的元素，将该元素的背景设置为元素背景显示层的内容。

可选地，根据位置关系设置元素的显示背景的步骤通过浏览器扩展向网页注入css或js文件完成。

基于本发明的另一个方面，提供了一种浏览器。该浏览器包括：主题区域获取模块，用于获取网页的主题内容区域；位置关系计算模块，用于计算网页中元素相对于主题内容区域的位置关系；背景注入模块，用于根据位置关系设置元素的显示背景；显示模块，用于按照设置后的显示背景显示网页。

可选地，位置关系计算模块配置为：分别将元素的左右边界与主题内容区域的左右边界比较；在元素的右边界位于主题内容区域的左边界左侧或者元素的左边界位于主题内容区域的右边界右侧的情况下，确定元素位于主题内容区域之外；在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，确定元素位于主题内容区域内部；在元素的左边界位于主题内容区域的左边界左侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，或者在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界右侧的情况下，确定元素部分位于主题内容区域内部。

可选地，背景注入模块配置为：分别创建浏览器背景显示层、主题内容背景显示层、元素背景显示层，其中，元素背景显示层位于主题内容背景显示层的上方，主题内容背景显示层位于浏览器背景显示层的上方；对于位于主题内容区域之外的元素，将该元素的背景设置为浏览器背景显示层的内容；对于位于主题内容区域之内的元素，将该元素的背景设置为主题内容背景显示层的内容；对于部分位于主题内容区域内部的元素，将该元素的背景设置为元素背景显示层的内容。

本发明的网页显示方法根据网页元素相对于主题内容区域的位置关系设置其显示背景，不影响网页主题内容的显示，并保证了网页背景与浏览器的界面保持一致，使网页与浏览器形成一体化的视觉效果，提高了用户的体验，避免了浏览器出现大片空白或者背景图片与网页不匹配导致的显示问题。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

根据下文结合附图对本发明具体实施例的详细描述，本领域技术人员将会更加明了本发明的上述以及其他目的、优点和特征。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1是根据现有技术中改变特定页面背景图片后某网页的显示效果图；

图2是根据现有技术中改变统一背景图片后某网页的显示效果图；

图3是根据本发明实施例的网页的显示方法的示意图；

图4是根据本发明实施例的浏览器的示意图；

图5是根据本发明实施例的浏览器中网页元素与主题内容区域的位置关系图；

图6是根据本发明实施例的浏览器中展示网页的效果图；以及

图7是根据本发明实施例的浏览器中所展示网页的各网页元素之间的位置关系图。

具体实施方式

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

图3是根据本发明一个实施例的网页的显示方法的示意图，该网页的显示方法一般性地可包括以下步骤：

步骤S102，获取网页的主题内容区域；

步骤S104，计算网页中元素相对于所述主题内容区域的位置关系；

步骤S106，根据位置关系设置元素的显示背景；按照设置后的显示背景在浏览器中显示网页。

本实施例中的网页的显示方法中，根据网页元素相对于主题内容区域的位置关系设置其显示背景，保证其背景不影响网页中主题内容的显示，且保持与浏览器的显示主题相匹配，以提高浏览器整体的显示效果。

其中，网页的主题内容区域一般指用户在网页中获取内容的显示区域，可以包括：网页中正文内容及标题的显示区域、网页中需要用户操作的元素的区域(如输入框、按钮)、网页中的视频等元素的显示区域等。

步骤S102获取网页的主题内容区域的一般流程可以包括：计算网页中各元素的边界信息；根据边界信息确定主题内容区域。

以上网页元素的边界信息一般性地可以包括每个元素距离浏览器左边、右边的距离、宽度等信息。这些边界信息可以通过获取网页元素的clientHeight、clientWidth、scrollHeight、scrollWidth、offsetTop、offsetLeft属性中的一项或多项以及采用getBoundingClientRect()方法获得网页元素对象的左上角和右下角相对于浏览器窗口(viewport)左上角的距离得到。利用获得的以上边界信息可以直接计算的出本实施例的网页的显示方法中需要的每个元素距离浏览器左边、右边的距离、宽度等信息。

步骤S102中根据边界信息确定主题内容区域可以采用程序识别或者人工标记等多种方式进行，其中一种程序识别的流程一般可以包括：根据边界信息确定网页中各元素的左边界和右边界；计算右边界的集中区域与左边界的集中区域之间的区域的宽度；判断区域的宽度是否在预设的数值范围内；若是，将右边界的集中区域与左边界的集中区域之间的区域作为主题内容区域。以上预设的数值范围可以取600像素至1000像素，这是根据网页主题区域的大小的经验值，如果网页元素的集中区域在此范围内，就可以确定以上得出的集中区域为网页的主题内容区域。

对于以上程序识别无法得出的网页，可以采用人工规则编写或者人工标注的方式确定主题内容区域。利用已经确定的主题内容区域，可以生成元素选择规则，该规则记录了网页的信息以及对应的主题内容区域。利用已有的元素选择规则可以自动挑选出主题元素，从而得出主题内容区域。利用已有元素选择规则确定主题区域的流程一般可以包括：通过预设的元素选择规则在网页的元素中挑选出主题元素；将主题元素的显示区域作为主题内容区域。

例如，人工找到一个能代码主题内容区域位置的元素，将此元素的选择器(#id或者.class)以及网站url作为一条规则，将该规则作为白名单规则，将满足该规则的网页直接对应得出对应的主题内容区域位置。另外也可以利用以上程序识别出的网页的主题内容区域生成白名单规则，在确定已有规则的网页的主题内容区域时，直接利用白名单查找与网页对应的元素选择规则，以得出主题区域位置，提高了效率。

在实际应用中，确定主题内容区域的过程中，可以首先进行白名单规则匹配，如果匹配成功，直接从白名单中获取该网页对应的主题内容区域，如果匹配不成功，进入程序识别，利用网页各元素的左边界和右边界之间的集中区域的宽度确定主题内容区域，如果程序识别失败，可以采用人工确定的方式确定主题区域位置。

步骤S102获取到的主题内容区域数据可以包括主题内容区域距离浏览器左边框的距离、主题内容区域的宽度等。

步骤S104的一般流程可以包括：分别将网页中某一元素的左右边界与主题内容区域的左右边界比较；在元素的右边界位于主题内容区域的左边界左侧或者元素的左边界位于主题内容区域的右边界右侧的情况下，确定元素位于主题内容区域之外；在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，确定元素位于主题内容区域内部；在元素的左边界位于主题内容区域的左边界左侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，或者在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界右侧的情况下，确定元素部分位于主题内容区域内部。

以上网页元素的显示背景可以通过不同的显示蒙层进行设置，流程可以包括：分别创建浏览器背景显示层、主题内容背景显示层、元素背景显示层，其中，元素背景显示层位于主题内容背景显示层的上方，主题内容背景显示层位于浏览器背景显示层的上方；对于位于主题内容区域之外的元素，将该元素的背景设置为浏览器背景显示层的内容；对于位于主题内容区域之内的元素，将该元素的背景设置为主题内容背景显示层的内容；对于部分位于主题内容区域内部的元素，将该元素的背景设置为元素背景显示层的内容。

利用以上三个显示层，可以根据位置关系设置元素的显示背景，一般地，对于在主体区域以内的网页元素，显示背景仍然网页本身的背景进行显示，对于完全位于主题内容区域之外的网页元素，原有的网页显示背景可以设置为全透明或者由用户选择直接删除或者隐藏，最终显示的效果为浏览器的背景。对于部分位于主题内容区域之外的网页元素，可以首先记录原有的网页显示背景，然后将该元素的背景改成全透明，然后在元素的下面创建一个层，所创建层的高度、边框、背景等与此元素相同，宽度等于此元素位于主题区域以内部分的宽度，位置位于此元素在主体区域以内部分的位置。通过设置所创建层的背景可以改变这类网页元素的显示背景。

以上创建背景层以及设置背景层的参数的过程可以均通过浏览器扩展向网页注入css或js文件完成。一种替代的方案是通过浏览器修改页面的DOM渲染实现，这种方式修改网页DOM，相较于注入css(cascading style sheets，层叠样式表单)或js(javascript)文件的方式，成本和风险较高。

本发明的实施例还提供了一种浏览器，该浏览器可以用于执行以上实施例中介绍的网页的显示方法，根据网页元素的位置设置对应的背景，保证网页背景与浏览器的界面保持一致，使网页与浏览器形成一体化的视觉效果。图4是根据本发明实施例的浏览器的示意图，如图所示，该浏览器包括：主题区域获取模块210、位置关系计算模块220、背景注入模块230、显示模块240。

其中，主题区域获取模块210用于获取网页的主题内容区域；位置关系计算模块220用于计算网页中元素相对于主题内容区域的位置关系；背景注入模块230用于根据位置关系设置元素的显示背景；显示模块240用于按照设置后的显示背景显示网页。

主题区域获取模块210可以配置为：计算网页中各元素的边界信息；根据边界信息确定主题内容区域。以上网页元素的边界信息一般性地可以包括每个元素距离浏览器左边、右边的距离、宽度等信息。这些边界信息可以通过获取网页元素的clientHeight、clientWidth、scrollHeight、scrollWidth、offsetTop、offsetLeft中或者采用getBoundingClientRect()方法获得网页元素对象的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。利用获得的以上边界信息可以直接计算的出本实施例的网页的显示方法中需要的每个元素距离浏览器左边、右边的距离、宽度等信息。根据边界信息确定主题内容区域可以采用程序识别或者人工标记等多种方式进行，例如可以首先进行白名单规则匹配，如果匹配成功，直接从白名单中获取该网页对应的主题内容区域，如果匹配不成功，进入程序识别，利用网页各元素的左边界和右边界之间的集中区域的宽度确定主题内容区域，如果程序识别失败，可以采用人工确定的方式确定主题区域位置。白名单可以根据利用程序或者人工识别得出的网页的主题内容区域、网页的url、以及网页元素的选择器生成并保存。

位置关系计算模块220可以配置为分别将元素的左右边界与主题内容区域的左右边界比较；在元素的右边界位于主题内容区域的左边界左侧或者元素的左边界位于主题内容区域的右边界右侧的情况下，确定元素位于主题内容区域之外；在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，确定元素位于主题内容区域内部；在元素的左边界位于主题内容区域的左边界左侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，或者在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界右侧的情况下，确定元素部分位于主题内容区域内部。

利用位置关系计算模块220可以确定出网页元素相对于主题内容区域的位置，以便背景注入模块230相应调整元素的显示背景。背景注入模块230可以被配置为：分别创建浏览器背景显示层、主题内容背景显示层、元素背景显示层，其中，元素背景显示层位于主题内容背景显示层的上方，主题内容背景显示层位于浏览器背景显示层的上方；对于位于主题内容区域之外的元素，将该元素的背景设置为浏览器背景显示层的内容；对于位于主题内容区域之内的元素，将该元素的背景设置为主题内容背景显示层的内容；对于部分位于主题内容区域内部的元素，将该元素的背景设置为元素背景显示层的内容。

利用背景注入模块230，对于在主体区域以内的网页元素，显示背景仍然网页本身的背景进行显示，对于完全位于主题内容区域之外的网页元素，原有的网页显示背景可以设置为全透明或者由用户选择直接删除或者隐藏，最终显示的效果为浏览器的背景。对于部分位于主题内容区域之外的网页元素，可以首先记录原有的网页显示背景，然后将该元素的背景改成全透明，然后在元素的下面创建一个层，所创建层的高度、边框、背景等与此元素相同，宽度等于此元素位于主题区域以内部分的宽度，位置位于此元素在主体区域以内部分的位置。通过设置所创建层的背景可以改变这类网页元素的显示背景。

以上创建背景层以及设置背景层的参数的过程可以均通过浏览器扩展向网页注入css或js文件完成。

js代码的注入方式可以通过backgroud进行或者通过扩展的manifest.json文件代码注入。

Css文件设置特定的几个元素，例如div#super_theme_body_mask，div#super_theme_content_mask、super_theme_outline_mask，其中，div#super_theme_body_mask是浏览器背景显示层，用于展现与浏览器主题对应的背景色或者背景图片，div#super_theme_content_mask是主题内容背景显示层，用于展示页面背景色或者背景图片，保持主体内容部分的背景色与原页面一致；super_theme_outline_mask是元素背景显示层，用于对部分超过主题内容区域元素，保持主体区域以内的内容背景色或者背景图片与原页面一致，并使保持主体区域以外的背景色或者背景图片与浏览器主题一致。

Js文件创建几个特定的元素，记录当前网页的背景颜色或者背景图片为bgbackup，并将其background属性改成transparent(即全透明)，然后将以上div#super_theme_content_mask元素的背景设置为bgbackup，以展示页面背景色或者背景图片。另外，js文件通过浏览器提供的特定接口获取浏览器当前的主题信息并记为bgtheme，浏览器的主题信息包括背景色、背景图片等内容；然后计算或获取网页的主题内容区域，将以上div#super_theme_body_mask设置成bgtheme，以展示与浏览器主题对应的背景色或者背景图片。

Js文件将网页的主题内容区域距离浏览器左边框的定义为left，主题内容区域的宽度定义为width，则将元素div#super_theme_content_mask的位置大小设置成距离浏览器左边框left，宽度width。

图5是根据本发明实施例的浏览器中网页元素与主题内容区域的位置关系图，如图所示，原页面内容501位于浏览器显示的最顶层，显示不受任何遮挡，原页面背景502，位于原页面内容501显示层下，可以将显示层次序参数z-index设置为0，并设置为全透明。主题内容背景显示层503，位于原页面背景502显示层下，可以将显示层次序参数z-index设置为-1，背景设置为bgbackup，以展示页面背景色或者背景图片。浏览器背景显示层504位于主题内容背景显示层503下，可以将显示层次序参数z-index设置为-2，背景设置为bgtheme，以展示与浏览器主题对应的背景色或者背景图片。

图6是根据本发明实施例的浏览器中展示网页的效果图，利用本发明实施例的浏览器展示的网页保证了浏览器背景与网页背景的一体化显示，视觉效果大大好于图1和图2的效果。

利用本发明实施例的浏览器，在主体区域以内的网页元素不动；完全在主体区域之外的网页元素设置全透明或者由用户选择直接删除或者隐藏；部分在主体区域以内的网页元素，需要记录网页元素的原来背景，然后将此元素的背景改成全透明，然后在此元素的下面创建一个层，所创建层的高度、边框、背景等与此元素相同，宽度等于此元素位于主题区域以内部分的宽度，位置位于此元素在主体区域以内部分的位置。

各层的显示层次序参数只要保证次序关系符合以上要求就满足要求，并不限于具体的数值，例如：显示整个背景的层div#super_theme_body_mask的层次序参数z-index可设置为-1000，显示主体内容背景的层div#super_theme_content_mask的层次序参数z-index可以设置为-100，显示部分超出主体区域的元素的背景的层div.super_theme_outline_mask的层次序参数z-index设置范围可以为-99至-1。

为了让背景层的颜色不影响主体内容的显示，因此需要将div#super_theme_body_mask的z-index设置的很小(-1000)，类似地，为了让主体内容的背景不要影响主体内容区域中具体元素的显示，可以将div#super_theme_content_mask的z-index设置成比较小(比如-100，使用-100的原因是一个页面的元素一般不至于嵌套100层)；div.super_theme_outline_mask是不唯一的，所以可以使用class属性设置其样式，其z-index的值由此元素有多少个超出主体区域的子元素决定，子元素越多，z-index越小，最大为-1，因为子元素的背景要优先显示。

图7是根据本发明实施例的浏览器中所展示网页的各网页元素之间的位置关系图，以下介绍图中代表的不同位置的网页元素以及对应的背景处理方法，最大的框700代表整个屏幕，框701代表在主题内容区域之外的广告区域，其背景需更改为浏览器主题对应的背景；框702中在主题内容区域之外的区域需要进行背景处理的。框703中在主题内容区域两侧之外的区域需要进行背景处理的。框704内嵌在框703中其两侧的区域也需要进行背景处理的。框705完全内嵌在主题内容区域中的，按照原网页的背景进行显示。框706同样完全内嵌在主题内容区域中的，也同样原网页的背景进行显示。框707中在主题内容区域两侧之外的区域是要进行背景处理的。

在以上各位置的区域中，在主题内容区域内的部分，显示网页原来的背景，在主题内容区域外的部分，通过处理显示浏览器对应的背景。网页页面变得更简洁，实现了浏览器主题与网页背景的一体化视觉体验，极大地提增强了视觉效果，为用户自由设置浏览器主题提供了空间。

本发明的网页显示方法及执行该方法的浏览器根据网页元素相对于主题内容区域的位置关系设置其显示背景，不影响网页主题内容的显示，并保证了网页背景与浏览器的界面保持一致，使网页与浏览器形成一体化的视觉效果，提高了用户的体验，避免了浏览器出现大片空白或者背景图片与网页不匹配导致的显示问题。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的浏览器中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

至此，本领域技术人员应认识到，虽然本文已详尽示出和描述了本发明的多个示例性实施例，但是，在不脱离本发明精神和范围的情况下，仍可根据本发明公开的内容直接确定或推导出符合本发明原理的许多其他变型或修改。因此，本发明的范围应被理解和认定为覆盖了所有这些其他变型或修改。

本发明实施例还公开了：

A1.一种网页的显示方法，包括：

获取所述网页的主题内容区域；

计算所述网页中元素相对于所述主题内容区域的位置关系；

根据所述位置关系设置所述元素的显示背景；

按照设置后的显示背景在浏览器中显示所述网页。

A2.根据A1所述的显示方法，其中，获取所述网页的主题内容区域包括：

计算所述网页中各元素的边界信息；

根据所述边界信息确定所述主题内容区域。

A3.根据A2所述的显示方法，其中，根据所述边界信息确定所述主题内容区域包括：

根据所述边界信息确定所述网页中各元素的左边界和右边界；

计算所述右边界的集中区域与所述左边界的集中区域之间的区域的宽度；

判断所述区域的宽度是否在预设的数值范围内；

若是，将所述右边界的集中区域与所述左边界的集中区域之间的区域作为所述主题内容区域。

A4.根据A2所述的显示方法，其中，根据所述位置信息确定所述主题内容区域包括：

通过预设的元素选择规则在所述网页的元素中挑选出主题元素；

将所述主题元素的显示区域作为所述主题内容区域。

A5.根据A4所述的显示方法，其中，在通过预设的元素选择规则挑选出主题元素之前还包括：

判断所述网页是否在预设的白名单内；

若是，获取所述白名单中预置的与所述网页对应的所述元素选择规则。

A6.根据A1至A5中任一项所述的显示方法，其中，计算所述网页中元素相对于所述主题内容区域的位置关系包括：

分别将所述元素的左右边界与所述主题内容区域的左右边界比较；

在所述元素的右边界位于所述主题内容区域的左边界左侧或者所述元素的左边界位于所述主题内容区域的右边界右侧的情况下，确定所述元素位于所述主题内容区域之外；

在所述元素的左边界位于所述主题内容区域的左边界右侧并且在所述元素的右边界位于所述主题内容区域的右边界左侧的情况下，确定所述元素位于所述主题内容区域内部；

在所述元素的左边界位于所述主题内容区域的左边界左侧并且在所述元素的右边界位于所述主题内容区域的右边界左侧的情况下，或者在所述元素的左边界位于所述主题内容区域的左边界右侧并且在所述元素的右边界位于所述主题内容区域的右边界右侧的情况下，确定所述元素部分位于所述主题内容区域内部。

A7.根据A6所述的显示方法，其中，根据所述位置关系设置所述元素的显示背景包括：

分别创建浏览器背景显示层、主题内容背景显示层、元素背景显示层，其中，所述元素背景显示层位于所述主题内容背景显示层的上方，所述主题内容背景显示层位于所述浏览器背景显示层的上方；

对于位于所述主题内容区域之外的元素，将该元素的背景设置为所述浏览器背景显示层的内容；

对于位于所述主题内容区域之内的元素，将该元素的背景设置为所述主题内容背景显示层的内容；

对于部分位于所述主题内容区域内部的元素，将该元素的背景设置为所述元素背景显示层的内容。

A8.根据A7所述的显示方法，其中，根据所述位置关系设置所述元素的显示背景的步骤通过浏览器扩展向所述网页注入css或js文件完成。

本发明实施例还公开了B9.一种浏览器，包括：

主题区域获取模块，用于获取网页的主题内容区域；

位置关系计算模块，用于计算所述网页中元素相对于所述主题内容区域的位置关系；

背景注入模块，用于根据所述位置关系设置所述元素的显示背景；

显示模块，用于按照设置后的显示背景显示所述网页。

B10.根据B9所述的浏览器，其中，所述位置关系计算模块配置为：

分别将所述元素的左右边界与所述主题内容区域的左右边界比较；

在所述元素的右边界位于所述主题内容区域的左边界左侧或者所述元素的左边界位于所述主题内容区域的右边界右侧的情况下，确定所述元素位于所述主题内容区域之外；

在所述元素的左边界位于所述主题内容区域的左边界右侧并且在所述元素的右边界位于所述主题内容区域的右边界左侧的情况下，确定所述元素位于所述主题内容区域内部；

在所述元素的左边界位于所述主题内容区域的左边界左侧并且在所述元素的右边界位于所述主题内容区域的右边界左侧的情况下，或者在所述元素的左边界位于所述主题内容区域的左边界右侧并且在所述元素的右边界位于所述主题内容区域的右边界右侧的情况下，确定所述元素部分位于所述主题内容区域内部。

B11.根据B10所述的浏览器，其中，所述背景注入模块配置为：

分别创建浏览器背景显示层、主题内容背景显示层、元素背景显示层，其中，所述元素背景显示层位于所述主题内容背景显示层的上方，所述主题内容背景显示层位于所述浏览器背景显示层的上方；

对于位于所述主题内容区域之外的元素，将该元素的背景设置为所述浏览器背景显示层的内容；

对于位于所述主题内容区域之内的元素，将该元素的背景设置为所述主题内容背景显示层的内容；

对于部分位于所述主题内容区域内部的元素，将该元素的背景设置为所述元素背景显示层的内容。

Claims (9)

1.一种网页的显示方法，包括：

获取所述网页的主题内容区域；

计算所述网页中元素相对于所述主题内容区域的位置关系；

根据所述位置关系设置所述元素的显示背景；

按照设置后的显示背景在浏览器中显示所述网页，其中根据所述位置关系设置所述元素的显示背景包括：

分别创建浏览器背景显示层、主题内容背景显示层、元素背景显示层，其中，所述元素背景显示层位于所述主题内容背景显示层的上方，所述主题内容背景显示层位于所述浏览器背景显示层的上方；

对于位于所述主题内容区域之外的元素，将该元素的背景设置为所述浏览器背景显示层的内容；

对于位于所述主题内容区域之内的元素，将该元素的背景设置为所述主题内容背景显示层的内容；

对于部分位于所述主题内容区域内部的元素，将该元素的背景设置为所述元素背景显示层的内容。

2.根据权利要求1所述的显示方法，其中，获取所述网页的主题内容区域包括：

计算所述网页中各元素的边界信息；

根据所述边界信息确定所述主题内容区域。

3.根据权利要求2所述的显示方法，其中，根据所述边界信息确定所述主题内容区域包括：

根据所述边界信息确定所述网页中各元素的左边界和右边界；

计算所述右边界的集中区域与所述左边界的集中区域之间的区域的宽度；

判断所述区域的宽度是否在预设的数值范围内；

若是，将所述右边界的集中区域与所述左边界的集中区域之间的区域作为所述主题内容区域。

4.根据权利要求2所述的显示方法，其中，根据所述边界信息确定所述主题内容区域包括：

通过预设的元素选择规则在所述网页的元素中挑选出主题元素；

将所述主题元素的显示区域作为所述主题内容区域。

5.根据权利要求4所述的显示方法，其中，在通过预设的元素选择规则挑选出主题元素之前还包括：

判断所述网页是否在预设的白名单内；

若是，获取所述白名单中预置的与所述网页对应的所述元素选择规则。

6.根据权利要求1至5中任一项所述的显示方法，其中，计算所述网页中元素相对于所述主题内容区域的位置关系包括：

分别将所述元素的左右边界与所述主题内容区域的左右边界比较；

在所述元素的右边界位于所述主题内容区域的左边界左侧或者所述元素的左边界位于所述主题内容区域的右边界右侧的情况下，确定所述元素位于所述主题内容区域之外；

在所述元素的左边界位于所述主题内容区域的左边界右侧并且在所述元素的右边界位于所述主题内容区域的右边界左侧的情况下，确定所述元素位于所述主题内容区域内部；

在所述元素的左边界位于所述主题内容区域的左边界左侧并且在所述元素的右边界位于所述主题内容区域的右边界左侧的情况下，或者在所述元素的左边界位于所述主题内容区域的左边界右侧并且在所述元素的右边界位于所述主题内容区域的右边界右侧的情况下，确定所述元素部分位于所述主题内容区域内部。

7.根据权利要求1所述的显示方法，其中，根据所述位置关系设置所述元素的显示背景的步骤通过浏览器扩展向所述网页注入css或js文件完成。

8.一种浏览器，包括：

主题区域获取模块，用于获取网页的主题内容区域；

位置关系计算模块，用于计算所述网页中元素相对于所述主题内容区域的位置关系；

背景注入模块，用于根据所述位置关系设置所述元素的显示背景；

显示模块，用于按照设置后的显示背景显示所述网页，其中，所述背景注入模块还配置为：分别创建浏览器背景显示层、主题内容背景显示层、元素背景显示层，其中，所述元素背景显示层位于所述主题内容背景显示层的上方，所述主题内容背景显示层位于所述浏览器背景显示层的上方；

对于位于所述主题内容区域之外的元素，将该元素的背景设置为所述浏览器背景显示层的内容；

对于位于所述主题内容区域之内的元素，将该元素的背景设置为所述主题内容背景显示层的内容；

对于部分位于所述主题内容区域内部的元素，将该元素的背景设置为所述元素背景显示层的内容。

9.根据权利要求8所述的浏览器，其中，所述位置关系计算模块配置为：

分别将所述元素的左右边界与所述主题内容区域的左右边界比较；

在所述元素的右边界位于所述主题内容区域的左边界左侧或者所述元素的左边界位于所述主题内容区域的右边界右侧的情况下，确定所述元素位于所述主题内容区域之外；

在所述元素的左边界位于所述主题内容区域的左边界右侧并且在所述元素的右边界位于所述主题内容区域的右边界左侧的情况下，确定所述元素位于所述主题内容区域内部；

在所述元素的左边界位于所述主题内容区域的左边界左侧并且在所述元素的右边界位于所述主题内容区域的右边界左侧的情况下，或者在所述元素的左边界位于所述主题内容区域的左边界右侧并且在所述元素的右边界位于所述主题内容区域的右边界右侧的情况下，确定所述元素部分位于所述主题内容区域内部。