CN111581561A - 页面的显示控制方法、装置、客户端及存储介质 - Google Patents

Abstract

本公开关于一种网页的显示方法、装置、客户端及存储介质。所述方法应用于第一客户端，包括：当接收到第一页面显示指令时，显示存储于第一客户端中的参考页面；向网页控件发送页面渲染指令，以触发网页控件进行页面视图渲染，得到第一页面框架视图；当接收到网页控件发送的页面获取请求时，向网页控件返回第一页面内容，以触发网页控件根据第一页面框架视图和第一页面内容整合得到第一页面视图并返回页面渲染结束信息；当接收到网页控件返回的页面渲染结束信息时，隐藏参考页面并显示第一页面视图。根据本公开的技术方案，通过存储在第一客户端上的参考页面的显示，不需要等待参考页面的加载，能避免白屏，保证页面显示的连贯性。

Description

页面的显示控制方法、装置、客户端及存储介质

技术领域

本公开涉及页面处理技术领域，尤其涉及页面的显示控制方法、装置、客户端及存储介质。

背景技术

在需要进行页面(如HTML 5页面)显示时，往往需要经过文件加载、渲染等过程，之后显示对应的页面内容，而文件加载、渲染等过程在客户端界面上是白屏的状态，这就导致网页显示没有连贯性。

相关技术中，通过H5网页中的临时页面来遮挡白屏，即在载入H5网页时，先展示一个临时页面，等H5网页内容都载入完毕后，隐藏临时页面。

然而，目前的页面显示方法中，因为要经历H5临时页面加载的过程，仍然会出现白屏现象，依然存在网页显示不连贯的问题。

发明内容

本公开提供一种页面的显示控制方法、装置、客户端及存储介质，以至少解决相关技术中网页显示不连贯的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面的显示控制方法，应用于第一客户端，所述页面的显示控制方法包括：当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面；向网页控件发送页面渲染指令，以触发所述网页控件进行页面视图渲染，得到第一页面框架视图；所述第一页面框架视图为用于表征所述第一页面的网页框架；当接收到所述网页控件发送的页面获取请求时，向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图并返回页面渲染结束信息；所述第一页面内容用于表征所述第一页面中与所述第一客户端进行交互的网页交互内容；当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图。

在一示例性实施例中，所述向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图的步骤，包括：向所述网页控件返回第一页面内容，以触发所述网页控件将所述第一页面内容填充到所述第一页面框架视图的网页框架中，得到所述第一页面视图。

在一示例性实施例中，在所述当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图的步骤之后，还包括：若所述第一页面对应有第二页面，触发所述网页控件获取所述第二页面对应的第二渲染信息描述文件，对所述第二渲染信息描述文件进行解析得到第二页面渲染信息，根据所述第二页面渲染信息进行页面视图渲染，得到第二页面框架视图；其中，所述第二页面为所述第一页面的子页面；所述第二页面框架视图用于表征所述第二页面的网页框架；当接收到第二页面显示指令时，从服务端中获取第二页面内容，触发所述网页控件根据所述第二页面框架视图和所述第二页面内容整合得到第二页面视图；所述第二页面内容用于表征所述第二页面中与所述第一客户端进行交互的网页交互内容；所述第二页面显示指令在所述第二页面被触发时生成；显示所述第二页面视图。

在一示例性实施例中，所述当接收到第二页面显示指令时，从服务端中获取第二页面内容的步骤，包括：当接收到第二页面显示指令且确定所述网页控件未存储所述第二页面内容时，从所述服务端中获取所述第二页面内容。

在一示例性实施例中，所述从所述服务端中获取所述第二页面内容的步骤，包括：调用所述服务端的通用网关接口，以通过所述通用网关接口获取由第二客户端上传至所述服务端的所述第二页面内容。

在一示例性实施例中，所述当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面的步骤，包括：当接收到第一页面显示指令时，从内部存储空间中获取预先存储的参考页面，并显示所述参考页面；所述参考页面为动态画面、静态画面中的至少一项。

在一示例性实施例中，所述向网页控件发送页面渲染指令的步骤，包括：向网页控件发送页面渲染指令，以触发所述网页控件获取所述第一页面对应的第一渲染信息描述文件，对所述第一渲染信息描述文件进行解析得到第一页面渲染信息，根据所述第一页面渲染信息进行页面视图渲染，得到所述第一页面框架视图。

根据本公开实施例的第二方面，提供一种页面的显示控制装置，应用于第一客户端，所述页面的显示控制装置包括：参考页面显示单元，被配置为执行当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面；渲染指令发送单元，被配置为执行向网页控件发送页面渲染指令，以触发所述网页控件进行页面视图渲染，得到第一页面框架视图；所述第一页面框架视图为用于表征所述第一页面的网页框架；页面内容发送单元，被配置为执行当接收到所述网页控件发送的页面获取请求时，向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图并返回页面渲染结束信息；所述第一页面内容用于表征所述第一页面中与所述第一客户端进行交互的网页交互内容；页面隐藏和显示单元，被配置为执行当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图。

在一示例性实施例中，所述页面内容发送单元，还被配置为执行向所述网页控件返回第一页面内容，以触发所述网页控件将所述第一页面内容填充到所述第一页面框架视图的网页框架中，得到所述第一页面视图。

