CN111506847B - 网页展示方法、装置、设备及可读存储介质 - Google Patents

Abstract

本发明公开了一种网页展示方法、装置、设备及可读存储介质。该方法包括：设置嵌入有目标组件的目标网页所对应的目标网页视图，使得目标网页视图被绘制到展示目标网页的目标窗口时，仅显示目标网页中被设置在目标组件上方显示的目标网页元素；设置目标窗口的组件绘制次序，使得目标组件优先于目标网页视图被绘制到目标窗口上；根据目标窗口的组件绘制次序，将目标组件以及目标网页视图绘制到目标窗口上，以通过目标窗口展示目标网页。

Description

网页展示方法、装置、设备及可读存储介质

技术领域

本发明涉及互联网技术领域，更具体地，涉及一种网页展示方法、装置、设备及可读存储介质。

背景技术

基于WebView(网页视图)实现加载、绘制、渲染并展示的网页，能展示丰富多样的网页内容以及绚烂多变的视觉效果。

但是，随着用户对网页展示的需求日趋多样化，用户期望网页实现的一些功能（例如添加一个地图），如果借助WebView实现，需要重新进行开发，需要耗费较长的时间，存在较高的开发成本，并且实现的性能，依然不能与基于操作系统提供的Native（原生）组件实现的性能媲美。可是，将Native组件嵌入网页使用时，却会覆盖网页中原有的网页元素，影响网页的展示效果。

发明内容

本发明的一个目的是提供一种用于展示网页的新技术方案。

根据本发明的第一方面，提供了一种网页展示方法，其中，包括：

设置嵌入有目标组件的目标网页所对应的目标网页视图，使得所述目标网页视图被绘制到展示所述目标网页的目标窗口时，仅显示所述目标网页中被设置在所述目标组件上方显示的目标网页元素；

设置所述目标窗口的组件绘制次序，使得所述目标组件优先于所述目标网页视图被绘制到所述目标窗口上；

根据所述目标窗口的组件绘制次序，将所述目标组件以及所述目标网页视图绘制到所述目标窗口上，以通过所述目标窗口展示所述目标网页。

可选地，所述设置嵌入有目标组件的目标网页所对应的目标网页视图的步骤包括：

提供一个离屏图形缓冲区作为目标替代区域；

通过所述目标网页视图将所述目标网页绘制到所述目标替代区域上，使得所述目标替代区域中仅显示所述目标网页元素；

设置所述目标替代区域代替所述目标网页视图，被绘制到所述目标窗口上。

可选地，所述目标网页中包括与所述目标组件对应的替代网页元素，所述替代网页元素被设置为不具有显示内容，但具有对应的显示位置以及显示尺寸；

所述通过所述目标网页视图将所述目标网页绘制到所述目标替代区域上的步骤包括：

根据所述目标网页的网页结构，将所述目标网页包括的网页元素依次绘制到所述目标替代区域上；

其中，所述目标网页的网页结构是构成所述目标网页的网页元素之间的层次结构；

当绘制到所述替代网页元素时，设置所述目标替代区域中在所述替代网页元素对应的显示位置上、符合所述显示尺寸的替代元素区域为透明状态；

继续执行所述依次绘制网页元素的步骤，直至所述目标网页中剩余的其他网页元素，都被绘制在所述替代元素区域被设置为透明状态的所述目标替代区域中，以实现所述目标替代区域中仅显示所述目标网页元素。

可选地，所述根据所述目标网页的网页结构，将所述目标网页包括的网页元素依次绘制到所述目标替代区域上的步骤包括：

根据所述目标网页的网页结构，获取对应的所述目标网页的图层结构；

其中，所述目标网页的图层结构是用于绘制所述目标网页的多个图层之间的层次结构，每个所述图层包括一个或多个所述目标网页的网页元素；

根据所述目标网页的图层结构，将与所述目标网页对应的多个所述图层依次绘制到所述目标替代区域上。

可选地，设置所述目标替代区域中与所述替代网页元素对应的显示位置上、符合所述显示尺寸的替代元素区域为透明状态的步骤包括 ：

清除所述目标替代区域的所述替代元素区域中已绘制的、所述目标网页的网页元素的内容。

可选地，所述目标窗口具有对应的组件结构，所述目标窗口的组件结构是构成所述目标窗口的组件之间的层次结构；所述目标窗口的组件结构与所述目标窗口的组件绘制次序对应；

所述设置所述目标窗口的组件绘制次序的步骤包括：

在目标窗口对应的组件结构中，设置所述目标组件在所述目标网页视图的下方，对应得到所述组件绘制次序。

可选地，所述目标组件是原生用户界面组件。

根据本发明的第二方面，提供一种网页展示装置，其中，包括 ：

组件设置单元，用于设置嵌入有目标组件的目标网页所对应的目标网页视图，使得所述目标网页视图被绘制到展示所述目标网页的目标窗口时，仅显示所述目标网页中被设置在所述目标组件上方显示的目标网页元素；

