CN113722630A - 基于客户端渲染的资源数据在web页面中的呈现方法及设备 - Google Patents

Abstract

本发明公开了一种基于客户端渲染的资源数据在web页面中的呈现方法及设备，其中，该方法用于执行由第一web页面到第二web页面的跳转呈现，该方法包括：检测用户在客户端的第一web页面中触发的第二web页面跳转事件；响应于第二web页面跳转事件，获取第二web页面以及资源数据；呈现第二web页面，调用资源容器并在资源容器中呈现资源数据；其中，资源数据以上层图层的形式呈现在第二web页面的预设资源呈现区域的位置处。该方案通过资源容器将资源数据覆盖在第二web页面的预设资源呈现区域之上进行呈现，便捷地实现了由服务端和客户端共同完成对屏幕界面的整体显示，表现出一体的页面显示效果。

Description

基于客户端渲染的资源数据在web页面中的呈现方法及设备

技术领域

本发明涉及数据处理技术领域，具体涉及一种基于客户端渲染的资源数据在web页面中的呈现方法及设备。

背景技术

随着数字科技的快速发展，数字化的数据具有传播及时、更新迅速、易于获取等优势，使得越来越多的用户喜欢通过相应的客户端来浏览数据。例如，用户通过电子书客户端阅读电子书，通过新闻客户端浏览新闻资讯，通过购物客户端浏览商品数据并进行商品购买等。

现有技术中，客户端在进行内容显示的过程中可以呈现由原生客户端渲染的页面，也可以呈现由服务端渲染的web页面。对于web页面，服务端可以依据具体的业务需求而调整不同模块的HTML(Hyper Text Markup Language，超文本标记语言)即可便捷地实现页面样式、页面内容的快速迭代与更新。而与由服务端渲染的web页面相比，由原生客户端渲染的页面具有更好的呈现效果以及更为流畅的响应速度，但如果页面需要更新或者上线，则需要发布新版本的客户端，存在着不便于及时页面更新和上线的问题。因此客户端中很多页面通常采用的是由服务端渲染的web页面，以适应在不同业务场景下的快速调整。如何使客户端在采用web页面进行页面呈现的基础上，提升某些数据的呈现效果，成为了现有技术中亟需解决的问题。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的基于客户端渲染的资源数据在web页面中的呈现方法及设备。

根据本发明的一个方面，提供了一种基于客户端渲染的资源数据在web页面中的呈现方法，该方法用于执行由第一web页面到第二web页面的跳转呈现，包括：

检测用户在客户端的第一web页面中触发的第二web页面跳转事件；

响应于第二web页面跳转事件，获取第二web页面以及资源数据；

呈现第二web页面，调用资源容器并在资源容器中呈现资源数据；其中，资源数据以上层图层的形式呈现在第二web页面的预设资源呈现区域的位置处。

根据本发明的另一方面，提供了一种计算设备，包括：处理器、存储器、通信接口和通信总线，处理器、存储器和通信接口通过通信总线完成相互间的通信；

存储器用于存放至少一可执行指令，可执行指令用于执行由第一web页面到第二web页面的跳转呈现，可执行指令使处理器执行以下操作：

检测用户在客户端的第一web页面中触发的第二web页面跳转事件；

响应于第二web页面跳转事件，获取第二web页面以及资源数据；

呈现第二web页面，调用资源容器并在资源容器中呈现资源数据；其中，资源数据以上层图层的形式呈现在第二web页面的预设资源呈现区域的位置处。

根据本发明实施例的又一方面，提供了一种计算机存储介质，存储介质中存储有至少一可执行指令，可执行指令使处理器执行如上述基于客户端渲染的资源数据在web页面中的呈现方法对应的操作。

根据本发明提供的技术方案，通过资源容器呈现资源数据，实现了以原生客户端渲染的页面方式呈现资源数据；将资源数据以上层图层的形式呈现在第二web页面的预设资源呈现区域的位置处，使得资源数据能够覆盖在第二web页面的预设资源呈现区域之上进行呈现，便捷地实现了由服务端和客户端共同完成对屏幕界面的整体显示，表现出一体的页面显示效果，既保留了web页面更新便捷、易于快速调整的优势，又有效地提升了资源数据的呈现效果。

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

附图说明

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

图1示出了根据本发明实施例一的一种基于客户端渲染的资源数据在web页面中的呈现方法的流程示意图；

图2a示出了根据本发明实施例二的一种基于客户端渲染的资源数据在web页面中的呈现方法的流程示意图；

图2b示出了屏幕界面的示意图一；

图2c示出了屏幕界面的示意图二；

图3示出了根据本发明实施例四的一种计算设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

实施例一