在一示例性实施例中，所述页面的显示控制装置，还包括：页面渲染单元，被配置为执行若所述第一页面对应有第二页面，触发所述网页控件获取所述第二页面对应的第二渲染信息描述文件，对所述第二渲染信息描述文件进行解析得到第二页面渲染信息，根据所述第二页面渲染信息进行页面视图渲染，得到第二页面框架视图；其中，所述第二页面为所述第一页面的子页面；所述第二页面框架视图用于表征所述第二页面的网页框架；页面整合单元，被配置为执行当接收到第二页面显示指令时，从服务端中获取第二页面内容，触发所述网页控件根据所述第二页面框架视图和所述第二页面内容整合得到第二页面视图；所述第二页面内容用于表征所述第二页面中与所述第一客户端进行交互的网页交互内容；所述第二页面显示指令在所述第二页面被触发时生成；页面显示单元，被配置为执行显示所述第二页面视图。

在一示例性实施例中，所述页面整合单元，还被配置为执行当接收到第二页面显示指令且确定所述网页控件未存储所述第二页面内容时，从所述服务端中获取所述第二页面内容。

在一示例性实施例中，所述页面整合单元，还被配置为执行调用所述服务端的通用网关接口，以通过所述通用网关接口获取由第二客户端上传至所述服务端的所述第二页面内容。

在一示例性实施例中，所述参考页面显示单元，还被配置为执行当接收到第一页面显示指令时，从内部存储空间中获取预先存储的参考页面，并显示所述参考页面；所述参考页面为动态画面、静态画面中的至少一项。

在一示例性实施例中，所述渲染指令发送单元，还被配置为执行向网页控件发送页面渲染指令，以触发所述网页控件获取所述第一页面对应的第一渲染信息描述文件，对所述第一渲染信息描述文件进行解析得到第一页面渲染信息，根据所述第一页面渲染信息进行页面视图渲染，得到所述第一页面框架视图。

根据本公开实施例的第三方面，提供一种客户端，包括处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如上所述的页面的显示控制方法。

根据本公开实施例的第四方面，提供一种存储介质，当所述存储介质中的指令由客户端的处理器执行时，使得客户端能够执行如上所述的页面的显示控制方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，所述程序产品包括计算机程序，所述计算机程序存储在可读存储介质中，设备的至少一个处理器从所述可读存储介质读取并执行所述计算机程序，使得设备执行如上实施例中所述的页面的显示控制方法。

本公开的实施例提供的技术方案至少带来以下有益效果：第一客户端在接收到第一页面显示指令时，显示预先存储的参考页面，此时第一客户端界面上不会白屏，能有效提高页面显示的连贯性；第一客户端触发网页控件进行页面视图渲染得到第一页面框架视图，并在接收到页面获取请求时向网页控件返回第一页面内容，以使网页控件根据第一页面框架视图和第一页面内容整合得到第一页面视图，第一客户端在接收到网页控件发送的页面渲染结束信息时隐藏参考页面并显示第一页面视图。上述技术方案，通过存储在第一客户端上的参考页面的显示，不需要等待参考页面的加载，能避免白屏，保证页面显示的连贯性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种页面的显示控制方法的应用环境图。

图2是根据一示例性实施例示出的一种页面的显示控制方法的流程图。

图3是根据一示例性实施例示出的一种主页面与子页面的关系示意图。

图4是根据一示例性实施例示出的一种页面框架视图与页面内容的整合过程示意图。

图5是根据另一示例性实施例示出的一种主页面与子页面的关系示意图。

图6是根据再一示例性实施例示出的一种主页面与子页面的关系示意图。

图7是根据一示例性实施例示出的一种页面的显示控制方法的流程图。

图8是根据一示例性实施例示出的一种页面的显示控制装置的框图。

图9是根据一示例性实施例示出的一种服务器的内部结构图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

本公开所提供的页面的显示控制方法，可以应用于如图1所示的应用环境中。该应用环境中包含有第一客户端101和网页控件102，两者通过网络进行通信。其中，第一客户端101可以但不限于是各种终端设备，进一步地，第一客户端101也可以指上述这些终端设备中安装的应用程序。网页控件102可以通过终端设备或者服务器实现，也可以是终端设备或者服务器上配置的浏览器、网页容器等，它能对网页信息进行处理并控制网页页面的输出显示。终端设备可以是个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备等，服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

图2是根据一示例性实施例示出的一种页面的显示控制方法的流程图，如图2所示，页面的显示控制方法用于第一客户端中。所述页面的显示控制方法包括以下步骤：

在步骤S201中，当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面。

其中，第一页面显示指令可以指触发第一页面进行显示的指令，其中可以包含有第一页面的标识参数，第一客户端在接收到第一页面显示指令时就能获知当前针对的是哪一个页面。第一页面显示指令可以为第一客户端界面所接收的点击触发指令，例如：第一客户端界面上显示第一页面的链接地址，用户点击该链接地址，网页控件就可以接收到该点击信息，即接收到第一页面显示指令。该第一页面可以为HTML(超文本标记语言)等格式的网页所对应的页面，具体的，可以为HTML5对应的页面。在某些情况下，第一页面可以称为主页面。