绘制设置单元，用于设置所述目标窗口的组件绘制次序，使得所述目标组件优先于所述目标网页视图被绘制到所述目标窗口上；

组件绘制单元，用于根据所述目标窗口的组件绘制次序，将所述目标组件以及所述目标网页视图绘制到所述目标窗口上，以通过所述目标窗口展示所述目标网页。

根据本发明的第三方面，提供一种网页展示设备，其中，包括：

显示装置；

存储器，用于存储可执行的指令；

处理器，用于根据所述可执行的指令的控制，运行所述网页展示设备执行如本发明第一方面任一项所述的网页展示方法。

根据本发明的第四方面，提供一种可读存储介质，其中，所述可读存储介质存储有可被计算机读取并运行的计算机程序，所述计算机程序用于在被所述计算机运行时，执行如本发明第一方面任一项所述的网页展示方法。

根据本公开的一个实施例，可以根据组件绘制次序，先将目标组件绘制到目标窗口上，而后再将目标网页视图绘制到目标窗口上，结合目标网页视图中仅显示目标网页中被设置在目标组件上方显示的目标网页元素，最终目标窗口中会显示目标组件的内容以及在目标组件上方显示的目标网页的网页元素，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染，呈现出正确的层级关系，使得目标组件与目标网页的网页元素无缝融合显示，提升网页展示效果。同时，对于嵌入目标网页的目标组件可以应用任意的现有组件实现，不存在额外的功能需求，应用更为灵活。

通过以下参照附图对本发明的示例性实施例的详细描述，本发明的其它特征及其优点将会变得清楚。

附图说明

被结合在说明书中并构成说明书的一部分的附图示出了本发明的实施例，并且连同其说明一起用于解释本发明的原理。

图1是显示可用于实现本发明的实施例的电子设备1000的硬件配置的例子的框图。

图2示出了本发明的实施例的网页展示方法的流程图。

图3示出了渲染网页的流程图。

图4示出了绘制用户界面的流程图。

图5是本发明的实施例的网页展示方法的例子的示意图。

图6是本发明的实施例的网页展示装置3000的示意图。

图7是本发明的实施例的网页展示设备4000的示意图。

具体实施方式

现在将参照附图来详细描述本发明的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

在这里示出和讨论的所有例子中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它例子可以具有不同的值。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

<硬件配置>

图1是示出可以实现本发明的实施例的电子设备1000的硬件配置的框图。

电子设备1000可以是便携式电脑、台式计算机、手机、平板电脑等。如图1所示，电子设备1000可以包括处理器1100、存储器1200、接口装置1300、通信装置1400、显示装置1500、输入装置1600、扬声器1700、麦克风1800等等。其中，处理器1100可以是中央处理器CPU、微处理器MCU等。存储器1200例如包括ROM（只读存储器）、RAM（随机存取存储器）、诸如硬盘的非易失性存储器等。接口装置1300例如包括USB接口、耳机接口等。通信装置1400例如能够进行有线或无线通信，具体地可以包括Wifi通信、蓝牙通信、2G/3G/4G/5G通信等。显示装置1500例如是液晶显示屏、触摸显示屏等。输入装置1600例如可以包括触摸屏、键盘、体感输入等。用户可以通过扬声器1700和麦克风1800输入/输出语音信息。

图1所示的电子设备仅仅是说明性的并且决不意味着对本发明、其应用或使用的任何限制。应用于本发明的实施例中，电子设备1000的所述存储器1200用于存储指令，所述指令用于控制所述处理器1100进行操作以执行本发明实施例提供的任意一项网页展示方法。本领域技术人员应当理解，尽管在图1中对电子设备1000示出了多个装置，但是，本发明可以仅涉及其中的部分装置，例如，电子设备1000只涉及处理器1100和存储装置1200。技术人员可以根据本发明所公开方案设计指令。指令如何控制处理器进行操作，这是本领域公知，故在此不再详细描述。

本发明实施例的总体构思，是提供一种展示网页的新方案，通过对嵌入有目标组件的目标网页对应的目标网页视图进行设置，使得目标网页视图被绘制到展示目标网页的目标窗口时，只有被设置在嵌入的目标组件上方显示的网页元素能被显示，并且设置目标窗口的组件绘制次序，使得目标组件优先于目标网页视图被绘制到目标窗口上，使得最终通过目标窗口呈现的目标网页中，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染，呈现出正确的层级关系，使得目标组件与目标网页的网页元素无缝融合显示，提升网页展示效果。同时，对于嵌入目标网页的目标组件可以应用任意的现有组件实现，不存在额外的功能需求，应用更为灵活。

<实施例>

在本实施例中，提供一种网页展示方法。该网页可以是任意的能基于网页视图实现加载、绘制、渲染并展示的、具有对应网页内容的页面。

如图2所示，网页展示方法包括：步骤S2100-步骤S2300。

