网页的显示处理方法及装置的制造方法
【技术领域】
[0001]本发明涉及网络技术领域，尤其涉及网页的显示处理方法及装置。
【背景技术】
[0002]随着移动互联网的快速发展，通过手机访问互联网，可以获得各种各样的信息。但是由于手机的屏幕限制，若在手机上访问较大的页面，可能需要滚动页面，以进行信息的完整阅读。现有技术中，常采用将背景图全部过滤，高度被设置为auto。通过上述处理后，虽然可以达到显示的页面适用显示屏幕进行显示的目的，但是其显示效果不佳，甚至会造成部分元素无法显示。
【发明内容】
[0003]本发明实施例的主要目的在于解决现有技术中为达到显示的页面适用显示屏幕进行显示的目的时，显示的效果不佳的技术问题。
[0004]为实现上述目的，本发明实施例提供了一种网页的显示处理方法，包括以下步骤:
[0005]接收页面显示请求，所述页面显示请求包括待显示的页面数据，且所述页面数据为web页面；
[0006]根据所述页面显示请求，对待显示的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
[0007]按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
[0008]按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得各render节点对应的元素的最终宽度。
[0009]此外，为实现上述目的，本发明实施例还提供了一种网页的显示处理装置，包括:
[0010]页面数据接收模块，用于接收页面显示请求，所述页面显示请求包括待显示的页面数据，且所述页面数据为web页面；
[0011]页面数据解析模块，用于根据所述页面显示请求，对待显示的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
[0012]样式调整模块，用于按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
[0013]宽度调整模块，用于按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得render节点对应的元素的最终宽度。
[0014]本发明实施例通过预先设置的样式规则以及宽度规则，分别对各render节点的样式及对应的元素的逻辑宽度进行调整，从而使得页面可以在显示终端的显示屏幕上自适应进行显示，不需要左右滚动页面，而且显示效果更佳。
【附图说明】
[0015]图1是本发明网页的显示处理方法所实现的终端的硬件架构示意图；
[0016]图2是本发明网页的显示处理方法的流程示意图；
[0017]图3是本发明网页的显示处理方法中根据背景图过滤规则对各render节点的样式进行调整的细化流程示意图；
[0018]图4是本发明网页的显示处理方法相关的render树的示例图；
[0019]图5是本发明网页的显示处理方法中根据高度规则对各render节点的样式进行调整的细化流程示意图；
[0020]图6是本发明相关的元素的结构示例图；
[0021]图7是本发明网页的显示处理方法中根据行高规则对各render节点的样式进行调整的细化流程示意图；
[0022]图8是本发明网页的显示处理方法中根据空格处理规则对各render节点的样式进行调整的细化流程示意图；
[0023]图9是本发明网页的显示处理方法中根据显示属性调整规则对各render节点的样式进行调整的细化流程示意图；
[0024]图10是本发明网页的显示处理方法中根据宽度规则对各render节点对应的元素的宽度进行调整的细化流程示意图；
[0025]图11是本发明相关的父亲元素与子元素的结构示例图；
[0026]图12是本发明页面的显示处理装置的功能模块示意图；
[0027]图13是本发明页面的显示处理装置中样式调整模块的细化功能模块示意图。
[0028]本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
【具体实施方式】
[0029]以下结合说明书附图及具体实施例进一步说明本发明的技术方案。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0030]本发明的核心思想是，通过预先设置页面的显示规则，当终端访问的页面的宽度大于终端屏幕的显示宽度时，利用该页面的显示规则对页面数据进行处理，以使处理后的页面的宽度适应终端屏幕的显示宽度。根据该页面的显示规则所处理的页面可以解决现有技术中直接过滤背景图而导致页面显示效果很差的技术问题。
[0031]如图1所示，本发明所运行的显示终端可包括处理器101、存储器102、用户接口103、网络接口 104、通信总线105。通信总线105用于终端中各组成部件之间的通信，用户接口 103可包括输入模块及显示模块，其中输入模块用于接收用户输入的信息，并将其发送至处理器101，以供处理器101进行相应的处理，并控制显示模块对处理结果进行显示。网络接口 104用于显示终端与外部进行互相通信，该网络接口主要包括有线接口和无线接口，例如RS232模块、射频模块、WIFI模块等等。该终端上安装有各种应用程序，例如浏览器，用户利用该浏览器，并通过网络接口可访问互联网，以获得互联网上的各种信息。例如即时通讯软件，用户利用即时通讯软件，并通过网络接口与其他用户进行信息互通。存储器102可以包括一个或一个以上计算机可读存储介质，而且其不但包括内部存储器，还包括外部存储器。该存储器中存储有操作系统、页面的显示处理系统等其他系统。处理器101则可以调用存储器102中的页面的显示处理系统，以实现页面适应显示终端的显示屏幕进行显示，且显示效果更佳，甚至不会造成页面元素的丢失。
[0032]如图2所示，基于上述终端，处理器101调用存储器102中的页面的显示处理系统，实现的页面的显示处理方法包括以下步骤:
[0033]步骤S110、接收服务器根据终端发起的页面访问请求而返回的页面数据，且所述页面数据为web页面的数据；
[0034]显示终端利用浏览器向服务器发起页面访问请求，服务器则获取要访问的页面数据，并将获取的页面数据通过页面显示请求返回至所述显示终端。显示终端则接收页面数据，并判断该页面数据是否为web页面，若是则需要对页面的显示进行处理，若不是则不做处理，对页面数据进行显示。本实施例中，该显示终端包括手机、平板电脑、ipad、掌上电脑等屏幕相对较小的终端。web页面是指用于在PC机上显示，且页面的宽度比显示终端的显示屏幕的宽度大的页面。
[0035]步骤S120、对待显示的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
[0036]对接收到的页面数据进行解析，并生成dom树和render树。其中，dom树用于描述页面的信息，render树用于设置dom树的页面布局及页面样式，以控制dom树如何显示在显示终端的屏幕上。因此，在对待显示的页面数据进行解析后生成的render树中，可以获得所有render节点的原始样式。
[0037]步骤S130、按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
[0038]本发明实施例预先设置相应的样式规则，该样式规则可包括背景图过滤规则、高度规则、行高规则、flattern规则、字体反色规则、边框空白规则、边界处理规则、空格处理规则及输入框处理规则等等。根据该预先设置的样式规则，依次获取render树的各render节点，并对各render节点的样式进行调整，待所有render节点都进行样式调整后，根据调整后的render节点样式进行控制的页面显示将满足自适应显示屏幕的要求。
[0039]步骤S140、按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得各render节点对应的元素的最终宽度。
[0040]本发明实施例预先设置相应的宽度规则，该宽度规则用于处理页面中各元素的逻辑宽度大于显示终端的屏幕宽度时，对各元素的逻辑宽度进行调整，以使得页面的显示满足自适应显示屏幕。网页由多个元素组成，该元素可包括文本、图像、动画、视频、超链接、表格、框架、表单等基本元素，当然还可包括横幅广告、字母、悬停按钮、日戳、计算器、音频、视频、Java Applet等其他元素。
[0041]本发明实施例通过预先设置的样式规则以及宽度规则，分别对各render节点的样式及对应的元素的逻辑宽度进行调整，从而使得页面可以在显示终端的显示屏幕上自适应进行显示，不需要左右滚动页面，而且显示效果更佳，甚至不会造成页面元素的丢失。
[0042]以下将对不同的样式规则的样式调整过程进行具体的描述。
[0043](一)背景图过滤规则
[0044]依次获得每个render节点的样式,其中包括当前render节点的属性及属性值、该render节点的元素类型等等。然后按照预设背景图规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要清除背景图,若当前render节点的样式中需要清除背景图，则清除所述当前render节点的背景图。