参考页面可以是预先设定的动画、静止画面、图像等，在参考页面为动画时可以称为loading动画，其内容可以是多样的，本发明对其具体内容不做限制。进一步地，参考页面可以是GIF等格式。更进一步地，该参考页面是第一客户端原生的动画，即存储在第一客户端的内部存储空间中。

在某些示例性实施例中，第一页面显示指令也可以由网页控件在接收到用户触发第一页面的触发信息时发送给第一客户端。

在步骤S202中，向网页控件发送页面渲染指令，以触发所述网页控件进行页面视图渲染，得到第一页面框架视图；所述第一页面框架视图为用于表征所述第一页面的网页框架。

网页控件指能够对网页信息进行处理的控制设备，例如：对网页文件进行加载、解析、渲染等处理，还可以控制网页页面的输出显示。网页控件可以通过终端设备或者服务器实现，也可以是终端设备或者服务器上配置的浏览器、网页容器等。具体的，该网页控件可以是webview。在某些情况下，网页控件可以是第一客户端的组件，通过jsbridge等方式和第一客户端进行通信。

其中，第一页面框架视图指的是描述页面整体框架、网页元素、元素颜色、元素形状等的视图。本步骤中，网页控件在页面渲染指令的触发下获取页面渲染信息，根据页面渲染信息进行页面视图渲染，得到第一页面框架视图。

进一步的，网页控件可以加载对应的页面文件，根据该页面文件获取得到页面渲染信息，进而根据页面渲染信息进行页面视图渲染，得到第一页面框架视图。

在步骤S203中，当接收到所述网页控件发送的页面获取请求时，向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图(在某些示例性实施例中，第一页面视图也可以简称为第一页面)并返回页面渲染结束信息；所述第一页面内容用于表征所述第一页面中与所述第一客户端进行交互的网页交互内容。

页面获取请求可以由网页控件在获取第一页面框架视图后发送，也可以由网页控件在接收到页面渲染指令并确定自己并未存储在该第一页面内容时发送。

其中，第一页面内容可以指用户上传到服务端(可以是对第一网页和第二网页进行发布和维护的服务器)的网页交互内容，该网页交互内容可以是文章、图片、视频、帖子、微博评论等等媒体信息，另外，第一页面内容也可以指网页开发者通过客户端上传到服务端的信息，可以是公司简介、待售产品等信息。第一客户端在界面上显示第一页面视图后，用户可以通过点击显示屏的方式触发对上述网页交互内容的交互操作，例如：点击视频进行视频的播放，点击某一篇微博下方的评论框并输入评论文本。当然，在另外一些示例性实施例中，第一客户端也可以通过服务端以外的渠道获取第一页面内容，例如：直接从内部存储空间中获取预先存储的第一页面内容。

第一页面视图可以指对第一页面进行显示时所需展示的视图，可以是图片，也可以是动画、视频的形式。本步骤由网页控件对第一页面框架视图和第一页面内容整合得到第一页面视图并在得到第一页面视图后生成页面渲染结束信息，将页面渲染结束信息返回给第一客户端。其中，该页面渲染结束信息中可以包含有该第一页面视图，当然，网页控件也可以先向第一客户端返回页面渲染结束信息，之后再向第一客户端返回第一页面视图。

进一步的，网页控件可以在满足预先设定的页面隐藏指令的触发下，将页面渲染结束信息发送给第一客户端。当然，网页控件也可以在获取到第一页面视图时就直接将其通过页面渲染结束信息返回给第一客户端。

在步骤S204中，当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图。

本步骤中，第一客户端在接收到第一页面视图后，直接隐藏当前在显示的参考页面，并显示第一页面视图。当然，客户端也可以在满足预先设定的页面隐藏指令的触发下，隐藏参考页面并显示第一页面视图。在某些情况下，第一客户端也可以先接收网页控件发送的页面渲染结束信息，据此关闭参考页面，然后接收网页控件发送的第一页面视图，并显示该第一页面视图。

另外，第一客户端也可以不隐藏参考页面，而是直接将第一页面视图覆盖在参考页面上方，使得第一客户端给用户最终展示第一页面视图。

在进行页面显示之前，网页控件需要进行页面文件的加载、页面的渲染等预处理过程，传统的页面显示过程中，这些预处理过程在第一客户端界面上是白屏状态的，这就使得网页显示不连贯，让用户体验非常糟糕。上述实施例提供的页面的显示控制方法，第一客户端在接收到第一页面显示指令时显示参考页面，能使得网页控件在对第一网页进行的预处理过程中在第一客户端显示对应的参考页面，且该参考页面预先存储在第一客户端中，不需要再次进行加载，能马上进行显示，进而保证页面显示的连贯性，防止给用户造成心理上的压力。

在某些情况下，需要对页面的视觉代码进行更新，如果按照传统的设置方式，将这些原生客户端页面代码打包在APP内部，则需要走应用商店审核流程才能完成代码更新，这样的代码更新效率是非常低下的，本公开所提供的实施例通过网页控件来实现页面的显示，能在有代码需要更新时随时完成代码的更新，不需要走应用商店审核流程，上线时间较短，因此，能在保证页面显示的连贯性的同时，在有代码需要更新时有效保证代码的更新效率。另外，这样的设置方式，使得不需要从APP打包文件中获取参考页面，其获取速度较快，能快速实现参考页面的显示，极大地缩短白屏的显示时间，进一步保证页面显示的连贯性。