步骤S2100，设置嵌入有目标组件的目标网页所对应的目标网页视图，使得目标网页视图被绘制到展示目标网页的目标窗口时，仅显示目标网页中被设置在目标组件上方显示的目标网页元素。

目标组件是可以被嵌入网页中、提供对应的组件功能的组件。例如，目标组件可以是原生（Native）组件，原生组件是指基于对应的操作系统（例如安卓操作系统）所支持的API（Application Programming Interface，应用程序接口）开发的、提供对应功能的组件。更具体的例子中，目标组件可以是原生用户界面组件（Native UI 组件），原生用户界面组件可以是由对应的操作系统提供的或者支持的、与用户界面（UI）相关的原生组件，提供对应的与用户界面相关的组件功能，例如，原生用户界面组件可以是Native View（原生视图），该Native View可以用于展示一个地图、广告或者视频等。

在一个例子中，目标组件可以是第三方开发、运营或提供的第三方组件库中的组件，例如第三方组件库中提供的原生用户界面组件。使用第三方组件库中的组件作为目标组件，可以更灵活地调用第三方组件库的资源满足用户多样化的网页展示需求。

或者，目标组件还可以由期望在网页中嵌入目标组件使用的应用提供，例如，可以由期望在加载的网页中嵌入目标组件使用的Native APP（原生应用）提供，由此任意的应用可以通过本实施例中提供的网页处理方法，将期望使用的目标组件嵌入对应的网页中使用。

通过在目标网页中嵌入目标组件，可以直接通过目标组件提供对应的组件功能以满足用户的网页展示需求，而无需基于目标网页所基于的网页视图重新进行开发，降低开发成本。而当目标组件是原生用户界面组件时，还可以对应提供原生组件相对于网页视图更优越的性能。

与目标网页对应的目标网页视图，是可以将目标网页所包括的网页元素绘制到用于展示目标网页的目标窗口的网页视图（WebView）。网页视图可以是对应的操作系统提供的标准的用户界面组件（UI组件），能实现网页的加载、绘制、渲染并展示。

绘制网页的网页元素到对应展示的目标窗口的过程是网页的渲染过程，可以通过任意的实现网页访问、加载功能的应用或者功能模块实现，例如浏览器、浏览器内核、Web内核等具体的一个例子中，在网页视图将网页中包括的网页元素绘制到目标窗口时，可以通过浏览器的合成器实现。

图3示出渲染网页的一个简略示意图，包括步骤1A-1C。

步骤1A，构建网页的DOM树。

DOM（Document Object Model,文档对象模型)是以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。在网页中，组织页面（或文档）的网页元素被组织在一个树形结构中，用来表示网页元素的标准模型就称为DOM。即在实施例中，DOM可以是网页的树形结构中与一个网页元素对应的网页元素节点的代称。

根据网页包括的网页元素被组织构成网页的层次结构（树形结构），可以构建生成网页的DOM树。

步骤1B，构建与DOM树对应的、网页的图层树。

图层是用于渲染网页的一种中间媒介或中间工具。每个图层可以包括一个或者多个网页的网页元素，对应的，每个图层可以包括一个或多个DOM元素，因此，根据网页的DOM树，可以对应构建生成网页的图层树。

步骤1C，通过遍历网页的图层树，依次将每个图层绘制到目标surface上。

目标surface（表面）是输出绘制结果的目标图形缓冲区，通常目标表面会被设置为用于显示网页的应用的窗口。通过遍历网页的图层树，以遍历图层树得到的绘制次序，依次将每个图层绘制到目标表面上，就能实现网页的渲染。

在本实施例中，目标窗口是用于展示目标网页的窗口，目标窗口可以是任意需要展示目标网页的应用的窗口。窗口也可以是提供人机交互服务的一种用户界面（UI）。

通过设置目标网页的目标网页视图，使得目标网页视图被绘制到目标窗口时，仅显示目标网页中被设置在目标组件上方显示的目标网页元素，可以结合本实施例的其他步骤，使得最终通过目标窗口呈现的目标网页中，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染，呈现出正确的层级关系，使得目标组件与目标网页的网页元素无缝融合显示，提升网页展示效果。

应当理解的是，本实施例中，目标网页元素是被设置在目标组件上方显示的目标网页中的网页元素。网页元素可以是文字、图片、音频、动画、视频、交互控件等其中一种。目标网页元素实际是根据目标网页具体的网页结构（构成目标网页的网页元素之间的层次结构）、在显示时不应被嵌入目标网页的目标组件覆盖的、目标网页中的网页元素。

在一个例子中，设置嵌入有目标组件的目标网页所对应的目标网页视图的步骤包括：步骤S2110-S2130。

步骤S2110, 提供一个离屏图形缓冲区作为目标替代区域。

在本例中，可以分配、指定或者选择一个离屏图像缓冲区，以提供作为目标替代区域。

步骤S2120，通过目标网页视图将目标网页绘制到目标替代区域上，使得目标替代区域中仅显示目标网页元素。

