CN111506841B - 网页展示方法、装置、设备及可读存储介质 - 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（原生应用）提供，由此任意的应用可以通过本实施例中提供的网页处理方法，将期望使用的目标组件嵌入对应的网页中使用。

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

网页元素可以是文字、图片、音频、动画、视频、交互控件等其中一种。与目标组件对应的替代网页元素，是在网页中与目标组件对应的网页元素。

在一个例子中，替代网页元素可以被设置为不具有显示内容、但具有对应的显示位置以及显示尺寸。替代网页元素的显示位置、显示尺寸，分别与目标组件被嵌入目标网页时期望处于的显示位置、显示尺寸相同。通过本例中如此设置替代网页元素，可以通过替代网页元素在目标网页中为目标组件设置对应的位置，以便实现结合其他步骤，实现将目标组件转化为目标网页的一个网页元素参与目标网页的绘制渲染。

通过在目标网页中设置与目标组件对应的替代网页元素，可以结合本实施例中的其他步骤，将目标组件转化为目标网页的一个网页元素，参与目标网页的渲染被绘制到目标窗口上，使得最终通过目标窗口呈现的目标网页中，目标组件和目标网页包括网页元素根据正确的层级关系进行展示。

步骤S2200，根据目标网页的网页结构，基于目标网页视图将目标网页包括的网页元素依次绘制到用于展示目标网页的目标窗口上，在绘制到替代网页元素时，将通过目标组件绘制得到的目标替代区域，绘制到目标窗口上。

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

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

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

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

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

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

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

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

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

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

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

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

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

目标替代区域是目标组件绘制得到的区域。在一个例子中，本实施例提供的网页展示方法还包括获取目标替代区域的步骤，包括：步骤S2201-S2202。

步骤S2201，提供一个离屏图形缓冲区域。

离屏图形缓冲区是在屏幕展示区域之外的图像缓冲区。在本例中，可以分配、指定或者选择一个在屏幕展示区域之外的图像缓冲区域作为离屏图像缓冲区。

步骤S2202，将目标组件绘制到离屏图形缓冲区域上，得到对应的目标替代区域。

在本实施例中，可以通过例如浏览器或者实现浏览器的应用中相关的功能组件实现，将目标组件绘制到离屏图形缓冲区域，例如，可以通过浏览器的合成器将目标组件绘制到离屏图形缓冲区域得到对应的目标替代区域。

在步骤S2200中，通过在根据目标网页的网页结构，基于目标网页视图绘制目标网页到用于展示目标网页的目标窗口时，将目标组件绘制得到目标替代区域，作为替代网页元素的替代，绘制到目标窗口上，可以将目标组件转化为目标网页的一个网页元素，参与目标网页的渲染被绘制到目标窗口上，使得最终通过目标窗口呈现的目标网页中，目标组件和目标网页包括网页元素根据正确的层级关系进行展示，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染并无缝融合显示，提升网页展示效果。

同时，将目标组件转化为目标网页的一个网页元素，参与目标网页的渲染被绘制到目标窗口上，可以在目标组件的绘制中应用各种显示特效，例如CSS（Cascading StyleSheet，层叠样式表）特效，包括矩阵变换，半透明混合，遮罩等，以满足多样化以及个性化的显示需求，给予用户更好的展示体验。

在一个例子中，根据目标网页的网页结构，基于目标网页视图将目标网页包括的网页元素依次绘制到用于展示目标网页的目标窗口上的步骤包括：步骤S2210-S2220。

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

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

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

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

步骤S2220，根据目标网页的图层结构，将与目标网页对应的多个图层依次绘制到目标窗口上。

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

例如，可以通过图3所示的步骤1C，将目标surface设置为本例中的目标窗口，通过遍历作为图层结构的图层树的遍历次序，作为图层绘制次序，依次将与目标网页对应的多个图层依次绘制到目标窗口上。

在本例中，与目标网页对应的多个图层中，包括与目标组件对应的、包括替代网页元素的目标图层。目标图层可以被设置为不具有显示内容、但具有对应的显示位置以及显示尺寸的图层。对应的，在绘制到替代网页元素时，将通过目标组件绘制得到的目标替代区域，绘制到目标窗口上的步骤包括：

在根据目标网页的图层结构，将目标图层绘制到目标窗口时，获取目标替代区域，绘制到目标窗口上。

获取目标替代区域的步骤可以类似上述步骤S2201-S2202实施，在此不再赘述。

通过设置不具有显示内容的目标图层，在绘制目标图层时，可以将目标替代区域代替目标图层绘制到目标窗口上，实现将与目标图层对应的将目标组件转化为目标网页的一个网页元素，参与目标网页的渲染被绘制到目标窗口上。

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

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

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

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

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

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

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

在本例中，上述基于目标网页视图将目标网页包括的网页元素依次绘制到目标窗口上的步骤，是将目标网页视图作为所述目标窗口的一个组件绘制到所述目标窗口上时实施的。