在一示例性实施例中，根据第一页面框架视图和第一页面内容整合得到第一页面视图的过程可以有至少以下几种实现方式：1、将第一页面内容填充到第一页面框架视图对应的网页框架中；2、若第一页面内容为页面视图形式时也可以将第一页面内容直接叠加在第一页面框架视图上。

进一步地，以进行页面内容填充为例，所述向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图的步骤，包括：向所述网页控件返回第一页面内容，以触发所述网页控件将所述第一页面内容填充到所述第一页面框架视图的网页框架中，得到所述第一页面视图。

以图3为例，图3(a)为第一页面框架视图的示例，该视图中表征了界面上不同页面内容(例如：封面、用户头像、用户个人信息、发布内容)所对应的位置、区域大小、颜色(例如：“用户个人信息”这一网页元素对应的背景元素颜色为灰色)等；图3(b)为向第一页面框架视图中填充第一页面内容后得到的第一页面视图的示例，如图3(b)所示，网页框架中各个位置都填充有相应的页面内容。此时，用户可以通过点击第一客户端的显示屏进行交互操作，例如：点击“视频1”对应的按键，则第一客户端在界面播放视频1的内容。

上述实施例中，通过页面内容和页面框架视图的整合能得到完整的页面视图，进而可以在第一客户端中显示完整的信息，以便用户与所显示的页面进行交互。

在一示例性实施例中，如果第一页面对应有子页面(第二页面)，则可以在第一页面视图显示的过程中预先加载第二页面的第二页面视图，即，在接收到第二页面显示指令之前就加载好第二页面视图，在接收到第二页面显示指令时，直接将第二页面视图发送给第一客户端。

进一步的，若确定第一客户端中已显示第一页面，则第一客户端可以控制网页控件加载第二页面的相关信息，例如完成第二渲染信息描述文件的获取、解析以及渲染过程，即完成第二页面的视觉代码加载，进而得到第二页面视图，若接收到第二页面显示指令，将第二页面视图发送给第一客户端，控制第一客户端显示第二页面视图，以完成第一客户端中第一页面视图和第二页面视图的切换过程。

另外，在某些情况下，也可以先加载第二页面的部分信息(例如：第二页面框架视图)，在接收到第二页面显示指令时，根据预先加载的部分信息加载得到完整的第二页面视图，并将第二页面视图发送给第一客户端。进一步的，在所述当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图的步骤之后，还包括：若所述第一页面对应有第二页面，触发所述网页控件获取所述第二页面对应的第二渲染信息描述文件，对所述第二渲染信息描述文件进行解析得到第二页面渲染信息，根据所述第二页面渲染信息进行页面视图渲染，得到第二页面框架视图；其中，所述第二页面为所述第一页面的子页面；所述第二页面框架视图用于表征所述第二页面的网页框架；当接收到第二页面显示指令时，从服务端中获取第二页面内容，触发所述网页控件根据所述第二页面框架视图和所述第二页面内容整合得到第二页面视图(在某些示例性实施例中，第二页面视图也可以简称为第二页面)；所述第二页面内容用于表征所述第二页面中与所述第一客户端进行交互的网页交互内容；所述第二页面显示指令在所述第二页面被触发时生成；显示所述第二页面视图。

第二页面为第一页面的子页面，因此，第二页面可以称为从页面，同时，第二页面也可以对应有从页面，该第二页面的从页面同样可以有自己的从页面，以此类推。另外，第二页面的数量(包括第二页面的子页面)可以为一个、两个甚至多个。进一步地，该第二页面也可以为HTML网页对应的页面，具体的，可以为HTML5对应的页面。

第二页面显示指令可以指触发第二页面进行显示的指令。在某些示例性实施例中，第二页面显示指令也可以由网页控件在接收到用户触发第二页面的触发信息时发送给第一客户端。

第二页面框架视图在第一客户端显示第一页面视图时生成。进一步的，在显示第一页面的过程中，第一客户端触发网页控件进行页面渲染，得到第二页面框架视图，并在接收到第二页面显示指令时触发网页控件根据第二页面内容生成第二页面视图。

如图4所示，主页面对应有两个子页面：页面A和页面B，第一客户端界面上显示有“进入页面A”和“进入页面B”的按键，如果“进入页面A”的按键被触发，则在第一客户端界面上显示页面A(页面A对应有一个子页面：页面X)，此时如果页面A上的“进入页面X”的按键被触发，则在第一客户端界面上显示页面X。页面B以及其子页面Y的显示过程类似，在此不再赘述。

另外，第二渲染信息描述文件指的是对网页页面渲染信息进行描述的文件，其中可以包含有页面渲染信息，具体的，可以包含有页面中需要包含的元素、元素形态、元素位置、元素颜色等信息。进一步的，第二渲染信息描述文件可以为HTML文件，具体的，可以为HTML5文件。第二页面内容可以与第一页面内容类似，只是两者是要在不同网页进行显示的内容。另外，第二页面框架视图和第二页面内容的整合过程可以参见第一页面框架视图和第一页面内容的整合过程，在此不再赘述。