目标网页元素是被设置在目标组件上方显示的目标网页中的网页元素，也就是根据目标网页具体的网页结构（构成目标网页的网页元素之间的层次结构）、在显示时不应被嵌入目标网页的目标组件覆盖的、目标网页中的网页元素。

在更具体的一个例子中，目标网页中包括与目标组件对应的替代网页元素。替代网页元素被设置为不具有显示内容，但具有对应的显示位置以及显示尺寸。替代网页元素的显示位置、显示尺寸，分别与目标组件被嵌入目标网页时期望处于的显示位置、显示尺寸相同。

对应的，步骤S2120可以包括：步骤S2121-S2123。

步骤S2121，根据目标网页的网页结构，将目标网页包括的网页元素依次绘制到目标替代区域上。

目标网页的网页结构是构成目标网页的网页元素之间的层次结构。网页包括的网页元素通常被组织在一个树形结构中以构成对应的网页，该树形结构即为网页的网页结构。例如，以DOM作为网页的树形结构中与一个网页元素对应的网页元素节点，对应的，目标网页的网页结构可以是目标网页的DOM树，DOM树的构建可以如图3中的步骤1A。

通过目标网页的网页结构，可以对应得到网页元素绘制到目标替代区域的绘制次序，依据该绘制次序依次将网页元素绘制到目标替代区域上，可以使得后续目标网页在显示时，网页元素的显示呈现正确的层级关系。

在本例中，步骤S2121具体可以包括：步骤S21211-S21212。

步骤S21211，根据目标网页的网页结构，获取对应的目标网页的图层结构。

目标网页的图层结构是用于绘制目标网页的多个图层之间的层次结构，每个图层包括一个或多个目标网页的网页元素。

图层可以是浏览器或者类似浏览器的应用提供的、用于渲染网页的、作为中间媒介的图层。

目标网页的网页结构是构成目标网页的网页元素之间的层次结构，对应地，根据目标网页的网页结构，可以构建生成目标网页的图层结构，例如，假设目标网页的网页结构是DOM树，通过图3所示的步骤1B，可以对应得到目标网页的图层树作为目标网页的图层结构。

步骤S21212，根据目标网页的图层结构，将与目标网页对应的多个图层依次绘制到目标替代区域上。

在本例中，图层结构中包括用于绘制目标网页的多个图层之间的层次结构，根据图层结构，可以对应得到绘制与目标网页对应的多个图层到目标替代区域上的图层绘制次序，根据该图层绘制次序，将与目标网页对应的多个图层依次绘制到目标替代区域上。

例如，可以通过图3所示的步骤1C，将目标surface设置为本例中的目标替代区域（离屏缓冲图形区域），而不是设置为目标窗口，通过遍历作为图层结构的图层树的遍历次序，作为图层绘制次序，依次将与目标网页对应的多个图层依次绘制到目标替代区域上。

步骤S2122，当绘制到替代网页元素时，设置目标替代区域中在替代网页元素对应的显示位置上、符合显示尺寸的替代元素区域为透明状态。

在本例中，步骤S2122发生在根据步骤S2121将网页元素依次绘制到目标替代区域的过程中，当根据与网页结构对应的绘制次序，绘制到替代网页元素时，将目标替代区域中与替代网页元素对应的替代元素区域设置为透明状态，后续绘制到目标替代区域的网页元素都会叠加到该透明状态的替代元素区域的上方，可以使得此前绘制到替代元素区域的内容，都被后续绘制到目标替代区域上的网页元素覆盖，呈现出正确的层级关系。

在具体的一个例子中，设置目标替代区域中与替代网页元素对应的显示位置上、符合显示尺寸的替代元素区域为透明状态的步骤包括：

清除目标替代区域的替代元素区域中已绘制的、目标网页的网页元素的内容。

通过将在绘制替代网页元素之前，已经绘制到替代元素区域的、目标网页的网页元素的内容，而替代网页元素本身没有实际的显示内容，因此，对应的，在绘制替代网页元素时对替代元素区域进行清除，可以实现替代元素区域被设置为透明状态。

例如，绘制网页元素到目标替代区域的步骤S2211，可以通过图3所示的步骤1C，将目标surface设置为本例中的目标替代区域（离屏缓冲图形区域），而不是设置为目标窗口，通过遍历作为图层结构的图层树的遍历次序，作为图层绘制次序，依次将与目标网页对应的多个图层依次绘制到目标替代区域上，而在绘制包括替代网页元素、与目标组件对应的图层到目标替代区域上时，可以将目标替代区域中、与目标组件对应的替代元素区域进行清除，而替代网页元素不具有实际的显示内容，与包括替代网页元素的图层也不具有实际内容，因此绘制包括替代网页元素、与目标组件对应的图层时，对替代元素区域进行清除，可以实现替代元素区域被设置为透明状态。

步骤S2123，继续执行依次绘制网页元素的步骤S2121，直至目标网页中剩余的其他网页元素，都被绘制在替代元素区域被设置为透明状态的目标替代区域中，以实现目标替代区域中仅显示目标网页元素。