图1示出了根据本发明实施例一的一种基于客户端渲染的资源数据在web页面中的呈现方法的流程示意图，如图1所示，该方法包括如下步骤：

步骤S101，检测用户在客户端的第一web页面中触发的第二web页面跳转事件。

该方法可由客户端进行执行，该方法具体用于执行由第一web页面到第二web页面的跳转呈现。由于由服务端渲染的web页面具有更新便捷、能够适应于在不同业务场景下的快速调整等优势，所以在客户端中很多页面采用的是由服务端渲染的web页面。其中，为了便于对客户端中的web页面进行有效区分，将客户端中当前所呈现的web页面称为第一web页面，将第一web页面对应的跳转页面中预留有预设资源呈现区域的web页面称为第二web页面。在用户利用客户端浏览第一web页面的过程中，用户可在第一web页面中通过点击第二web页面对应的按钮图标或者页面链接等方式触发第二web页面跳转事件。

步骤S102，响应于第二web页面跳转事件，获取第二web页面以及资源数据。

当检测到第二web页面跳转事件时，响应于第二web页面跳转事件，客户端获取第二web页面跳转事件对应的第二web页面，其中，第二web页面中预留了一段空白的预设资源呈现区域，并设置了预设资源呈现区域的位置坐标。在该预设资源呈现区域对应的位置处需要以原生客户端渲染的页面方式呈现资源数据，以提升资源数据的呈现效果。那么除了获取第二web页面之外，还需要获取待呈现的资源数据。资源数据具体可包括媒体信息、标题以及描述文本等，例如广告素材，其中，媒体信息具体可为图片或者视频等。

步骤S103，呈现第二web页面，调用资源容器并在资源容器中呈现资源数据。

在客户端中呈现第二web页面，并且还需将资源数据呈现在第二web页面的预设资源呈现区域的位置处。其中，对于资源数据的呈现，可以通过客户端所提供的资源容器进行实现，从而以原生客户端渲染的页面方式呈现资源数据。具体地，调用资源容器，将资源数据添加至资源容器中，在资源容器中呈现资源数据。其中，资源数据以上层图层的形式呈现在第二web页面的预设资源呈现区域的位置处。也就是说，第二web页面和资源数据是叠加在一起，资源数据的位置覆盖在第二web页面的预设资源呈现区域之上，从而不仅表现出一体的页面显示效果，而且还有效地提升了资源数据的呈现效果。

利用本实施例提供的基于客户端渲染的资源数据在web页面中的呈现方法，通过资源容器呈现资源数据，实现了以原生客户端渲染的页面方式呈现资源数据；将资源数据以上层图层的形式呈现在第二web页面的预设资源呈现区域的位置处，使得资源数据能够覆盖在第二web页面的预设资源呈现区域之上进行呈现，便捷地实现了由服务端和客户端共同完成对屏幕界面的整体显示，表现出一体的页面显示效果，既保留了web页面更新便捷、易于快速调整的优势，又有效地提升了资源数据的呈现效果。

实施例二

图2a示出了根据本发明实施例二的一种基于客户端渲染的资源数据在web页面中的呈现方法的流程示意图，如图2a所示，该方法包括如下步骤：

步骤S201，创建父容器，并在父容器中添加视图容器，在视图容器中呈现第一web页面。

该方法可由客户端进行执行，该方法具体用于执行由第一web页面到第二web页面的跳转呈现。在本实施例中，对于web页面的呈现，通过客户端所提供的视图容器进行实现；对于资源数据的呈现，通过客户端所提供的资源容器进行实现。为了便于将资源数据叠加在由第一web页面跳转后的第二web页面之上进行呈现，并使得资源数据与第二web页面都能够一起针对用户操作事件进行相应响应，在本实施例中，创建了父容器，在父容器中添加视图容器，即视图容器为父容器的子容器。当需要呈现第一web页面时，在视图容器中可通过URL去加载由服务端提供的与该URL对应的第一web页面，从而实现对第一web页面的呈现。其中，父容器具体可为ViewGroup容器，视图容器具体可为WebView容器。视图容器的尺寸大小可以等于父容器的尺寸大小。

步骤S202，检测用户在客户端的第一web页面中触发的第二web页面跳转事件。

在用户利用客户端浏览第一web页面的过程中，用户可在第一web页面中可通过点击按钮图标或者页面链接等方式而跳转至对应的跳转页面。将跳转页面中预留有预设资源呈现区域的web页面称为第二web页面。具体地，用户可通过点击第二web页面对应的按钮图标或者页面链接等方式触发第二web页面跳转事件，那么在步骤S202中检测用户在客户端的第一web页面中触发的第二web页面跳转事件。第二web页面跳转事件是指跳转至第二web页面的用户操作事件。第二web页面具体可为弹窗页面等，例如用户福利领取弹窗、抽奖弹窗等。