上述示例性实施例提供的页面的显示控制方法中，网页控件在确定第一客户端显示第一页面视图且还未接收到第二页面显示指令时，先获取第二渲染信息描述文件并解析渲染得到第二页面框架视图，如图5所示，APP界面(也即第一客户端的界面)上显示页面1时，网页控件在后台加载页面1的子页面：页面2(具体可以加载页面2的网页框架)；若接收到第二页面显示指令(例如：图5中“进入页面2”的按键被触发)，则网页控件通过第一客户端从服务端中获取第二页面内容，以得到第二页面视图，并控制第一客户端显示该第二页面视图。上述处理过程，不是在接收到第二页面显示指令后再获取第二页面框架视图，而是预先完成加载渲染的过程，另外，在接收到第二页面显示指令时，只需获取第二页面内容就可以，这样的处理方式能在接收到第二页面显示指令时快速得到第二页面视图，能快速完成第二页面视图在第一客户端的显示，避免白屏的出现，这样就让切换H5页面更为平滑流畅。

在一示例性实施例中，第二页面的数量可能不止一个，而如果在显示第一页面时加载全部第二页面，则可能会导致占用较多网页控件的运行内存，此时可以仅记载其中部分第二页面(具体加载哪些第二页面可以根据实际情况确定)。这种试探性开启子页面的方式，就是将某页面的N个子页面提前放在N个新的webview里面渲染出来，等某个子页面被真正访问时，再请求CGI接口(Common Gateway Interface，通用网页接口)拿到对应的数据，将数据填充到页面上。这样，就实现了打开子页面时H5页面跳转的无白屏，且过渡效果优雅体验。

在某些示例性实施例中，在第一客户端显示第二页面时，还可以保留第一页面的信息，当第一页面显示指令再次被触发时，可以快速完成第一页面的恢复显示。以图6所示，在APP界面显示页面2时，网页控件在后台继续加载页面1，如果“返回页面1”的按键被触发，则控制第一客户端显示页面1。

在某些示例性实施例中，若网页控件在接收到第二页面显示指令时还未完成第二页面框架视图的渲染过程，也可以从第一客户端的内部存储控件中获取参考页面，并控制第一客户端在界面上显示该参考页面；还可以继续显示第一页面视图，直到第二页面框架视图渲染完成，保证页面显示的连贯性。

另外，网页控件也可以先将第二页面框架视图发送给第一客户端，第一客户端对第二页面框架视图进行显示，之后网页控件通过第一客户端从服务端中获取第二页面内容，第一客户端将第二页面内容填充到界面中，完成第二页面视图的显示。

在一示例性实施例中，所述当接收到第二页面显示指令时，从服务端中获取第二页面内容的步骤，包括：当接收到第二页面显示指令且确定所述网页控件未存储所述第二页面内容时，从所述服务端中获取所述第二页面内容。

具体的，第一客户端在接收到第二页面显示指令时，如果确定本端和网页控件中均未存储第二页面内容时，从服务端中获取第二页面内容。第一客户端与服务端直接通信，从服务端中对应的第一页面内容。在某些实施例中，也可以由网页控件直接从服务端中获取第一页面内容。

如果确定本端存储有第二页面内容，则可以直接将该第二页面内容发送给网页控件，而不需要再从服务端中获取第二页面内容。

上述实施例中第一客户端通过合适的方式获取到第二页面内容，能保证网页控件及时地完成第二页面视图的生成过程。

在一示例性实施例中，第一页面内容的获取过程同第二页面内容的获取过程，在此不再赘述。

在一示例性实施例中，所述从所述服务端中获取所述第二页面内容的步骤，包括：调用所述服务端的通用网关接口，以通过所述通用网关接口获取由第二客户端上传至所述服务端的所述第二页面内容。

其中，通用网页接口(Common Gateway Interface，CGI)是Web服务器运行时外部程序的规范，按CGI编写的程序可以扩展服务器功能。第二客户端可以通过CGI接口将第一页面内容上传到服务端，服务端可以将第一页面内容存储到数据库中。网页控件向服务端的CGI接口发送调用指令，服务端根据该调用指令从数据库中获取对应的第一页面内容，进而返回给网页控件。在某些情况下，通过CGI接口从服务端获取第一页面内容也可以直接简称为获取CGI数据。

另外，第二客户端的数量可以为一个、两个甚至多个。进一步地，第一客户端和第二客户端可以为相同客户端，也可以为不同的客户端。

上述实施例中，网页控件通过CGI接口快速获取第一页面内容，能有效保证第一页面的快速显示，同时在页面框架视图的基础上填充页面内容，能保证网页内容显示的完整性。

在一示例性实施例中，所述当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面的步骤，包括：当接收到第一页面显示指令时，从内部存储空间中获取预先存储的参考页面，并显示所述参考页面；所述参考页面为动态画面、静态画面中的至少一项。

其中，内部存储空间可以为内存、磁盘等。本实施示例中参考页面直接存储在第一客户端端的内部存储空间中，在需要进行参考页面显示时直接获取，不需要从APP代码包中获取，不受APP上线审核时间上的影响，能有效保证代码更新的效率。另外，在第一页面视图的加载过程中显示临时的参考页面，能使得页面的显示具有更好的连贯性，可以提高与用户的交互性。