继续以上述绘制网页元素到目标替代区域的步骤S2211，可以通过图3所示的步骤1C，将目标surface设置为本例中的目标替代区域（离屏缓冲图形区域）来实现为例，在绘制包括替代网页元素的、与目标组件对应的图层后，对应会继续绘制图层树中、图层绘制次序在后的其他图层到目标替代区域上，此时其他图层包括的网页元素就可以在目标替代区域中叠加到透明状态的替代元素区域上方，实现在目标替代区域中仅显示被设置在目标组件上方显示的目标网页元素。

在步骤S2100之外：

步骤S2200，设置目标窗口的组件绘制次序，使得目标组件优先于目标网页视图被绘制到目标窗口上。

通过设置目标窗口的组件绘制次序，目标组件能优先于目标网页视图被绘制到目标窗口上，而目标网页视图在绘制到目标窗口上时，仅显示目标网页中被设置在目标组件上方显示的目标网页元素，因此在目标组件以及目标网页视图都被绘制到目标窗口上后，目标窗口中会显示目标组件的内容以及在目标组件上方显示的目标网页的网页元素，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染，呈现出正确的层级关系，使得目标组件与目标网页的网页元素无缝融合显示，提升网页展示效果。

通常例如Android这样的操作系统会提供用户界面框架（UI框架），用于绘制用户界面（UI）。目标窗口作为一个用户界面，也可以通过操作系统提供的UI框架进行绘制。

图4示出通过Android操作系统的UI框架绘制用户界面的一个简略示意图，包括步骤2A-2B。

步骤2A，构建用户界面的View树。

用户界面通常由多个组件构成，这些组件通常是View（视图）。这些组件基于组件之间的层次结构，构成用户界面。通常这些构成用户界面的组件通常被组织在一个树形结构中，对应的，可以根据用户界面的View之前的层次结构，构建对应的View树，作为用户界面的组件结构。

步骤2B，遍历View树，依次将每个构成用户界面的View绘制到应用当前的窗口上。

应用当前的窗口就是输出显示的用户界面。通过遍历View树，以遍历View树得到的绘制次序，依次将每个View绘制应用当前的窗口上，就能实现用户界面的绘制渲染。

在本实施例的一个具体的例子中，目标窗口具有对应的组件结构，目标窗口的组件结构是构成目标窗口的组件之间的层次结构。目标窗口的组件结构与目标窗口的组件绘制次序对应。比如，目标窗口的组件结构，可以体现构成目标窗口的View（视图）这些组件之间的层次结构的View树， 对应的，遍历View树的次序，就是目标窗口的组件绘制次序。

在本例中，设置目标窗口的组件绘制次序的步骤包括：

在目标窗口对应的组件结构中，设置目标组件在目标网页视图的下方，对应得到组件绘制次序。

例如，目标窗口对应的组件结构是目标窗口的View树，对应的，将目标组件设置在目标网页视图的下方，使得目标组件是目标网页视图在View树中的下一个兄弟节点，在遍历View树时，目标组件会优先于目标网页视图被访问，遍历View树对应得到的组件绘制次序中，目标组件会优先于目标网页视图被绘制到目标窗口上。

步骤S2300，根据目标窗口的组件绘制次序，将目标组件以及目标网页视图绘制到目标窗口上，以通过目标窗口展示目标网页。

根据组件绘制次序，先将目标组件绘制到目标窗口上，而后再将目标网页视图绘制到目标窗口上，结合目标网页视图中仅显示目标网页中被设置在目标组件上方显示的目标网页元素，最终目标窗口中会显示目标组件的内容以及在目标组件上方显示的目标网页的网页元素，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染，呈现出正确的层级关系，使得目标组件与目标网页的网页元素无缝融合显示，提升网页展示效果。

同时，目标组件独立于目标网页视图绘制到目标窗口上，并不参与目标网页视图本身的绘制渲染，对应的在基于目标网页视图绘制渲染目标网页时也无需实施目标组件的绘制，因此，对于嵌入目标网页的目标组件可以应用任意的现有组件实现，不存在额外的功能需求，应用更为灵活。

基于上述步骤S2200中所举的例子，目标窗口的组件绘制次序可以是遍历目标窗口的View树时得到的绘制次序，可以通过如图4所示的步骤2B，遍历View树，先将目标组件绘制到目标窗口上，而后再将目标网页视图绘制到目标窗口上，在绘制目标网页视图时，可以通过如图3所示的步骤1C中获取通过目标网页对应的多个图层绘制的目标替代区域，而目标替代区域包括与目标组件对应的、处于以透明状态的替代元素区域，将目标替代区域代替目标网页视图绘制到目标窗口上，对应的，绘制在目标窗口上的目标组件的内容，不会被绘制到目标窗口的目标网页视图中透明状态的替代元素区域覆盖，目标组件会被穿透显示，并且，被设置在目标组件上方显示的目标网页元素，也会叠加在目标组件上方显示，呈现出正确的层级关系，实现目标组件和目标网页的网页元素无缝融合显示。同时，对于嵌入目标网页的目标组件可以应用任意的现有组件实现，不存在额外的功能需求，应用更为灵活。