步骤S203，响应于第二web页面跳转事件，获取第二web页面以及资源数据。

当检测到第二web页面跳转事件时，响应于第二web页面跳转事件，可从服务端中获取第二web页面，并从服务端或者资源平台中获取资源数据，以便对第二web页面和资源数据进行呈现。具体地，若服务端中存储有资源数据，则可通过js通道从服务端中获取资源数据；若服务端中未存储有资源数据，则客户端可向资源平台发送资源获取请求，用于请求资源数据，然后接收资源平台返回的资源数据；另外，若客户端的缓存中已保存有待呈现的资源数据，则可直接从缓存中获取资源数据。资源数据具体可包括媒体信息、标题以及描述文本等，例如广告素材，其中，媒体信息具体可为图片或者视频等。

步骤S204，获取预设坐标协议，在父容器中添加资源容器，根据预设坐标协议设置资源容器在屏幕中的位置，并设置资源容器在父容器中所处的图层。

其中，在运营管理端设计第二web页面时，可在第二web页面中预留出一段空白的区域作为预设资源呈现区域，并设置预设资源呈现区域的位置坐标，具体地，运营管理端可根据预设资源呈现区域的位置坐标为服务端制定预设坐标协议。其中，预设坐标协议具体可包括：资源容器在父容器中的相对位置坐标。可选地，当用户启动客户端时，服务端可通过js通道向客户端下发预设坐标协议；或者，当客户端需要呈现第二web页面时，例如检测到用户触发的第二web页面跳转事件时，客户端可向服务端发送用于请求预设坐标协议的协议获取请求，服务端在接收到协议获取请求后，响应于协议获取请求，通过js通道向客户端返回预设坐标协议，以便客户端根据预设坐标协议设置资源容器在屏幕中的位置。

在进行页面跳转后，用于呈现第一web页面的视图容器此时还用于呈现第二web页面。为了对资源数据进行呈现，在步骤S204中还需要在父容器中添加资源容器，资源容器为父容器的另一子容器，通过资源容器呈现资源数据。其中，在将资源容器添加至父容器中之后，根据预设坐标协议设置资源容器在屏幕中的位置，并设置资源容器在父容器中所处的图层，以使资源容器的位置与第二web页面的预设资源呈现区域的位置相对应且资源容器位于视图容器的上层图层中。具体地，依据预设坐标协议中的相对位置坐标对资源容器在父容器中的位置进行设置，可以使资源容器的位置与第二web页面的预设资源呈现区域的位置相对应，也就是将资源容器的位置设置在第二web页面的预设资源呈现区域的位置处；并且，还将资源容器在父容器中所处的图层设置为视图容器的上层图层，也就是在Z轴方向上，将资源容器设置在视图容器的上层中。通过上述设置，可以便捷地将资源容器的位置覆盖在第二web页面的预设资源呈现区域之上。

考虑到在实际应用中，客户端对应的终端设备(例如手机、阅读器等)的屏幕中除了呈现父容器中的各个子容器对应的内容之外，还可能呈现一些其他内容，例如系统状态栏、底部控制栏以及页面标题栏等，因此客户端需要将预设坐标协议中资源容器在父容器中的相对位置坐标转化为在屏幕中的屏幕坐标，然后依据屏幕坐标设置资源容器在屏幕中的位置。

下面分别通过第一web页面为一级页面或二级页面，第二web页面为弹窗页面为例，对资源容器在屏幕中的屏幕坐标的计算方式进行介绍。

若第一web页面为一级页面，第二web页面为弹窗页面，则根据资源容器在父容器中的相对位置坐标以及系统状态栏的位置坐标，计算资源容器在屏幕中的屏幕坐标。图2b示出了屏幕界面的示意图一，如图2b所示，在屏幕界面的底层呈现的是为一级页面的第一web页面21，在第一web页面21的图层之上呈现的是为弹窗页面的第二web页面22，在第二web页面22的图层之上呈现的是资源数据23，在第一web页面21的上方位置处呈现的是系统状态栏24，在第一web页面21的下方位置处呈现的是底部控制栏25。其中，第一web页面21和第二web页面22呈现在视图容器中，资源数据23呈现在资源容器中，视图容器的尺寸大小与父容器的尺寸大小相同，资源容器的尺寸大小与第二web页面22的预设资源呈现区域的尺寸大小相同。

