一种网页展示方法及系统、用户设备与流程

本申请涉及计算机技术领域，尤其涉及一种网页展示方法及系统、用户设备。

背景技术：

现在是移动互联网时代，存在着海量的移动端应用可供用户使用，伴随这种情况，存在着大量的需要在移动端应用中打开网页的使用场景。

现有技术中，当需要在移动端应用中打开网页时，通过开启一个浏览器内核实例，简单地渲染网页后将该网页的内容进行展示。由于网页内容的长度不确定，浏览器内核实例的高度也是不确定的，因此会出现两个纵向滚动域，分别是浏览器内核实例的纵向滚动域，和移动端应用当前视图的纵向滚动域。上述两个纵向滚动域，首先，会影响视觉效果，使得当前视图页面不够美观，其次，若用户只滑动移动端应用当前视图的纵向滚动域对应的滚动条，则整个网页作为一个整体进行滑动，而网页中的内容则不会相应地滑动，从而即使用户滑动了移动端应用当前视图的纵向滚动域对应的滚动条，也不能查看网页的全部内容，这将给用户带来不便，影响了用户的应用体验。

综上所述，现有技术中对网页进行展示时，会出现两个纵向滚动域，使得用户浏览网页内容时不够方便，降低了用户体验。

技术实现要素：

本申请实施例提供了一种网页展示方法及系统、用户设备，用以提高网页展示的效果，提升用户体验。

本申请实施例提供的一种网页展示方法，包括：

开启浏览器内核实例渲染网页，并获取所述网页的高度值；

根据所述网页的高度值，设置所述浏览器内核实例的高度值，并通过具有该高度值的浏览器内核实例展示所述网页。

本申请实施例提供的该方法，当需要在移动端应用中打开网页时，通过开启浏览器内核实例渲染网页，并获取所述网页的高度值，进而根据所述网页的高度值，设置所述浏览器内核实例的高度值，并通过具有该高度值的浏览器内核实例展示所述网页，从而可以避免出现两个纵向滚动域(浏览器内核实例的纵向滚动域和移动端应用当前视图的纵向滚动域)的情况，实现网页内容的滚动与移动端应用当前视图的滚动一体化的效果，提高网页展示的效果，提升用户体验。并且，通过该方法，可允许浏览器内核实例与任意的非网页内容进行混排，从而在当前视图内可展示包括网页在内的更多内容，可扩展性更好。

可选地，设置后的所述浏览器内核实例的高度值等于所述网页的高度值。

可选地，在开启浏览器内核实例渲染网页之后，获取所述网页的高度值之前，该方法还包括：

检测所述网页中是否存在可用于对所述网页进行缩放的元素；

当在所述网页中不存在所述元素时，对所述网页进行移动端适配。

由于在移动端应用中展示网页时，现有技术往往只是将针对pc端的网页缩小至完全能够在移动端当前视图的大小内展示的尺寸，这样会使得网页缩得很小，用户在浏览阅读该网页的内容时，需要先将网页进行放大操作后才能正常阅读，降低了用户体验。而本申请实施例的该方法中，在根据所述网页的高度值，设置所述浏览器内核实例的高度值之前，将网页进行移动端适配，从而可使得用户在浏览网页内容时只能感受到一个纵向滚动域的前提下，也可以避免在移动端展示网页时网页缩得很小影响用户正常浏览的情况，进一步提升了用户体验。

可选地，所述可用于对所述网页进行缩放的元素为meta元素，所述meta元素的name属性的值为viewport。

可选地，对所述网页进行移动端适配，具体包括：

在所述网页的head元素中插入所述meta元素，由该meta元素对所述网页进行缩放，完成对所述网页进行移动端适配的过程。

本申请实施例提供的一种网页展示系统，包括：

第一模块，用于开启浏览器内核实例渲染网页，并获取所述网页的高度值；

第二模块，用于根据所述网页的高度值，设置所述浏览器内核实例的高度值，并通过具有该高度值的浏览器内核实例展示所述网页。

通过该系统，可实现更好的网页展示的效果，避免出现两个纵向滚动域的情况，实现网页内容的滚动与移动端应用当前视图的滚动一体化的效果，提升用户体验。

可选地，设置后的所述浏览器内核实例的高度值等于所述网页的高度值。

可选地，所述第一模块在开启浏览器内核实例渲染网页之后，获取所述网页的高度值之前，还用于：

检测所述网页中是否存在可用于对所述网页进行缩放的元素；

当在所述网页中不存在所述元素时，对所述网页进行移动端适配。

从而，可使得用户在浏览网页内容时只能感受到一个纵向滚动域的前提下，也可以避免在移动端展示网页时网页缩得很小影响用户正常浏览的情况，进一步提升了用户体验。