<例子>

以下将结合图5进一步举例说明本实施例中提供的网页展示方法。

在本例中，假设用户通过某个基于Android操作系统的Native APP加载展示嵌入有目标组件的目标网页，该Native APP中集成有实施本实施例中提供的网页展示方法的WebView SDK（基于网页视图的软件工具开发包），目标组件是Android操作系统支持的原生UI组件，如图5所示，该目标组件用于显示地图。

在本例中，Native APP在加载目标网页时，Native APP中集成的实施本实施例中提供的网页展示方法的WebView SDK，可以通过如图3所示的步骤1C，分配一个离屏图形缓冲区作为目标Surface，遍历目标网页的图层树，将目标网页对应的多个图层依次绘制到目标Surface上，在绘制与目标组件对应的替代网页元素所在的图层时，将替代网页元素在目标Surface上对应占据的替代元素区域进行清除，实现设置替代元素区域为透明状态，最终得到的目标Surface即为代替目标网页视图的目标替代区域，如图5所示；

同时，Native APP中集成的实施本实施例中提供的网页展示方法的WebView SDK，可以通过调用Android操作系统的UI框架绘制Native APP中用于展示目标网页的目标窗口，具体地，可以通过如图4的步骤2A，在构建目标窗口的View树时，将目标组件设置为目标网页视图在View树中的下一个兄弟节点，目标组件位于目标网页视图下方，而在通过如图4的步骤2B遍历View树将每个组件（View）绘制到目标窗口时，会先目标组件先绘制到目标窗口上，让后在绘制目标网页视图时，将目标替代区域代替目标网页视图绘制到目标窗口上，从而目标组件可以从目标替代区域的透明状态的元素替代区域中穿透显示，而在视觉效果上，被设置在目标组件上方的图层，绘制时也会在目标组件上方，从而实现设置在目标组件上方显示的目标网页元素，不会被目标组件覆盖。

如图5所示，嵌入的目标组件和目标网页的网页元素的混合绘制渲染在目标窗口时，会呈现出正确的层级关系，实现目标组件与目标网页的网页元素无缝融合显示，提升网页展示效果。

同时，在本例中，对于嵌入目标网页的目标组件可以应用任意的现有组件实现，不存在额外的功能需求，应用更为灵活。

<网页展示装置>

在本实施例中，还提供一种网页展示装置3000，如图6所示，包括：组件设置单元3100、绘制设置单元3200以及组件绘制单元3300，用于实施本实施例中提供的网页展示方法，在此不再赘述。

组件设置单元3100，用于设置嵌入有目标组件的目标网页所对应的目标网页视图，使得目标网页视图被绘制到展示目标网页的目标窗口时，仅显示目标网页中被设置在目标组件上方显示的目标网页元素。

其中，目标窗口具有对应的组件结构，目标窗口的组件结构是构成目标窗口的组件之间的层次结构；目标窗口的组件结构与目标窗口的组件绘制次序对应。

可选地，目标组件是原生用户界面组件。

可选地，组件设置单元3100还包括：

用于提供一个离屏图形缓冲区作为目标替代区域的装置；

用于通过目标网页视图将目标网页绘制到目标替代区域上，使得目标替代区域中仅显示目标网页元素的装置；

以及用于设置目标替代区域代替目标网页视图，被绘制到目标窗口上的装置。

可选地，目标网页中包括与目标组件对应的替代网页元素，替代网页元素被设置为不具有显示内容，但具有对应的显示位置以及显示尺寸。

用于通过目标网页视图将目标网页绘制到目标替代区域上的装置还用于：

根据目标网页的网页结构，将目标网页包括的网页元素依次绘制到目标替代区域上。

其中，目标网页的网页结构是构成目标网页的网页元素之间的层次结构。

其中，用于根据目标网页的网页结构，将目标网页包括的网页元素依次绘制到目标替代区域上的装置还用于：

当绘制到替代网页元素时，设置目标替代区域中在替代网页元素对应的显示位置上、符合显示尺寸的替代元素区域为透明状态。继续执行依次绘制网页元素的步骤，直至目标网页中剩余的其他网页元素，都被绘制在替代元素区域被设置为透明状态的目标替代区域中，以实现目标替代区域中仅显示目标网页元素。

可选地，用于根据目标网页的网页结构，将目标网页包括的网页元素依次绘制到目标替代区域上的装置还用于：

根据目标网页的网页结构，获取对应的目标网页的图层结构。其中，目标网页的图层结构是用于绘制目标网页的多个图层之间的层次结构，每个图层包括一个或多个目标网页的网页元素；