在一示例性实施例中，所述向网页控件发送页面渲染指令的步骤，包括：向网页控件发送页面渲染指令，以触发所述网页控件获取所述第一页面对应的第一渲染信息描述文件，对所述第一渲染信息描述文件进行解析得到第一页面渲染信息，根据所述第一页面渲染信息进行页面视图渲染，得到所述第一页面框架视图。

其中，第一渲染信息描述文件与第二渲染信息描述文件类似，可以为HTML文件，具体的，可以为HTML5文件(可以简称为H5)。对HTML文件进行解析后，还可以包括加载其中的网页信息的步骤，这个网页信息可以为CSS、Javascript、图片等。根据这些网页信息可以完成网页视图的渲染过程。

具体的，获取第一页面框架视图的过程可以为：

1、初始化webview；

2、webview加载H5链接对应的HTML5文件；

3、webview解析HTML5文件；

4、webview加载HTML5文件里面嵌入的CSS、Javascript、图片等；

5、webview根据CSS、Javascript、图片等渲染页面视图，得到第一页面框架视图；如果是浏览器端渲染，还需要根据Javascript再次渲染视图。

上述实施例中，在接收到第一页面显示指令时，第一客户端在界面中显示参考页面，同时，控制网页控件进行页面渲染以得到第一页面框架视图，进而根据第一页面框架视图以及第一页面内容整合得到第一页面视图，以控制第一客户端在界面中关闭参考页面并显示第一页面，能保证网页页面显示的连贯性并快速完成第一页面的显示。

在某些示例性实施例中，webivew将H5的HTML文档加载完毕后的那个时刻(这个时刻可以根据不同的场景制定不同的策略)，webivew可以页面渲染结束信息发送到客户端，客户端收到消息后再隐藏loading view。

进一步的，所述页面的显示控制方法，还包括：接收网页控件在满足以下任意一个条件时发送的页面渲染结束信息：加载完所述第一页面的静态资源；交互输入接口开通；所述交互输入接口用于接收所述第一客户端输入的交互信息；获取到所述第一页面内容；预设的延迟时间到达。

其中，静态资源可以指第一页面的页面框架等文字、图片形式的信息。

交互输入接口开通可以指第一客户端能够接收到用户的交互信息同时第一客户端能够将该交互信息通过该交互输入接口发送至网页控件。

获取到第一页面内容可以指接收到服务端返回的第一页面内容。

预设的延迟时间可以根据第一客户端的网络状态确定，网络状态好时延迟时间可以为一个较短的时间。具体的，该延迟时间可以为50ms、100ms等。

另外，在满足上述条件中的至少一个时，网页控件也可以先向第一客户端发送动画隐藏指令，以控制第一客户端关闭参考页面，然后向第一客户端发送第一页面视图，第一客户端据此显示该第一页面视图。

上述实施例网页控件在满足设定条件时将第一页面视图发送给第一客户端，以触发第一客户端隐藏参考页面，能有效保证第一客户端中显示内容的有序性。

图7是根据一示例性实施例示出的一种页面的显示控制方法的流程图，如图7所示，包括以下步骤。

1、客户端在接收到打开主页面的指令(可以是用户点击客户端界面上的一个H5链接)时，启动webview(网页控件)并初始化webview。

2、在客户端当前的界面上盖一个loading view容器，以显示参考页面。

3、webview加载H5链接对应的HTML文件，解析HTML文件，加载HTML文件里面嵌入的CSS、Javascript、图片等，并渲染视图，得到第一页面框架视图。

4、webview从服务端中获取第一页面内容。

5、webview将第一页面内容填充到第一页面框架视图的网页框架中，得到第一页面视图。

6、客户端在接收到webview的页面渲染结束信息时，隐藏loading view容器并显示第一页面视图。

7、webview遍历第一页面的子页面，确定其子页面为第二页面。加载第二页面的子页面对应的HTML文件，解析HTML文件，加载HTML文件里面嵌入的CSS、Javascript、图片等，并渲染视图，得到第二页面框架视图。

8、webview在接收到第二页面显示指令时，向客户端发出一个信号，委托客户端请求CGI数据(第二页面内容)，此时如果有请求参数(例如第二页面的标识信息)，也一起发过去。

9、客户端首先判断该webview是不是在前台(也即当前是否在显示)，在前台的话，再判断webview内的H5是否已经有CGI数据，有数据则什么都不做。

10、没有数据则通过向服务器发送CGI数据请求。

11、服务端返回CGI数据给webview。

12、webview将CGI数据填充到第二页面框架视图的网页框架中，得到第二页面视图。

13、webview控制客户端隐藏第一页面视图并显示第二页面视图。

上述实施例提供的页面的显示控制方法，在加载页面视图时显示参考页面，同时预先加载第二页面，能让H5页面跳转时的过渡效果更佳优雅，提供极致的用户体验。另外，H5页面有着天然的灵活优势，随时可以更新代码，不需要走应用商店审核流程，上线时间较短，效率高。

应该理解的是，虽然图2和7的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2和7中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