可选地，所述元素为meta元素，所述meta元素的name属性的值为viewport。

可选地，所述第一模块对所述网页进行移动端适配时，具体用于：

在所述网页的head元素中插入所述meta元素，由该meta元素对所述网页进行缩放，完成对所述网页进行移动端适配的过程。

本发明实施例提供的一种用户设备，包括上述网页展示系统。

可选地，所述用户设备为移动终端。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种网页展示方法的流程示意图；

图2为本申请实施例提供的一种网页展示方法的具体流程示意图；

图3为本申请实施例提供的另一种网页展示方法的具体流程示意图；

图4为本申请实施例提供的一种网页展示装置的结构示意图。

具体实施方式

本申请实施例提供了一种网页展示方法及系统、用户设备，用以提高网页展示的效果，提升用户体验。

为了更好地理解本申请的上述目的、方案和优势，下文提供了详细描述。该详细描述通过使用框图、流程图等附图和/或示例，阐明了系统和/或方法的各种实施方式。在这些框图、流程图和/或示例中，包含一个或多个功能和/或操作。本领域技术人员将理解到：这些框图、流程图或示例内的各个功能和/或操作，能够通过各种各样的硬件、软件、固件单独或共同实施，或者通过硬件、软件和固件的任意组合实施。

参见图1，本申请实例提供的一种网页展示方法，包括：

s101、开启浏览器内核实例渲染网页，并获取所述网页的高度值；

s102、根据所述网页的高度值，设置所述浏览器内核实例的高度值，并通过具有该高度值的浏览器内核实例展示所述网页。

其中，上述网页的高度值，也就是网页内容所占的高度值。

该方法可应用于在移动端应用(例如某种用于聊天的客户端应用)中需要打开网页的场景。步骤s101中浏览器内核实例对网页进行渲染的过程可通过 现有技术实现。

具体地，例如可通过如下方式触发步骤s101：

当用户需要在移动端应用中打开网页时，移动端应用接收展示网页的请求后，进而触发移动端应用开启浏览器内核实例渲染网页，并通过上述步骤s101、s102中所述的方法对网页进行展示。

所述移动端，例如可以为手机等。

可选地，当开启浏览器内核实例渲染网页后，向所述网页中注入适配程序，由适配程序获取所述网页的高度值。

其中，所述适配程序可通过现有技术实现，例如可通过javascript(客户端脚本语言)进行编写，该适配程序用于检测网页是否针对移动端进行了适配，并在网页没有针对移动端进行适配的情况下对该网页进行移动端适配，并且，该适配程序还用于获取网页的高度值。

上述开启浏览器内核实例后，向网页中注入适配程序的过程，例如可通过如下方式实现：

移动端应用开启webview(网页视图)来渲染网页，并通过injectedjavascript(嵌入javascript)接口向所述网页中注入由javascript语言实现的适配程序。其中，所述webview为移动端应用的原生控件，在该实施例中webview可以理解为是一浏览器内核实例。

当然，除上述方式外，也可以采用其他的方式向网页中注入适配程序，例如，可依据移动端的操作系统，采取相应的方式向网页中注入适配程序，并且，针对同一个操作系统，也可以采用不同的实施方式实现向网页中注入适配程序，本申请实施例对此不作限定。

可选地，设置后的所述浏览器内核实例的高度值等于所述网页的高度值。当然，设置后的所述浏览器内核实例的高度值与所述网页的高度值不完全相等也是可以的，本申请实施例对此不作限定。

由于所述适配程序是在所述网页中运行的，因此，所述适配程序可以获取 所述网页的高度值，并将该高度值返回给移动端应用，由移动端应用根据所述网页的高度值，设置所述浏览器内核实例的高度值。其中，所述适配程序将所述网页的高度值返回给移动端应用，属于网页内容与移动端应用之间的通信方式，该通信方式可以有多种。

例如，移动端应用可通过如下方式获取网页的高度值：

适配程序通过document.height接口获取网页的高度值，并根据该高度值设置网页的title(标题)属性。具体地，所述适配程序将所述高度值设置为网页的document.title属性。相应地，移动端应用通过浏览器内核实例监听网页的title属性的状态变化情况，当浏览器内核实例监听到网页的title属性发生变化时，从网页的title属性中获取所述高度值。由于浏览器内核实例属于移动端应用控制的部分，因此，移动端应用也就可以获知网页的高度值，并根据网页的高度值，设置所述浏览器内核实例的高度值。

当然，具体实施中移动端应用获取网页的高度值并不限于上述方式，上述方式只是本申请实施例提供的其中一个实施例。

所述移动端应用根据所述网页的高度值，设置所述浏览器内核实例的高度值，例如可以通过如下方式进行设置：

