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

Abstract

本发明提供了一种网页的显示方法和浏览器。其中，网页的显示方法包括：获取浏览器的显示设置信息以及网页的显示背景信息；获取网页的主题内容区域；按照显示背景信息设置主题内容区域的背景，并按照显示设置信息设置网页中主题内容区域之外的背景；根据设置后的主题使用网页本身的背景和浏览器的显示背景对网页不同位置进行差别设置，既保证网页主题内容显示不受影响的同时，又保证网页显示背景和浏览器显示界面的一致性，形成一体化的视觉效果，提高用户浏览网页的视觉体验，解决了浏览器显示页面时出现大片空白或者背景图片影响网页内容正常显示的问题。

Description

网页的显示方法和浏览器

技术领域

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

背景技术

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

图1和图2分别是根据现有技术中某网页的背景显示效果图，从图中可以看出使用现有技术中的浏览器和网页的显示方法，影响影响页面中主体内容显示而且视觉效果差。尤其对于视觉分割差异较大的页面，无法与浏览器的显示主题相匹配，无法满足用户的体验要求。

发明内容

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

基于本发明的一个方面，提供了一种网页的显示方法。该网页的显示方法包括：获取浏览器的显示设置信息以及网页的显示背景信息；获取网页的主题内容区域；按照显示背景信息设置主题内容区域的背景，并按照显示设置信息设置网页中主题内容区域之外的背景；根据设置后的主题内容区域的背景和主题内容区域之外的背景在浏览器中显示网页。

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

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

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

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

可选地，按照显示背景信息设置主题内容区域的背景包括：创建主体内容遮罩层，并按照显示背景信息为主体内容遮罩层的参数赋值，该主体内容遮罩层的位置大小与主题内容区域一致；按照显示设置信息设置网页中主题内容区域之外的背景包括：创建页面背景遮罩层，并按照显示设置信息为页面背景遮罩层的参数赋值，页面背景遮罩层设置在主体内容遮罩层的下方。

可选地，创建主体内容遮罩层和创建页面背景遮罩层的步骤通过浏览器扩展向网页注入css或js文件完成。

基于本发明的另一个方面，提供了一种浏览器。该浏览器包括：信息加载模块，用于获取该浏览器的显示设置信息以及网页的显示背景信息；主题区域获取模块，用于获取网页的主题内容区域；背景注入模块，用于按照显示背景信息设置主题内容区域的背景，并按照显示设置信息设置网页中主题内容区域之外的背景；显示模块，用于根据设置后的主题内容区域的背景和主题内容区域之外的背景显示网页。

可选地，主题区域获取模块配置为：计算网页中元素的位置信息；根据位置信息确定主题内容区域。

可选地，背景注入模块还包括：主题内容遮罩子模块，用于创建主体内容遮罩层，并按照显示背景信息为主体内容遮罩层的参数赋值，该主体内容遮罩层的位置大小与主题内容区域的位置大小一致；页面背景遮罩子模块，用于创建页面背景遮罩层，并按照显示设置信息为页面背景遮罩层的参数赋值，其中，页面背景遮罩层设置在主体内容遮罩层的下方。

本发明的网页的显示方法和浏览器使用网页本身的背景和浏览器的显示背景对网页不同位置进行差别设置，保证网页主题内容显示不受影响的同时，保证网页显示背景和浏览器显示界面的一致性，形成一体化的视觉效果，提高用户浏览网页的视觉体验，解决了浏览器显示页面时出现大片空白或者背景图片影响网页内容正常显示的问题。

进一步地，获取浏览器的显示设置信息并按照该设置信息对主题内容区域外的网页元素进行背景设置，使主题内容区域外的网页元素的显示与浏览器的主题背景相匹配，使不同网页均可以与浏览器的主题匹配，给用户对浏览器进行个性化设置提供了空间。

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

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

附图说明

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

图1是根据现有技术中某网页的第一背景显示效果图；

图2是根据现有技术中某网页的第二背景显示效果图；

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

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

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

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