图8是根据一示例性实施例示出的一种页面的显示控制装置框图。参照图8，该装置包括参考页面显示单元801，渲染指令发送单元802，页面内容发送单元803和页面隐藏和显示单元804。

参考页面显示单元801，被配置为执行当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面。

渲染指令发送单元802，被配置为执行向网页控件发送页面渲染指令，以触发所述网页控件进行页面视图渲染，得到第一页面框架视图；所述第一页面框架视图为用于表征所述第一页面的网页框架。

页面内容发送单元803，被配置为执行当接收到所述网页控件发送的页面获取请求时，向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图并返回页面渲染结束信息；所述第一页面内容用于表征所述第一页面中与所述第一客户端进行交互的网页交互内容。

页面隐藏和显示单元804，被配置为执行当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图。

上述页面的显示控制装置中，第一客户端在接收到第一页面显示指令时，显示预先存储的参考页面，此时第一客户端界面上不会白屏，能有效提高页面显示的连贯性；第一客户端触发网页控件进行页面视图渲染得到第一页面框架视图，并在接收到页面获取请求时向网页控件返回第一页面内容，以使网页控件根据第一页面框架视图和第一页面内容整合得到第一页面视图，第一客户端在接收到网页控件发送的页面渲染结束信息时隐藏参考页面并显示第一页面视图。上述技术方案，通过存储在第一客户端上的参考页面的显示，能避免白屏，保证页面显示的连贯性。

在一示例性实施例中，所述页面内容发送单元，还被配置为执行向所述网页控件返回第一页面内容，以触发所述网页控件将所述第一页面内容填充到所述第一页面框架视图的网页框架中，得到所述第一页面视图。

在一示例性实施例中，所述页面的显示控制装置，还包括：页面渲染单元，被配置为执行若所述第一页面对应有第二页面，触发所述网页控件获取所述第二页面对应的第二渲染信息描述文件，对所述第二渲染信息描述文件进行解析得到第二页面渲染信息，根据所述第二页面渲染信息进行页面视图渲染，得到第二页面框架视图；其中，所述第二页面为所述第一页面的子页面；所述第二页面框架视图用于表征所述第二页面的网页框架；页面整合单元，被配置为执行当接收到第二页面显示指令时，从服务端中获取第二页面内容，触发所述网页控件根据所述第二页面框架视图和所述第二页面内容整合得到第二页面视图；所述第二页面内容用于表征所述第二页面中与所述第一客户端进行交互的网页交互内容；所述第二页面显示指令在所述第二页面被触发时生成；页面显示单元，被配置为执行显示所述第二页面视图。

在一示例性实施例中，所述页面整合单元，还被配置为执行当接收到第二页面显示指令且确定所述网页控件未存储所述第二页面内容时，从所述服务端中获取所述第二页面内容。

在一示例性实施例中，所述页面整合单元，还被配置为执行调用所述服务端的通用网关接口，以通过所述通用网关接口获取由第二客户端上传至所述服务端的所述第二页面内容。

在一示例性实施例中，所述参考页面显示单元，还被配置为执行当接收到第一页面显示指令时，从内部存储空间中获取预先存储的参考页面，并显示所述参考页面；所述参考页面为动态画面、静态画面中的至少一项。

在一示例性实施例中，所述渲染指令发送单元，还被配置为执行向网页控件发送页面渲染指令，以触发所述网页控件获取所述第一页面对应的第一渲染信息描述文件，对所述第一渲染信息描述文件进行解析得到第一页面渲染信息，根据所述第一页面渲染信息进行页面视图渲染，得到所述第一页面框架视图。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图9是根据一示例性实施例示出的一种用于网页的显示方法的设备900的框图。例如，设备900可以为客户端。参照图9，设备900可以包括以下一个或多个组件：处理组件901、存储器902、电力组件903、多媒体组件904、音频组件905、输入/输出(I/O)的接口906、传感器组件907以及通信组件908。

处理组件901通常控制设备900的整体操作，诸如与显示、电话呼叫、数据通信、相机操作和记录操作相关联的操作。处理组件901可以包括一个或多个处理器910来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件901可以包括一个或多个模块，便于处理组件901和其他组件之间的交互。例如，处理组件901可以包括多媒体模块，以方便多媒体组件904和处理组件901之间的交互。

存储器902被配置为存储各种类型的数据以支持在设备900的操作。这些数据的示例包括用于在设备900上操作的任何应用程序或方法的指令、联系人数据、电话簿数据、消息、图片、视频等。存储器902可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)、电可擦除可编程只读存储器(EEPROM)、可擦除可编程只读存储器(EPROM)、可编程只读存储器(PROM)、只读存储器(ROM)、磁存储器、快闪存储器、磁盘或光盘。

电源组件903为设备900的各种组件提供电力。电源组件903可以包括电源管理系统，一个或多个电源，及其他与为设备900生成、管理和分配电力相关联的组件。

多媒体组件904包括在所述设备900和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件904包括一个前置摄像头和/或后置摄像头。当设备900处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件905被配置为输出和/或输入音频信号。例如，音频组件905包括一个麦克风(MIC)，当设备900处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器902或经由通信组件908发送。在一些实施例中，音频组件905还包括一个扬声器，用于输出音频信号。