移动端应用根据所述网页的高度值，设置webview的height(高度)属性，例如通过移动端应用代码将webview的height属性值设置为与所述网页的高度值相同的数值。当然，具体实施中，也可以通过其他的方式将设置所述浏览器内核实例的高度值，例如可根据具体的移动端操作系统进行灵活的设定，并且，针对同一个操作系统，也可以采用不同的实施方式实现对浏览器内核实例的高度的设置，本申请实施例对此不作限定。

从而，当所述浏览器内核实例的高度值和网页内容的高度值一致时，浏览器内核实例不会出现独立的纵向滚动域及滚动条，使得网页内容的滚动与移动端应用当前视图的滚动是一体的，使得用户可获得更好的应用体验。

可选地，在开启浏览器内核实例渲染网页之后，获取所述网页的高度值之 前，该方法还包括：

检测所述网页中是否存在可用于对所述网页进行缩放的元素；

当在所述网页中不存在所述元素时，对所述网页进行移动端适配。

可选地，可通过预先向网页中注入的适配程序检测所述网页中是否存在可用于对所述网页进行缩放的元素。

可选地，所述元素为meta元素，所述meta元素的name(名称)属性的值为viewport(视口)。

当然，若上述检测结果显示在所述网页中存在所述name属性的值为viewport的meta元素时，则不需要再执行对所述网页进行移动端适配的过程。

这里，我们给出一个检测所述网页中是否存在name属性的值为viewport的meta元素的例子：

所述适配程序首先通过getelementsbytagname函数找到网页中所有的meta元素；其次，针对任一meta元素，通过getattribute函数查询该meta元素的name属性的值。若在这些meta元素中，存在至少一个meta元素，其name属性值为viewport，则说明该网页已经针对移动端进行了适配，从而无需再执行对所述网页进行移动端适配的过程；否则，执行对所述网页进行移动端适配的过程。

可选地，对所述网页进行移动端适配，可通过如下方式实现：

在所述网页的head元素中插入所述meta元素，由该meta元素对所述网页进行缩放，完成对所述网页进行移动端适配的过程。

可选地，可通过预先向网页中注入的适配程序，在所述网页的head元素中插入所述meta元素。

上述在网页的head元素中插入所述meta元素的过程，例如可以通过如下方式实现：

首先，所述适配程序通过createelement(创建元素)函数创建一个meta 元素；其次，通过setattribute(设置属性)将创建的meta元素的name属性值设置为viewport；最后，通过appendchild(添加节点)函数将所述meta元素插入网页文档中。

当然，除上述方式外，也可通过其他的方式在网页中插入所述meta元素，例如可以依据移动端的操作系统采取相应的方式，当然，对于同一个操作系统也可以采用不同的方式实现上述在网页中插入所述meta元素的过程，本申请实施例对此不作限定。

可选地，meta元素对所述网页进行缩放，完成对所述网页进行移动端适配的过程，具体包括：

meta元素根据浏览器内核实例的宽度值，设置网页的宽度值。例如，将网页的宽度值设置为与浏览器内核实例的宽度值相等的数值。并且，可根据实际需要对网页的高度值进行适当的调整，当然，网页的高度值也可以不进行调整，本申请实施例对此不作限定。

需要说明的是，在开启浏览器内核实例渲染网页之后，获取所述网页的高度值之前，若执行了对所述网页进行移动端适配的过程，则在后续设置所述浏览器内核实例的高度值时，是依据已进行移动端适配后的网页的高度值设置所述浏览器内核实例的高度值的。从而，既可以保证用户在浏览网页时只感受到一个纵向滚动域，又可以避免在移动端展示网页时将网页缩得很小影响用户正常浏览的情况，提升了用户体验。

作为优选的方式，在设置所述浏览器内核实例的高度值之前，执行对所述网页进行移动端适配的过程，当然，在开启浏览器内核实例渲染网页，并获取所述网页的高度值，进而根据该高度值设置所述浏览器内核实例的高度之后，执行对所述网页进行移动端适配的过程也是可以的，本申请实施例对此不作限定。在一般情况下，采用这种方法，也可以保证用户在浏览网页时只感受到一个纵向滚动域，并避免在移动端展示网页时将网页缩得很小影响用户正常浏览的情况，提升用户体验。

下面从整体角度给出本申请实施例提供的网页展示方法的具体流程。

在一个实施例中，参见图2，本申请实施例提供了一种网页展示方法的具体流程示意图。

步骤s201：开启浏览器内核实例渲染网页，并向网页中注入适配程序。

步骤s202：根据所述适配程序，检测所述网页中是否存在可用于对所述网页进行缩放的meta元素；其中，该meta元素的name属性的值为viewport。

步骤s203：若在所述网页中不存在所述name属性的值为viewport的meta元素，则在所述网页的head元素中插入所述meta元素，由该meta元素对所述网页进行缩放，完成对所述网页进行移动端适配的过程。