以及根据目标网页的图层结构，将与目标网页对应的多个图层依次绘制到目标替代区域上。

可选地，用于根据目标网页的网页结构，将目标网页包括的网页元素依次绘制到目标替代区域上的装置还用于：

清除目标替代区域的替代元素区域中已绘制的、目标网页的网页元素的内容。

绘制设置单元3200，用于设置目标窗口的组件绘制次序，使得目标组件优先于目标网页视图被绘制到目标窗口上。

可选地，绘制设置单元3200还用于：

在目标窗口对应的组件结构中，设置目标组件在目标网页视图的下方，对应得到组件绘制次序。

组件绘制单元3300，用于根据目标窗口的组件绘制次序，将目标组件以及目标网页视图绘制到目标窗口上，以通过目标窗口展示目标网页。

本领域技术人员应当明白，可以通过各种方式来实现网页展示装置3000。例如，可以通过指令配置处理器来实现网页展示装置3000。例如，可以将指令存储在ROM中，并且当启动设备时，将指令从ROM读取到可编程器件中来实现网页展示装置3000。例如，可以将网页展示装置3000固化到专用器件（例如ASIC）中。可以将网页展示装置3000分成相互独立的单元，或者可以将它们合并在一起实现。网页展示装置3000可以通过上述各种实现方式中的一种来实现，或者可以通过上述各种实现方式中的两种或更多种方式的组合来实现。

在本实施例中，网页展示装置3000可以是任意实现本实施例中提供的网页展示方法的软件产品、应用程序、软件工具开发包、插件、嵌入件或补丁等。例如，网页展示装置3000可以是具有网页访问功能的应用或功能模块，具体比如浏览器、浏览器内核、Web内核等，或者，网页展示装置3000可以是WebView SDK这类以软件开发工具包的形式向外提供服务的网页视图组件，可以供任意的期望实施本实施例的网页处理方法的应用（例如NativeAPP）集成或安装后使用。

<网页展示设备>

在本实施例中，还提供一种网页展示设备4000，如图7所示，包括：

显示装置4100；

存储器4200，用于存储可执行的指令；

处理器4300，用于根据可执行的指令的控制，运行网页展示设备执行如本实施例中提供的网页展示方法。

在本实施例中，网页展示设备4000可以是手机、掌上电脑、平板电脑、笔记本电脑、台式电脑等电子设备。例如，网页展示设备4000可以是如图1所示的电子设备1000。具体的一个例子中，网页展示设备4000可以是设置有实施本实施例的网页展示方法的网页视图组件的手机。

网页展示设备4000还可以包括其他的装置，例如还可以包括输入装置、通信装置等。

<可读存储介质>

在本实施例中，还提供一种可读存储介质5000，可读存储介质5000存储有可被计算机读取并运行的计算机程序，所述计算机程序用于在被所述计算机运行时，执行如本实施例所述的网页展示方法。

在本实施例中，可读存储介质5000可以是可以保持和存储由指令执行设备使用的指令的有形设备。可读存储介质5000例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。可读存储介质5000的更具体的例子（非穷举的列表）包括：便携式计算机盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦式可编程只读存储器（EPROM或闪存）、静态随机存取存储器（SRAM）、便携式压缩盘只读存储器（CD-ROM）、数字多功能盘（DVD）、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的可读存储介质5000不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波（例如，通过光纤电缆的光脉冲）、或者通过电线传输的电信号。

以上已经结合附图和例子说明本实施例中提供的网页展示方法、装置、设备及可读存储介质，根据组件绘制次序，先将目标组件绘制到目标窗口上，而后再将目标网页视图绘制到目标窗口上，结合目标网页视图中仅显示目标网页中被设置在目标组件上方显示的目标网页元素，最终目标窗口中会显示目标组件的内容以及在目标组件上方显示的目标网页的网页元素，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染，呈现出正确的层级关系，使得目标组件与目标网页的网页元素无缝融合显示，提升网页展示效果。同时，对于嵌入目标网页的目标组件可以应用任意的现有组件实现，不存在额外的功能需求，应用更为灵活。

本发明可以是系统、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于使处理器实现本发明的各个方面的计算机可读程序指令。

计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子（非穷举的列表）包括：便携式计算机盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦式可编程只读存储器（EPROM或闪存）、静态随机存取存储器（SRAM）、便携式压缩盘只读存储器（CD-ROM）、数字多功能盘（DVD）、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波（例如，通过光纤电缆的光脉冲）、或者通过电线传输的电信号。

这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。

用于执行本发明操作的计算机程序指令可以是汇编指令、指令集架构（ISA）指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等，以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机（例如利用因特网服务提供商来通过因特网连接）。在一些实施例中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、现场可编程门阵列（FPGA）或可编程逻辑阵列（PLA），该电子电路可以执行计算机可读程序指令，从而实现本发明的各个方面。

这里参照根据本发明实施例的方法、装置（系统）和计算机程序产品的流程图和/或框图描述了本发明的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。

这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。

也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。