对应的，本实施例中提供的网页展示方法还包括：

S2400，设置目标窗口的组件绘制次序，使得目标组件不被绘制到目标窗口上。

在本实施例中，目标组件可以被转化为目标网页的一个网页元素，参与目标网页的绘制渲染过程，被绘制到目标网页上，而通过设置目标窗口的组件绘制次序，使得目标组件不被绘制到目标窗口上，可以避免对目标组件的重复绘制，使得目标窗口展示目标网页，目标组件与目标网页的网页元素之间的展示呈现正确的层级关系。

在一个例子中，设置目标窗口的组件绘制次序步骤可以包括：步骤S2410或者步骤S2420。

步骤S2410，设置目标窗口的组件结构中，不包括目标组件与构成目标窗口的其他组件的层次结构，以得到与目标窗口的组件结构对应的组件绘制次序。

通过设置目标窗口的组件结构中不包括目标组件与构成目标窗口的其他组件的层次结构，可以实现不将目标组件设置在目标窗口的组件结构中，将目标组件排除，实现根据目标窗口的组件结构绘制目标窗口所包括的组件时，排除目标窗口包括的目标组件，不绘制目标组件。例如，在目标组件是嵌入式View、目标窗口的组件结构是View树的情况下，可以不将嵌入式View插入到View树中，使得根据View树绘制时，不绘制该嵌入式View。

步骤S2420，设置目标组件为无需绘制的组件，使得在根据与目标窗口的组件结构对应的组件绘制次序绘制目标窗口时，目标组件不被绘制到目标窗口上。

虽然目标窗口的组件结构中包括了目标组件与其他组件的层次结构，但可以通过设置标记、添加特殊处理流程等方式将目标组件设置为了无需绘制，实现根据目标窗口的组件结构绘制目标窗口所包括的组件时，不绘制目标组件。例如，在目标组件是嵌入式View、目标窗口的组件结构是View树的情况下，设置嵌入式View无需绘制，在绘制过程中遍历View树时跳过嵌入式View。

步骤S2300，通过目标窗口，展示目标网页。

对嵌入有目标组件的目标网页，在网页中设置与目标组件对应的替代网页元素，并将替代网页元素的绘制转化为将根据目标组件绘制得到的目标替代区域绘制到目标窗口上，从而将目标组件展示出来，使得最终通过目标窗口呈现的目标网页中，目标组件和网页元素按照设定的次序得到展示，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染，呈现出正确的层级关系，使得目标组件与目标网页的网页元素无缝融合显示，提升网页展示效果。同时，将目标组件转化为目标网页的一个网页元素，参与目标网页的渲染被绘制到目标窗口上，可以在目标组件的绘制中应用满足展示需求的各种显示特效，给予用户更好的展示体验。

<例子>

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

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

在本例中，通过Native APP在目标网页中对应目标组件设置替代网页元素，如图5中的虚线四边形所示。该替代网页元素具有与目标组件相同的显示位置和显示尺寸，但不具有显示内容。除了替代网页元素之外，目标网页中还包括网页元素1和网页元素2，分别以图5中的三角形和弧线图形表示。

Native APP在加载目标网页时，Native APP中集成的实施本实施例中提供的网页展示方法的WebView SDK，以图层为媒介将网页元素绘制到Native APP的用于展示目标网页的目标窗口中。每个图层中包括一个或多个网页元素。如图5所示，图层1中包括了网页元素1，图层2中包括了网页元素2，图层3中包括了替代网页元素。集成的实施本实施例中提供的网页展示方法的WebView SDK可以通过图3所示的步骤1A-1C将图5中的每个图层依次绘制到目标窗口上。在绘制到图层3的替代网页元素时，将黑色四边形代表的目标替代区域绘制到目标窗口上。目标替代区域是将目标组件绘制到离线图形缓冲区域得到的。

同时，Native APP中集成的实施本实施例中提供的网页展示方法的WebView SDK通过如图4的步骤2A，在构建目标窗口的View树时，将目标网页视图（Web View）作为目标窗口的一个组件（View），并且将目标组件排除在View树之外，避免目标组件被重复绘制，影响目标组件与目标网页包括的网页元素之间呈现正确的层级关系。

如图5所示，最终在目标窗口中，嵌入目标网页的目标组件和其他网页元素根据正确的层级关系进行展示，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染并无缝融合显示，提升网页展示效果。

同时，将目标组件转化为目标网页的一个网页元素，参与目标网页的渲染被绘制到目标窗口上，可以在目标组件的绘制中应用满足展示需求的各种显示特效，例如包括矩阵变换，半透明混合，遮罩等的CSS特效，给予用户更好的展示体验。

<网页展示装置>

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

设置单元3100，用于对嵌入有目标组件的目标网页，在目标网页中设置与目标组件对应的替代网页元素；