具体实施方式

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

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

步骤S302，获取浏览器的显示设置信息以及网页的显示背景信息；

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

步骤S306，按照显示背景信息设置主题内容区域的背景，并按照显示设置信息设置网页中主题内容区域之外的背景；

步骤S308，根据设置后的主题内容区域的背景和主题内容区域之外的背景在浏览器中显示网页。

本实施例中的网页的显示方法中，根据网页元素相对于主题内容区域的位置关系分别将背景设置为浏览器显示主题对应背景或者网页自身的显示背景。既保证网页中主题内容的显示不受影响，又使页面背景保持与浏览器的显示主题相匹配，提高了浏览器整体的显示效果。

步骤S302中获取浏览器的显示设置信息，可以通过浏览器提供的特定接口获取浏览器当前的显示主题信息，该显示主题信息中包含背景色、背景图片等显示设置信息。步骤S302中获取网页的显示背景信息，可以直接从页面中提取出显示背景信息，并进行记录。在获取到以上信息后，可以将现有页面的背景设置为全透明，以便利用以上信息进行设置。

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

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

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

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

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

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

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

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

步骤S306中按照显示背景信息设置主题内容区域的背景的流程可以包括：创建主体内容遮罩层，并按照显示背景信息为主体内容遮罩层的参数赋值，该主体内容遮罩层的位置大小与主题内容区域一致。

步骤S306中按照显示设置信息设置网页中主题内容区域之外的背景的流程可以包括：创建页面背景遮罩层，并按照显示设置信息为页面背景遮罩层的参数赋值，页面背景遮罩层设置在主体内容遮罩层的下方。

执行以上步骤S306的流程可以采用通过浏览器扩展向网页注入css或js文件的方式完成。

为了区分网页中的元素是否在主题内容区域内部，还需要判断网页元素相对主题内容区域的位置。一种方式可以采用左右边界比较的方式进行，分别将网页中某一元素的左右边界与主题内容区域的左右边界比较；在元素的右边界位于主题内容区域的左边界左侧或者元素的左边界位于主题内容区域的右边界右侧的情况下，确定元素位于主题内容区域之外；在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，确定元素位于主题内容区域内部；在元素的左边界位于主题内容区域的左边界左侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，或者在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界右侧的情况下，确定元素部分位于主题内容区域内部。

在步骤S308中，对于位于主题内容区域之外的网页元素，以页面背景遮罩层的背景进行显示，保证与浏览器显示主题信息匹配。对于位于主题内容区域之外的网页元素，使用主体内容遮罩层的背景进行显示。对于部分位于主题内容区域之外的网页元素，可以首先记录原有的网页元素显示背景，然后将该元素的背景改成全透明，然后在元素的下面创建一个层，所创建层的高度、边框、背景等与此元素相同，宽度等于此元素位于主题区域以内部分的宽度，位置位于此元素在主体区域以内部分的位置。通过设置所创建层的背景可以改变这类网页元素的显示背景。

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

其中，信息加载模块410，用于获取该浏览器的显示设置信息以及网页的显示背景信息；主题区域获取模块420，用于获取网页的主题内容区域；背景注入模块430，用于按照显示背景信息设置主题内容区域的背景，并按照显示设置信息设置网页中主题内容区域之外的背景；显示模块440，用于根据设置后的主题内容区域的背景和主题内容区域之外的背景显示网页。

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

背景注入模块430可以包括：主题内容遮罩子模块431和页面背景遮罩子模块432，其中，主题内容遮罩子模块431用于创建主体内容遮罩层，并按照显示背景信息为主体内容遮罩层的参数赋值，该主体内容遮罩层的位置大小与主题内容区域的位置大小一致；页面背景遮罩子模块432，用于创建页面背景遮罩层，并按照显示设置信息为页面背景遮罩层的参数赋值，其中，页面背景遮罩层设置在主体内容遮罩层的下方。