附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分，所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。对于本领域技术人员来说公知的是，通过硬件方式实现、通过软件方式实现以及通过软件和硬件结合的方式实现都是等价的。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。本发明的范围由所附权利要求来限定。

Claims (9)

1.一种网页展示方法，其中，包括：

设置嵌入有目标组件的目标网页所对应的目标网页视图，使得所述目标网页视图被绘制到展示所述目标网页的目标窗口时，仅显示所述目标网页中被设置在所述目标组件上方显示的目标网页元素；

设置所述目标窗口的组件绘制次序，使得所述目标组件优先于所述目标网页视图被绘制到所述目标窗口上；

根据所述目标窗口的组件绘制次序，将所述目标组件以及所述目标网页视图绘制到所述目标窗口上，以通过所述目标窗口展示所述目标网页；

其中，所述设置嵌入有目标组件的目标网页所对应的目标网页视图，包括：

通过所述目标网页视图将所述目标网页绘制到目标替代区域上，使得所述目标替代区域中仅显示所述目标网页元素，其中，所述目标替代区域为预设的离屏图形缓冲区；

设置所述目标替代区域代替所述目标网页视图，被绘制到所述目标窗口上。

2.根据权利要求1所述的方法，其中，

所述目标网页中包括与所述目标组件对应的替代网页元素，所述替代网页元素被设置为不具有显示内容，但具有对应的显示位置以及显示尺寸；

所述通过所述目标网页视图将所述目标网页绘制到所述目标替代区域上的步骤包括：

根据所述目标网页的网页结构，将所述目标网页包括的网页元素依次绘制到所述目标替代区域上；

其中，所述目标网页的网页结构是构成所述目标网页的网页元素之间的层次结构；

当绘制到所述替代网页元素时，设置所述目标替代区域中在所述替代网页元素对应的显示位置上、符合所述显示尺寸的替代元素区域为透明状态；

继续执行依次绘制网页元素的步骤，直至所述目标网页中剩余的其他网页元素，都被绘制在所述替代元素区域被设置为透明状态的所述目标替代区域中，以实现所述目标替代区域中仅显示所述目标网页元素。

3.根据权利要求2所述的方法，其中，

所述根据所述目标网页的网页结构，将所述目标网页包括的网页元素依次绘制到所述目标替代区域上的步骤包括：

根据所述目标网页的网页结构，获取对应的所述目标网页的图层结构；

其中，所述目标网页的图层结构是用于绘制所述目标网页的多个图层之间的层次结构，每个所述图层包括一个或多个所述目标网页的网页元素；

根据所述目标网页的图层结构，将与所述目标网页对应的多个所述图层依次绘制到所述目标替代区域上。

4.根据权利要求2所述的方法，其中，设置所述目标替代区域中与所述替代网页元素对应的显示位置上、符合所述显示尺寸的替代元素区域为透明状态的步骤包括：

清除所述目标替代区域的所述替代元素区域中已绘制的、所述目标网页的网页元素的内容。

5.根据权利要求1所述的方法，其中，

所述目标窗口具有对应的组件结构，所述目标窗口的组件结构是构成所述目标窗口的组件之间的层次结构；所述目标窗口的组件结构与所述目标窗口的组件绘制次序对应；

所述设置所述目标窗口的组件绘制次序的步骤包括：

在目标窗口对应的组件结构中，设置所述目标组件在所述目标网页视图的下方，对应得到所述组件绘制次序。

6.根据权利要求1所述的方法，其中，所述目标组件是原生用户界面组件。

7.一种网页展示装置，其中，包括：

组件设置单元，用于设置嵌入有目标组件的目标网页所对应的目标网页视图，使得所述目标网页视图被绘制到展示所述目标网页的目标窗口时，仅显示所述目标网页中被设置在所述目标组件上方显示的目标网页元素；

绘制设置单元，用于设置所述目标窗口的组件绘制次序，使得所述目标组件优先于所述目标网页视图被绘制到所述目标窗口上；

组件绘制单元，用于根据所述目标窗口的组件绘制次序，将所述目标组件以及所述目标网页视图绘制到所述目标窗口上，以通过所述目标窗口展示所述目标网页；

其中，所述组件设置单元，具体用于：

通过所述目标网页视图将所述目标网页绘制到目标替代区域上，使得所述目标替代区域中仅显示所述目标网页元素，其中，所述目标替代区域为预设的离屏图形缓冲区；设置所述目标替代区域代替所述目标网页视图，被绘制到所述目标窗口上。

8.一种网页展示设备，其中，包括：

显示装置；

存储器，用于存储可执行的指令；

处理器，用于根据所述可执行的指令的控制，运行所述网页展示设备执行如权利要求1-6任一项所述的网页展示方法。

9.一种可读存储介质，其中，所述可读存储介质存储有可被计算机读取并运行的计算机程序，所述计算机程序用于在被所述计算机运行时，执行如权利要求1-6任一项所述的网页展示方法。

Images