在屏幕坐标系中，屏幕的左上角为屏幕坐标系的原点，X轴和Y轴如图2b所示，由于预设坐标协议中记录的是资源容器在父容器中的相对位置坐标，而在父容器的上方还设置有系统控制栏24，那么资源容器在屏幕中的屏幕坐标中的X轴坐标可为资源容器在父容器中的相对位置坐标中的X轴坐标，资源容器在屏幕中的屏幕坐标中的Y轴坐标可为资源容器在父容器中的相对位置坐标中的Y轴坐标以及系统控制栏24在屏幕坐标系中的Y轴坐标之和。

若第一web页面为二级页面，第二web页面为弹窗页面，则根据资源容器在父容器中的相对位置坐标、系统状态栏的位置坐标以及页面标题栏的位置坐标，计算资源容器在屏幕中的屏幕坐标。图2c示出了屏幕界面的示意图二，如图2c所示，在屏幕界面的底层呈现的是为二级页面的第一web页面21’，在第一web页面21’的图层之上呈现的是为弹窗页面的第二web页面22’，在第二web页面22’的图层之上呈现的是资源数据23’，在第一web页面21’的上方位置处还呈现有系统状态栏24’以及页面标题栏25’。其中，第一web页面21’和第二web页面22’呈现在视图容器中，资源数据23’呈现在资源容器中，视图容器的尺寸大小与父容器的尺寸大小相同，资源容器的尺寸大小与第二web页面22’的预设资源呈现区域的尺寸大小相同。由于预设坐标协议中记录的是资源容器在父容器中的相对位置坐标，而在父容器的上方还设置有系统状态栏24’和页面标题栏25’，那么资源容器在屏幕中的屏幕坐标中的X轴坐标可为资源容器在父容器中的相对位置坐标中的X轴坐标，资源容器在屏幕中的屏幕坐标中的Y轴坐标可为资源容器在父容器中的相对位置坐标中的Y轴坐标、系统状态栏24’在屏幕坐标系中的Y轴坐标以及页面标题栏25’在屏幕坐标系中的Y轴坐标之和。

步骤S205，在视图容器中呈现第二web页面，在资源容器中呈现资源数据。

在完成了对资源容器的设置之后，即可在视图容器中呈现第二web页面，在资源容器中呈现资源数据。第一web页面和第二web页面是由服务端渲染的页面，资源数据对应的呈现页面是由原生客户端渲染的页面，通过该方法便捷地实现了由服务端和客户端共同完成对屏幕界面的整体显示，表现出一体的页面显示效果，既保留了web页面更新便捷、易于快速调整的优势，又有效地提升了资源数据的呈现效果。

在用户对第二web页面进行操作时，第二web页面与资源数据需要一起进行响应。在一种可选的实施方式中，第二web页面可以将用户操作事件(例如下文中的页面关闭事件、第一手势滑动事件、第二手势滑动事件等)同步传递给客户端，使得客户端可以基于用户操作事件也同样进行响应操作。例如，当用户关闭第二web页面时，相应的资源数据也随之消失；当用户上下滑动第二web页面时，相应的资源数据也随之上下滑动。具体地，客户端中的父容器可直接将用户操作事件透传至视图容器中的第二web页面，基于第二web页面接收用户操作事件，并将用户操作事件发送至服务端，通过服务端将用户操作事件同步至客户端，以使客户端能够针对用户操作事件进行相应的响应操作。在另一种可选的实施方式中，客户端中的父容器可直接接收用户操作事件，将用户操作事件传递给视图容器以及资源容器，以使视图容器中的第二web页面和资源容器中的资源数据可以基于用户操作事件进行响应操作。

步骤S206，检测用户在第二web页面中触发的页面关闭事件。

第二web页面中设置有关闭控制项。当用户想要关闭第二web页面时，可通过点击关闭控制项等方式触发页面关闭事件。

步骤S207，响应于页面关闭事件，关闭第二web页面，并隐藏或销毁资源容器。

当检测到页面关闭事件时，响应于页面关闭事件，关闭第二web页面，并且同时对资源容器进行隐藏或销毁，以使资源容器中所呈现的资源数据也随着第二web页面的关闭而消失，从而实现一体的页面关闭效果。

另外，当屏幕呈现第二web页面时，用户还可通过手势滑动使第二web页面上下移动展示或者从第二web页面返回到第一web页面。在本实施例中，将用于控制第二web页面上下移动的手势滑动事件称为第一手势滑动事件，将用于控制第二web页面返回到第一web页面的手势滑动事件称为第二手势滑动事件。其中，第一手势滑动事件可以为向上手势滑动事件或者向下手势滑动事件，第二手势滑动事件可以为向左手势滑动事件或者向右手势滑动事件。

可选地，该方法还可包括：检测用户在第二web页面中触发的第一手势滑动事件；响应于第一手势滑动事件，沿第一手势滑动事件的滑动方向移动呈现第二web页面和资源数据。