绘制单元3200，用于根据目标网页的网页结构，基于目标网页视图将目标网页包括的网页元素依次绘制到用于展示目标网页的目标窗口上，在绘制到替代网页元素时，将通过目标组件绘制得到的目标替代区域，绘制到目标窗口上。

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

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

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

根据目标网页的图层结构，将与目标网页对应的多个图层依次绘制到目标窗口上。

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

绘制单元3200还用于：

在根据目标网页的图层结构，将目标图层绘制到目标窗口时，获取目标替代区域，绘制到目标窗口上。

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

提供一个离屏图形缓冲区域。

将目标组件绘制到离屏图形缓冲区域上，得到对应的目标替代区域。

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

基于目标网页视图将目标网页包括的网页元素依次绘制到目标窗口上的步骤，是将目标网页视图作为目标窗口的一个组件绘制到目标窗口上时实施的。

绘制单元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还可以包括其他的装置，例如还可以包括输入装置、通信装置等。

<可读存储介质>

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

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

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

以上已经结合附图和例子说明本实施例中提供的网页展示方法、装置、设备及可读存储介质，对嵌入有目标组件的目标网页，在目标网页中设置与目标组件对应的替代网页元素，在根据目标网页的网页结构，基于目标网页视图绘制目标网页到用于展示目标网页的目标窗口时，将目标组件绘制得到目标替代区域，作为替代网页元素的替代，绘制到目标窗口上，将目标组件转化为目标网页的一个网页元素，参与目标网页的渲染被绘制到目标窗口上，使得最终通过目标窗口呈现的目标网页中，目标组件和目标网页包括网页元素根据正确的层级关系进行展示，被设置在目标组件上方显示的网页元素不会被嵌入的目标组件覆盖，以此实现嵌入的目标组件和目标网页的网页元素的混合绘制渲染并无缝融合显示，提升网页展示效果。同时，将目标组件转化为目标网页的一个网页元素，参与目标网页的渲染被绘制到目标窗口上，可以在目标组件的绘制中应用满足展示需求的各种显示特效，给予用户更好的展示体验。

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

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

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

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

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

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

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

Claims (9)

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

对嵌入有目标组件的目标网页，在所述目标网页中设置与所述目标组件对应的替代网页元素；

根据所述目标网页的网页结构，基于目标网页视图将所述目标网页包括的网页元素依次绘制到用于展示所述目标网页的目标窗口上，在绘制到所述替代网页元素时，将通过所述目标组件绘制得到的目标替代区域，绘制到所述目标窗口上；

通过所述目标窗口，展示所述目标网页；

其中，所述方法还包括：

将所述目标组件绘制到预设的离屏图形缓冲区域上，得到对应的所述目标替代区域。

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

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

所述根据所述目标网页的网页结构，基于目标网页视图将所述目标网页包括的网页元素依次绘制到用于展示所述目标网页的目标窗口上的步骤包括：

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

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

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

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

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

所述在绘制到所述替代网页元素时，将通过所述目标组件绘制得到的目标替代区域，绘制到所述目标窗口上的步骤包括：

在根据所述目标网页的图层结构，将所述目标图层绘制到所述目标窗口时，获取所述目标替代区域，绘制到所述目标窗口上。

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

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

所述基于目标网页视图将所述目标网页包括的网页元素依次绘制到所述目标窗口上的步骤，是将所述目标网页视图作为所述目标窗口的一个组件绘制到所述目标窗口上时实施的；

所述方法还包括：

设置所述目标窗口的组件绘制次序，使得所述目标组件不被绘制到所述目标窗口上。

5.根据权利要求4所述的方法，其中，所述设置所述目标窗口的组件绘制次序步骤包括：

设置所述目标窗口的组件结构中，不包括所述目标组件与构成所述目标窗口的其他组件的层次结构，以得到与目标窗口的组件结构对应的所述组件绘制次序；

或者，

设置所述目标组件为无需绘制的组件，使得在根据与所述目标窗口的组件结构对应的所述组件绘制次序绘制所述目标窗口时，所述目标组件不被绘制到所述目标窗口上。

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

所述替代网页元素被设置为不具有显示内容、但具有对应的显示位置以及显示尺寸；

和/或，

所述目标组件是原生用户界面组件。

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

设置单元，用于对嵌入有目标组件的目标网页，在所述目标网页中设置与所述目标组件对应的替代网页元素；

绘制单元，用于根据所述目标网页的网页结构，基于目标网页视图将所述目标网页包括的网页元素依次绘制到用于展示所述目标网页的目标窗口上，在绘制到所述替代网页元素时，将通过所述目标组件绘制得到的目标替代区域，绘制到所述目标窗口上；

展示单元，用于通过所述目标窗口，展示所述目标网页；

其中，所述绘制单元具体用于：将所述目标组件绘制到预设的离屏图形缓冲区域上，得到对应的所述目标替代区域。

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

显示装置；

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

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

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

Images