I/O接口906为处理组件901和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件907包括一个或多个传感器，用于为设备900提供各个方面的状态评估。例如，传感器组件907可以检测到设备900的打开/关闭状态，组件的相对定位，例如所述组件为设备900的显示器和小键盘，传感器组件907还可以检测设备900或设备900一个组件的位置改变，用户与设备900接触的存在或不存在，设备900方位或加速/减速和设备900的温度变化。传感器组件907可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件907还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件907还可以包括加速度传感器、陀螺仪传感器、磁传感器、压力传感器或温度传感器。

通信组件908被配置为便于设备900和其他设备之间有线或无线方式的通信。设备900可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件908经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件908还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，设备900可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器902，上述指令可由设备900的处理器910执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

根据本公开实施例的第五方面，提供一种计算机程序产品，所述程序产品包括计算机程序，所述计算机程序存储在可读存储介质中，设备的至少一个处理器从所述可读存储介质读取并执行所述计算机程序，使得设备执行如上实施例中所述的页面的显示控制方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种页面的显示控制方法，其特征在于，应用于第一客户端，所述页面的显示控制方法包括：

当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面；

向网页控件发送页面渲染指令，以触发所述网页控件进行页面视图渲染，得到第一页面框架视图；所述第一页面框架视图为用于表征所述第一页面的网页框架；

当接收到所述网页控件发送的页面获取请求时，向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图并返回页面渲染结束信息；所述第一页面内容用于表征所述第一页面中与所述第一客户端进行交互的网页交互内容；

当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图。

2.根据权利要求1所述的页面的显示控制方法，其特征在于，所述向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图的步骤，包括：

向所述网页控件返回第一页面内容，以触发所述网页控件将所述第一页面内容填充到所述第一页面框架视图的网页框架中，得到所述第一页面视图。

3.根据权利要求1所述的页面的显示控制方法，其特征在于，在所述当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图的步骤之后，还包括：

若所述第一页面对应有第二页面，触发所述网页控件获取所述第二页面对应的第二渲染信息描述文件，对所述第二渲染信息描述文件进行解析得到第二页面渲染信息，根据所述第二页面渲染信息进行页面视图渲染，得到第二页面框架视图；其中，所述第二页面为所述第一页面的子页面；所述第二页面框架视图用于表征所述第二页面的网页框架；

当接收到第二页面显示指令时，从服务端中获取第二页面内容，触发所述网页控件根据所述第二页面框架视图和所述第二页面内容整合得到第二页面视图；所述第二页面内容用于表征所述第二页面中与所述第一客户端进行交互的网页交互内容；所述第二页面显示指令在所述第二页面被触发时生成；

显示所述第二页面视图。

4.根据权利要求3所述的页面的显示控制方法，其特征在于，所述当接收到第二页面显示指令时，从服务端中获取第二页面内容的步骤，包括：

当接收到第二页面显示指令且确定所述网页控件未存储所述第二页面内容时，从所述服务端中获取所述第二页面内容。

5.根据权利要求4所述的页面的显示控制方法，其特征在于，所述从所述服务端中获取所述第二页面内容的步骤，包括：

调用所述服务端的通用网关接口，以通过所述通用网关接口获取由第二客户端上传至所述服务端的所述第二页面内容。

6.根据权利要求1至5任一项所述的页面的显示控制方法，其特征在于，所述当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面的步骤，包括：

当接收到第一页面显示指令时，从内部存储空间中获取预先存储的参考页面，并显示所述参考页面；所述参考页面为动态画面、静态画面中的至少一项。

7.根据权利要求1至5任一项所述的页面的显示控制方法，其特征在于，所述向网页控件发送页面渲染指令的步骤，包括：

向网页控件发送页面渲染指令，以触发所述网页控件获取所述第一页面对应的第一渲染信息描述文件，对所述第一渲染信息描述文件进行解析得到第一页面渲染信息，根据所述第一页面渲染信息进行页面视图渲染，得到所述第一页面框架视图。

8.一种页面的显示控制装置，其特征在于，应用于第一客户端，所述页面的显示控制装置包括：

参考页面显示单元，被配置为执行当接收到第一页面显示指令时，显示存储于所述第一客户端中的参考页面；

渲染指令发送单元，被配置为执行向网页控件发送页面渲染指令，以触发所述网页控件进行页面视图渲染，得到第一页面框架视图；所述第一页面框架视图为用于表征所述第一页面的网页框架；

页面内容发送单元，被配置为执行当接收到所述网页控件发送的页面获取请求时，向所述网页控件返回第一页面内容，以触发所述网页控件根据所述第一页面框架视图和所述第一页面内容整合得到第一页面视图并返回页面渲染结束信息；所述第一页面内容用于表征所述第一页面中与所述第一客户端进行交互的网页交互内容；

页面隐藏和显示单元，被配置为执行当接收到所述网页控件返回的所述页面渲染结束信息时，隐藏所述参考页面并显示所述第一页面视图。

9.一种客户端，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7中任一项所述的页面的显示控制方法。

10.一种存储介质，当所述存储介质中的指令由客户端的处理器执行时，使得所述客户端能够执行如权利要求1至7中任一项所述的页面的显示控制方法。

Images