背景注入模块430可以通过网页元素的左右边界判断其与主题内容区域的位置关系，一种流程可以包括：分别将元素的左右边界与主题内容区域的左右边界比较；在元素的右边界位于主题内容区域的左边界左侧或者元素的左边界位于主题内容区域的右边界右侧的情况下，确定元素位于主题内容区域之外；在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，确定元素位于主题内容区域内部；在元素的左边界位于主题内容区域的左边界左侧并且在元素的右边界位于主题内容区域的右边界左侧的情况下，或者在元素的左边界位于主题内容区域的左边界右侧并且在元素的右边界位于主题内容区域的右边界右侧的情况下，确定元素部分位于主题内容区域内部。

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

以上创建主体内容遮罩层以及主体内容遮罩层的参数的过程可以均通过浏览器扩展向网页注入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，因为子元素的背景要优先显示。

本发明的网页的显示方法和浏览器使用网页本身的背景和浏览器的显示背景对不同位置的网页元素进行差别设置，保证网页主题内容显示不受影响的同时，保证网页显示背景和浏览器显示界面的一致性，形成一体化的视觉效果，提高用户浏览网页的视觉体验，解决了浏览器显示页面时出现大片空白或者背景图片影响网页内容正常显示的问题。

另外，获取浏览器的显示设置信息并按照该设置信息对主题内容区域外的网页元素进行背景设置，使主题内容区域外的网页元素的显示与浏览器的主题背景相匹配，使不同网页均可以与浏览器的主题匹配，给用户对浏览器进行个性化设置提供了空间。

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

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

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

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

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

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

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

Claims (10)

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

获取浏览器的显示设置信息以及网页的显示背景信息；

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

按照所述显示背景信息设置所述主题内容区域的背景，并按照所述显示设置信息设置所述网页中所述主题内容区域之外的背景；

根据设置后的所述主题内容区域的背景和所述主题内容区域之外的背景在所述浏览器中显示所述网页。

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

计算所述网页中各元素的位置信息；

根据所述位置信息确定所述主题内容区域。

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

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

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

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

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

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

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

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

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

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

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

6.根据权利要求1至5中任一项所述的显示方法，其中，

按照所述显示背景信息设置所述主题内容区域的背景包括：创建主体内容遮罩层，并按照所述显示背景信息为所述主体内容遮罩层的参数赋值，该主体内容遮罩层的位置大小与所述主题内容区域一致；

按照所述显示设置信息设置所述网页中所述主题内容区域之外的背景包括：创建页面背景遮罩层，并按照所述显示设置信息为所述页面背景遮罩层的参数赋值，所述页面背景遮罩层设置在所述主体内容遮罩层的下方。

7.根据权利要求6所述的显示方法，其中，创建所述主体内容遮罩层和创建所述页面背景遮罩层的步骤通过浏览器扩展向所述网页注入css或js文件完成。

8.一种浏览器，包括：

信息加载模块，用于获取该浏览器的显示设置信息以及网页的显示背景信息；

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

背景注入模块，用于按照所述显示背景信息设置所述主题内容区域的背景，并按照所述显示设置信息设置所述网页中所述主题内容区域之外的背景；

显示模块，用于根据设置后的所述主题内容区域的背景和所述主题内容区域之外的背景显示所述网页。

9.根据权利要求8所述的浏览器，其中，所述主题区域获取模块配置为：

计算所述网页中元素的位置信息；

根据所述位置信息确定所述主题内容区域。

10.根据权利要求8或9所述的浏览器，其中，所述背景注入模块还包括：

主题内容遮罩子模块，用于创建主体内容遮罩层，并按照所述显示背景信息为所述主体内容遮罩层的参数赋值，该主体内容遮罩层的位置大小与所述主题内容区域的位置大小一致；

页面背景遮罩子模块，用于创建页面背景遮罩层，并按照所述显示设置信息为所述页面背景遮罩层的参数赋值，其中，

所述页面背景遮罩层设置在所述主体内容遮罩层的下方。

Images