当用户想要从第二web页面中获取更多的内容时，可在第二web页面的任意位置处触发第一手势滑动事件。响应于第一手势滑动事件，确定页面移动距离，根据页面移动距离沿第一手势滑动事件的滑动方向移动呈现第二web页面和资源数据，从而使得第二web页面和资源数据能够随着用户手势滑动同步上下移动，实现了一体的页面移动显示效果。

可选地，该方法还可包括：检测用户在第二web页面中触发的第二手势滑动事件；响应于第二手势滑动事件，沿第二手势滑动事件的滑动方向移动呈现第二web页面和资源数据，直至第二web页面和资源数据移出屏幕，而后呈现第一web页面。

当用户想要从第二web页面返回至第一web页面时，可在第二web页面的任意位置处触发第二手势滑动事件。响应于第二手势滑动事件，沿第二手势滑动事件的滑动方向移动呈现第二web页面和资源数据，直至第二web页面和资源数据移出屏幕。在第二web页面和资源数据完全移出屏幕后，呈现第一web页面，从而不仅实现了一体的页面移动显示效果，而且还能够便捷地返回至第一web页面，便于用户操作。

利用本实施例提供的基于客户端渲染的资源数据在web页面中的呈现方法，将用于呈现web页面的视图容器和用于呈现资源数据的资源容器都作为父容器的子容器，通过对资源容器在父容器中的位置和所处图层的设置，能够便捷地使资源容器的位置与第二web页面的预设资源呈现区域的位置相对应且资源容器位于视图容器的上层图层中，从而使得资源数据能够覆盖在第二web页面的预设资源呈现区域之上进行呈现，既保留了web页面更新便捷、易于快速调整的优势，又有效地提升了资源数据的呈现效果；并且，资源数据与第二web页面都能够一起针对用户操作事件进行例如关闭、上下移动、返回第一web页面等响应，实现了一体的页面移动显示效果。

实施例三

本发明实施例三提供了一种非易失性存储介质，存储介质存储有至少一可执行指令，该可执行指令可执行上述任意方法实施例中的基于客户端渲染的资源数据在web页面中的呈现方法。

可执行指令具体可以用于使得处理器执行以下操作：检测用户在客户端的第一web页面中触发的第二web页面跳转事件；响应于第二web页面跳转事件，获取第二web页面以及资源数据；呈现第二web页面，调用资源容器并在资源容器中呈现资源数据；其中，资源数据以上层图层的形式呈现在第二web页面的预设资源呈现区域的位置处。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：响应于第二web页面跳转事件，从服务端中获取第二web页面，并从服务端或者资源平台中获取资源数据。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：创建父容器，并在父容器中添加视图容器；在视图容器中呈现第一web页面。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：获取预设坐标协议，在父容器中添加资源容器；根据预设坐标协议设置资源容器在屏幕中的位置，并设置资源容器在父容器中所处的图层，以使资源容器的位置与第二web页面的预设资源呈现区域的位置相对应且资源容器位于视图容器的上层图层中；在视图容器中呈现第二web页面，在资源容器中呈现资源数据。

在一种可选的实施方式中，预设坐标协议包括：资源容器在父容器中的相对位置坐标。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：将预设坐标协议中资源容器在父容器中的相对位置坐标转化为在屏幕中的屏幕坐标；依据屏幕坐标设置资源容器在屏幕中的位置。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：若第一web页面为一级页面，第二web页面为弹窗页面，则根据资源容器在父容器中的相对位置坐标以及系统状态栏的位置坐标，计算资源容器在屏幕中的屏幕坐标；若第一web页面为二级页面，第二web页面为弹窗页面，则根据资源容器在父容器中的相对位置坐标、系统状态栏的位置坐标以及页面标题栏的位置坐标，计算资源容器在屏幕中的屏幕坐标。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：检测用户在第二web页面中触发的页面关闭事件；响应于页面关闭事件，关闭第二web页面，并隐藏或销毁资源容器。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：检测用户在第二web页面中触发的第一手势滑动事件；响应于第一手势滑动事件，沿第一手势滑动事件的滑动方向移动呈现第二web页面和资源数据。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：检测用户在第二web页面中触发的第二手势滑动事件；响应于第二手势滑动事件，沿第二手势滑动事件的滑动方向移动呈现第二web页面和资源数据，直至第二web页面和资源数据移出屏幕，而后呈现第一web页面。

实施例四

图3示出了根据本发明实施例四的一种计算设备的结构示意图，本发明具体实施例并不对计算设备的具体实现做限定。