步骤s204：通过所述适配程序，获取所述针对移动端进行适配后的网页的高度值。

步骤s205：根据所述高度值，设置浏览器内核实例的高度值，并通过具有该高度值的浏览器内核实例展示所述网页。

在另一个实施例中，参见图3，本申请实施例提供了一种网页展示方法的整体流程示意图。

步骤s301：开启浏览器内核实例渲染网页，并向网页中注入适配程序。

步骤s302：通过所述适配程序，获取所述网页的高度值。

步骤s303：根据所述高度值，设置浏览器内核实例的高度值。

步骤s304：根据所述适配程序，检测所述网页中是否存在可用于对所述网页进行缩放的meta元素；其中，该meta元素的name属性的值为viewport。

步骤s305：若在所述网页中不存在所述name属性的值为viewport的meta元素，则在所述网页的head元素中插入所述meta元素，由该meta元素对所述网页进行缩放，完成对所述网页进行移动端适配的过程。

步骤s306：通过具有步骤s303中所述的高度值的浏览器内核实例展示所 述进行移动端适配后的网页。

基于上述网页展示方法，本申请实施例提供了一种网页展示系统。

参见图4，本申请实施例提供的一种网页展示系统，包括：

第一模块41，用于开启浏览器内核实例渲染网页，并获取所述网页的高度值；

第二模块42，用于根据所述网页的高度值，设置所述浏览器内核实例的高度值，并通过具有该高度值的浏览器内核实例展示所述网页。

可选地，所述第一模块41当开启浏览器内核实例渲染网页后，向所述网页中注入适配程序，由适配程序获取所述网页的高度值。

其中，所述适配程序可通过现有技术实现，例如可通过javascript(客户端脚本语言)进行编写，该适配程序用于检测网页是否针对移动端进行了适配，并在网页没有针对移动端进行适配的情况下对该网页进行移动端适配，并且，该适配程序还用于获取网页的高度值。

可选地，设置后的所述浏览器内核实例的高度值等于所述网页的高度值。

可选地，所述第一模块41在开启浏览器内核实例渲染网页之后，获取所述网页的高度值之前，还用于：

检测所述网页中是否存在可用于对所述网页进行缩放的元素；

当在所述网页中不存在所述元素时，对所述网页进行移动端适配。

可选地，所述第一模块41通过预先向网页中注入的适配程序获取所述网页的高度值。

可选地，所述元素为meta元素，所述meta元素的name属性的值为viewport。

也就是说，所述第一模块首先检测所述网页中是否存在name属性的值为viewport的meta元素，当在所述网页中存在所述name属性的值为viewport的meta元素时，则不需要对所述网页进行移动端适配，当在所述网页中不存在所述name属性的值为viewport的meta元素时，则执行 对所述网页进行移动端适配的过程。这是由于，当在网页中存在name属性的值为viewport的meta元素时，可通过该meta元素对网页进行适当的缩放，例如，可根据浏览器内核实例的宽度值，设置网页的宽度值，并根据实际情况选择是否对网页的高度值进行调整。

可选地，所述第一模块41对所述网页进行移动端适配时，具体用于：

在所述网页的head元素中插入所述meta元素，由该meta元素对所述网页进行缩放，完成对所述网页进行移动端适配的过程。

可选地，所述第一模块41通过预先向网页中注入的适配程序在所述网页的head元素中插入所述meta元素。

本发明实施例提供的一种用户设备，包括上述网页展示系统。

可选地，所述用户设备为移动终端。

本申请实施例，可通过具体的硬件处理器等实体设备实现上述各功能模块。

可选地，所述处理器例如可以是中央处埋器(cpu)、专用集成电路(applicationspecificintegratedcircuit，asic)、现场可编程门阵列(field－programmablegatearray，fpga)或复杂可编程逻辑器件(complexprogrammablelogicdevice，cpld)等。

综上所述，本申请实施例提供的网页展示的方法及系统，当需要在移动端应用中打开网页时，通过开启浏览器内核实例渲染网页，并获取所述网页的高度值，进而根据所述网页的高度值，设置所述浏览器内核实例的高度值，并通过具有该高度值的浏览器内核实例展示所述网页，从而可以避免出现两个纵向滚动域(浏览器内核实例的纵向滚动域和移动端应用当前视图的纵向滚动域)的情况，实现网页内容的滚动与移动端应用当前视图的滚动一体化的效果，提高网页展示的效果，提升用户体验。并且，通过该方法，可允许浏览器内核实例与任意的非网页内容进行混排，可扩展性更好。此外，通过对网页进行移动端适配，避免了在移动端展示网页时将网页缩得很小的情况，更加方便用户浏 览网页内容，给用户提供了更好的应用体验。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。