如图3所示，该计算设备可以包括：处理器(processor)302、通信接口(Communications Interface)304、存储器(memory)306、以及通信总线308。

其中：

处理器302、通信接口304、以及存储器306通过通信总线308完成相互间的通信。

通信接口304，用于与其它设备比如客户端或其它服务器等的网元通信。

处理器302，用于执行程序310，具体可以执行上述基于客户端渲染的资源数据在web页面中的呈现方法实施例中的相关步骤。

具体地，程序310可以包括程序代码，该程序代码包括计算机操作指令。

处理器302可能是中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。计算设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。

存储器306，用于存放程序310。存储器306可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

程序310具体可以用于使得处理器302执行以下操作：检测用户在客户端的第一web页面中触发的第二web页面跳转事件；响应于第二web页面跳转事件，获取第二web页面以及资源数据；呈现第二web页面，调用资源容器并在资源容器中呈现资源数据；其中，资源数据以上层图层的形式呈现在第二web页面的预设资源呈现区域的位置处。

在一种可选的实施方式中，程序310进一步使得处理器302执行以下操作：响应于第二web页面跳转事件，从服务端中获取第二web页面，并从服务端或者资源平台中获取资源数据。

在一种可选的实施方式中，程序310进一步使得处理器302执行以下操作：创建父容器，并在父容器中添加视图容器；在视图容器中呈现第一web页面。

在一种可选的实施方式中，程序310进一步使得处理器302执行以下操作：获取预设坐标协议，在父容器中添加资源容器；根据预设坐标协议设置资源容器在屏幕中的位置，并设置资源容器在父容器中所处的图层，以使资源容器的位置与第二web页面的预设资源呈现区域的位置相对应且资源容器位于视图容器的上层图层中；在视图容器中呈现第二web页面，在资源容器中呈现资源数据。

在一种可选的实施方式中，预设坐标协议包括：资源容器在父容器中的相对位置坐标。

在一种可选的实施方式中，程序310进一步使得处理器302执行以下操作：将预设坐标协议中资源容器在父容器中的相对位置坐标转化为在屏幕中的屏幕坐标；依据屏幕坐标设置资源容器在屏幕中的位置。

在一种可选的实施方式中，程序310进一步使得处理器302执行以下操作：若第一web页面为一级页面，第二web页面为弹窗页面，则根据资源容器在父容器中的相对位置坐标以及系统状态栏的位置坐标，计算资源容器在屏幕中的屏幕坐标；若第一web页面为二级页面，第二web页面为弹窗页面，则根据资源容器在父容器中的相对位置坐标、系统状态栏的位置坐标以及页面标题栏的位置坐标，计算资源容器在屏幕中的屏幕坐标。

在一种可选的实施方式中，程序310进一步使得处理器302执行以下操作：检测用户在第二web页面中触发的页面关闭事件；响应于页面关闭事件，关闭第二web页面，并隐藏或销毁资源容器。

在一种可选的实施方式中，程序310进一步使得处理器302执行以下操作：检测用户在第二web页面中触发的第一手势滑动事件；响应于第一手势滑动事件，沿第一手势滑动事件的滑动方向移动呈现第二web页面和资源数据。

在一种可选的实施方式中，程序310进一步使得处理器302执行以下操作：检测用户在第二web页面中触发的第二手势滑动事件；响应于第二手势滑动事件，沿第二手势滑动事件的滑动方向移动呈现第二web页面和资源数据，直至第二web页面和资源数据移出屏幕，而后呈现第一web页面。

程序310中各步骤的具体实现可以参见上述基于客户端渲染的资源数据在web页面中的呈现实施例中的相应步骤对应的描述，在此不赘述。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的设备的具体工作过程，可以参考前述方法实施例中的对应过程描述，在此不再赘述。

通过本实施例提供的方案，通过资源容器将资源数据覆盖在第二web页面的预设资源呈现区域之上进行呈现，便捷地实现了由服务端和客户端共同完成对屏幕界面的整体显示，表现出一体的页面显示效果，既保留了web页面更新便捷、易于快速调整的优势，又有效地提升了资源数据的呈现效果。

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

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

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

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

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

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

本发明公开了：A1.一种基于客户端渲染的资源数据在web页面中的呈现方法，所述方法用于执行由第一web页面到第二web页面的跳转呈现，包括：

检测用户在客户端的第一web页面中触发的第二web页面跳转事件；

响应于所述第二web页面跳转事件，获取第二web页面以及资源数据；

呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据；其中，所述资源数据以上层图层的形式呈现在所述第二web页面的预设资源呈现区域的位置处。

A2.根据A1所述的方法，所述响应于所述第二web页面跳转事件，获取第二web页面以及资源数据，包括：

响应于所述第二web页面跳转事件，从服务端中获取第二web页面，并从所述服务端或者资源平台中获取资源数据。

A3.根据A1所述的方法，在所述检测用户在客户端的第一web页面中触发的第二web页面跳转事件之前，所述方法还包括：

创建父容器，并在所述父容器中添加视图容器；

在所述视图容器中呈现所述第一web页面。

A4.根据A3所述的方法，所述呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据，包括：

获取预设坐标协议，在所述父容器中添加资源容器；

根据所述预设坐标协议设置所述资源容器在屏幕中的位置，并设置所述资源容器在所述父容器中所处的图层，以使所述资源容器的位置与所述第二web页面的预设资源呈现区域的位置相对应且所述资源容器位于所述视图容器的上层图层中；

在所述视图容器中呈现所述第二web页面，在所述资源容器中呈现所述资源数据。

A5.根据A4所述的方法，所述预设坐标协议包括：所述资源容器在所述父容器中的相对位置坐标。

A6.根据A5所述的方法，所述根据所述预设坐标协议设置所述资源容器在屏幕中的位置，包括：

将所述预设坐标协议中所述资源容器在所述父容器中的相对位置坐标转化为在屏幕中的屏幕坐标；

依据所述屏幕坐标设置所述资源容器在屏幕中的位置。

A7.根据A6所述的方法，所述将所述预设坐标协议中所述资源容器在所述父容器中的相对位置坐标转化为在屏幕中的屏幕坐标，包括：

若所述第一web页面为一级页面，所述第二web页面为弹窗页面，则根据所述资源容器在所述父容器中的相对位置坐标以及系统状态栏的位置坐标，计算所述资源容器在屏幕中的屏幕坐标；

若所述第一web页面为二级页面，所述第二web页面为弹窗页面，则根据所述资源容器在所述父容器中的相对位置坐标、系统状态栏的位置坐标以及页面标题栏的位置坐标，计算所述资源容器在屏幕中的屏幕坐标。

A8.根据A1-A7任一项所述的方法，在所述呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据之后，所述方法还包括：

检测用户在所述第二web页面中触发的页面关闭事件；

响应于所述页面关闭事件，关闭所述第二web页面，并隐藏或销毁所述资源容器。

A9.根据A1-A8任一项所述的方法，在所述呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据之后，所述方法还包括：

检测用户在所述第二web页面中触发的第一手势滑动事件；

响应于所述第一手势滑动事件，沿所述第一手势滑动事件的滑动方向移动呈现所述第二web页面和所述资源数据。

A10.根据A1-A9任一项所述的方法，在所述呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据之后，所述方法还包括：

检测用户在所述第二web页面中触发的第二手势滑动事件；

响应于所述第二手势滑动事件，沿所述第二手势滑动事件的滑动方向移动呈现所述第二web页面和所述资源数据，直至所述第二web页面和所述资源数据移出屏幕，而后呈现所述第一web页面。

B11.一种计算设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令用于执行由第一web页面到第二web页面的跳转呈现，所述可执行指令使所述处理器执行以下操作：

检测用户在客户端的第一web页面中触发的第二web页面跳转事件；

响应于所述第二web页面跳转事件，获取第二web页面以及资源数据；

呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据；其中，所述资源数据以上层图层的形式呈现在所述第二web页面的预设资源呈现区域的位置处。

B12.根据B11所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

响应于所述第二web页面跳转事件，从服务端中获取第二web页面，并从所述服务端或者资源平台中获取资源数据。

B13.根据B11所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

创建父容器，并在所述父容器中添加视图容器；

在所述视图容器中呈现所述第一web页面。

B14.根据B13所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

获取预设坐标协议，在所述父容器中添加资源容器；

根据所述预设坐标协议设置所述资源容器在屏幕中的位置，并设置所述资源容器在所述父容器中所处的图层，以使所述资源容器的位置与所述第二web页面的预设资源呈现区域的位置相对应且所述资源容器位于所述视图容器的上层图层中；

在所述视图容器中呈现所述第二web页面，在所述资源容器中呈现所述资源数据。

B15.根据B14所述的计算设备，所述预设坐标协议包括：所述资源容器在所述父容器中的相对位置坐标。

B16.根据B15所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

将所述预设坐标协议中所述资源容器在所述父容器中的相对位置坐标转化为在屏幕中的屏幕坐标；

依据所述屏幕坐标设置所述资源容器在屏幕中的位置。

B17.根据B16所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

若所述第一web页面为一级页面，所述第二web页面为弹窗页面，则根据所述资源容器在所述父容器中的相对位置坐标以及系统状态栏的位置坐标，计算所述资源容器在屏幕中的屏幕坐标；

若所述第一web页面为二级页面，所述第二web页面为弹窗页面，则根据所述资源容器在所述父容器中的相对位置坐标、系统状态栏的位置坐标以及页面标题栏的位置坐标，计算所述资源容器在屏幕中的屏幕坐标。

B18.根据B11-B17任一项所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

检测用户在所述第二web页面中触发的页面关闭事件；

响应于所述页面关闭事件，关闭所述第二web页面，并隐藏或销毁所述资源容器。

B19.根据B11-B18任一项所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

检测用户在所述第二web页面中触发的第一手势滑动事件；

响应于所述第一手势滑动事件，沿所述第一手势滑动事件的滑动方向移动呈现所述第二web页面和所述资源数据。

B20.根据B11-B19任一项所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

检测用户在所述第二web页面中触发的第二手势滑动事件；

响应于所述第二手势滑动事件，沿所述第二手势滑动事件的滑动方向移动呈现所述第二web页面和所述资源数据，直至所述第二web页面和所述资源数据移出屏幕，而后呈现所述第一web页面。

C21.一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如A1-A10中任一项所述的基于客户端渲染的资源数据在web页面中的呈现方法对应的操作。

Claims (10)

1.一种基于客户端渲染的资源数据在web页面中的呈现方法，所述方法用于执行由第一web页面到第二web页面的跳转呈现，包括：

检测用户在客户端的第一web页面中触发的第二web页面跳转事件；

响应于所述第二web页面跳转事件，获取第二web页面以及资源数据；

呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据；其中，所述资源数据以上层图层的形式呈现在所述第二web页面的预设资源呈现区域的位置处。

2.根据权利要求1所述的方法，所述响应于所述第二web页面跳转事件，获取第二web页面以及资源数据，包括：

响应于所述第二web页面跳转事件，从服务端中获取第二web页面，并从所述服务端或者资源平台中获取资源数据。

3.根据权利要求1所述的方法，在所述检测用户在客户端的第一web页面中触发的第二web页面跳转事件之前，所述方法还包括：

创建父容器，并在所述父容器中添加视图容器；

在所述视图容器中呈现所述第一web页面。

4.根据权利要求3所述的方法，所述呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据，包括：

获取预设坐标协议，在所述父容器中添加资源容器；

根据所述预设坐标协议设置所述资源容器在屏幕中的位置，并设置所述资源容器在所述父容器中所处的图层，以使所述资源容器的位置与所述第二web页面的预设资源呈现区域的位置相对应且所述资源容器位于所述视图容器的上层图层中；

在所述视图容器中呈现所述第二web页面，在所述资源容器中呈现所述资源数据。

5.根据权利要求4所述的方法，所述预设坐标协议包括：所述资源容器在所述父容器中的相对位置坐标。

6.根据权利要求5所述的方法，所述根据所述预设坐标协议设置所述资源容器在屏幕中的位置，包括：

将所述预设坐标协议中所述资源容器在所述父容器中的相对位置坐标转化为在屏幕中的屏幕坐标；

依据所述屏幕坐标设置所述资源容器在屏幕中的位置。

7.根据权利要求6所述的方法，所述将所述预设坐标协议中所述资源容器在所述父容器中的相对位置坐标转化为在屏幕中的屏幕坐标，包括：

若所述第一web页面为一级页面，所述第二web页面为弹窗页面，则根据所述资源容器在所述父容器中的相对位置坐标以及系统状态栏的位置坐标，计算所述资源容器在屏幕中的屏幕坐标；

若所述第一web页面为二级页面，所述第二web页面为弹窗页面，则根据所述资源容器在所述父容器中的相对位置坐标、系统状态栏的位置坐标以及页面标题栏的位置坐标，计算所述资源容器在屏幕中的屏幕坐标。

8.根据权利要求1-7任一项所述的方法，在所述呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据之后，所述方法还包括：

检测用户在所述第二web页面中触发的页面关闭事件；

响应于所述页面关闭事件，关闭所述第二web页面，并隐藏或销毁所述资源容器。

9.一种计算设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令用于执行由第一web页面到第二web页面的跳转呈现，所述可执行指令使所述处理器执行以下操作：

检测用户在客户端的第一web页面中触发的第二web页面跳转事件；

响应于所述第二web页面跳转事件，获取第二web页面以及资源数据；

呈现所述第二web页面，调用资源容器并在所述资源容器中呈现所述资源数据；其中，所述资源数据以上层图层的形式呈现在所述第二web页面的预设资源呈现区域的位置处。

10.一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如权利要求1-8中任一项所述的基于客户端渲染的资源数据在web页面中的呈现方法对应的操作。

Images