CN105389308B - 网页的显示处理方法及装置 - Google Patents
网页的显示处理方法及装置 Download PDFInfo
- Publication number
- CN105389308B CN105389308B CN201410409972.6A CN201410409972A CN105389308B CN 105389308 B CN105389308 B CN 105389308B CN 201410409972 A CN201410409972 A CN 201410409972A CN 105389308 B CN105389308 B CN 105389308B
- Authority
- CN
- China
- Prior art keywords
- render node
- style
- node
- current render
- current
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开一种网页的显示处理方法，包括：接收服务器根据终端发起的页面访问请求而返回的页面数据，且所述页面数据为web页面的数据；对接收到的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得render节点对应的元素的最终宽度。本发明还公开一种网页的显示处理装置。本发明不但使得页面可以在显示终端的显示屏幕上自适应进行显示，不需要左右滚动页面，而且显示效果更佳。
Description
技术领域
本发明涉及网络技术领域，尤其涉及网页的显示处理方法及装置。
背景技术
随着移动互联网的快速发展，通过手机访问互联网，可以获得各种各样的信息。但是由于手机的屏幕限制，若在手机上访问较大的页面，可能需要滚动页面，以进行信息的完整阅读。现有技术中，常采用将背景图全部过滤，高度被设置为auto。通过上述处理后，虽然可以达到显示的页面适用显示屏幕进行显示的目的，但是其显示效果不佳，甚至会造成部分元素无法显示。
发明内容
本发明实施例的主要目的在于解决现有技术中为达到显示的页面适用显示屏幕进行显示的目的时，显示的效果不佳的技术问题。
为实现上述目的，本发明实施例提供了一种网页的显示处理方法，包括以下步骤：
接收页面显示请求，所述页面显示请求包括待显示的页面数据，且所述页面数据为web页面；
根据所述页面显示请求，对待显示的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得各render节点对应的元素的最终宽度。
此外，为实现上述目的，本发明实施例还提供了一种网页的显示处理装置，包括：
页面数据接收模块，用于接收页面显示请求，所述页面显示请求包括待显示的页面数据，且所述页面数据为web页面；
页面数据解析模块，用于根据所述页面显示请求，对待显示的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
样式调整模块，用于按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
宽度调整模块，用于按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得render节点对应的元素的最终宽度。
本发明实施例通过预先设置的样式规则以及宽度规则，分别对各render节点的样式及对应的元素的逻辑宽度进行调整，从而使得页面可以在显示终端的显示屏幕上自适应进行显示，不需要左右滚动页面，而且显示效果更佳。
附图说明
图1是本发明网页的显示处理方法所实现的终端的硬件架构示意图；
图2是本发明网页的显示处理方法的流程示意图；
图3是本发明网页的显示处理方法中根据背景图过滤规则对各render节点的样式进行调整的细化流程示意图；
图4是本发明网页的显示处理方法相关的render树的示例图；
图5是本发明网页的显示处理方法中根据高度规则对各render节点的样式进行调整的细化流程示意图；
图6是本发明相关的元素的结构示例图；
图7是本发明网页的显示处理方法中根据行高规则对各render节点的样式进行调整的细化流程示意图；
图8是本发明网页的显示处理方法中根据空格处理规则对各render节点的样式进行调整的细化流程示意图；
图9是本发明网页的显示处理方法中根据显示属性调整规则对各render节点的样式进行调整的细化流程示意图；
图10是本发明网页的显示处理方法中根据宽度规则对各render节点对应的元素的宽度进行调整的细化流程示意图；
图11是本发明相关的父亲元素与子元素的结构示例图；
图12是本发明页面的显示处理装置的功能模块示意图；
图13是本发明页面的显示处理装置中样式调整模块的细化功能模块示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
以下结合说明书附图及具体实施例进一步说明本发明的技术方案。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
本发明的核心思想是，通过预先设置页面的显示规则，当终端访问的页面的宽度大于终端屏幕的显示宽度时，利用该页面的显示规则对页面数据进行处理，以使处理后的页面的宽度适应终端屏幕的显示宽度。根据该页面的显示规则所处理的页面可以解决现有技术中直接过滤背景图而导致页面显示效果很差的技术问题。
如图1所示，本发明所运行的显示终端可包括处理器101、存储器102、用户接口103、网络接口104、通信总线105。通信总线105用于终端中各组成部件之间的通信，用户接口103可包括输入模块及显示模块，其中输入模块用于接收用户输入的信息，并将其发送至处理器101，以供处理器101进行相应的处理，并控制显示模块对处理结果进行显示。网络接口104用于显示终端与外部进行互相通信，该网络接口主要包括有线接口和无线接口，例如RS232模块、射频模块、WIFI模块等等。该终端上安装有各种应用程序，例如浏览器，用户利用该浏览器，并通过网络接口可访问互联网，以获得互联网上的各种信息。例如即时通讯软件，用户利用即时通讯软件，并通过网络接口与其他用户进行信息互通。存储器102可以包括一个或一个以上计算机可读存储介质，而且其不但包括内部存储器，还包括外部存储器。该存储器中存储有操作系统、页面的显示处理系统等其他系统。处理器101则可以调用存储器102中的页面的显示处理系统，以实现页面适应显示终端的显示屏幕进行显示，且显示效果更佳，甚至不会造成页面元素的丢失。
如图2所示，基于上述终端，处理器101调用存储器102中的页面的显示处理系统，实现的页面的显示处理方法包括以下步骤：
步骤S110、接收服务器根据终端发起的页面访问请求而返回的页面数据，且所述页面数据为web页面的数据；
显示终端利用浏览器向服务器发起页面访问请求，服务器则获取要访问的页面数据，并将获取的页面数据通过页面显示请求返回至所述显示终端。显示终端则接收页面数据，并判断该页面数据是否为web页面，若是则需要对页面的显示进行处理，若不是则不做处理，对页面数据进行显示。本实施例中，该显示终端包括手机、平板电脑、ipad、掌上电脑等屏幕相对较小的终端。web页面是指用于在PC机上显示，且页面的宽度比显示终端的显示屏幕的宽度大的页面。
步骤S120、对待显示的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
对接收到的页面数据进行解析，并生成dom树和render树。其中，dom树用于描述页面的信息，render树用于设置dom树的页面布局及页面样式，以控制dom树如何显示在显示终端的屏幕上。因此，在对待显示的页面数据进行解析后生成的render树中，可以获得所有render节点的原始样式。
步骤S130、按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
本发明实施例预先设置相应的样式规则，该样式规则可包括背景图过滤规则、高度规则、行高规则、flattern规则、字体反色规则、边框空白规则、边界处理规则、空格处理规则及输入框处理规则等等。根据该预先设置的样式规则，依次获取render树的各render节点，并对各render节点的样式进行调整，待所有render节点都进行样式调整后，根据调整后的render节点样式进行控制的页面显示将满足自适应显示屏幕的要求。
步骤S140、按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得各render节点对应的元素的最终宽度。
本发明实施例预先设置相应的宽度规则，该宽度规则用于处理页面中各元素的逻辑宽度大于显示终端的屏幕宽度时，对各元素的逻辑宽度进行调整，以使得页面的显示满足自适应显示屏幕。网页由多个元素组成，该元素可包括文本、图像、动画、视频、超链接、表格、框架、表单等基本元素，当然还可包括横幅广告、字母、悬停按钮、日戳、计算器、音频、视频、Java Applet等其他元素。
本发明实施例通过预先设置的样式规则以及宽度规则，分别对各render节点的样式及对应的元素的逻辑宽度进行调整，从而使得页面可以在显示终端的显示屏幕上自适应进行显示，不需要左右滚动页面，而且显示效果更佳，甚至不会造成页面元素的丢失。
以下将对不同的样式规则的样式调整过程进行具体的描述。
(一)背景图过滤规则
依次获得每个render节点的样式，其中包括当前render节点的属性及属性值、该render节点的元素类型等等。然后按照预设背景图规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要清除背景图，若当前render节点的样式中需要清除背景图，则清除所述当前render节点的背景图。
如图3所示，具体的背景图过滤过程可包括：
步骤S201、判断当前render节点的属性text-indent是否小于零；当属性text-indent小于零时，转入步骤S202，否则转入步骤S203；
遍历render树上的每个render节点的样式属性，获取当前render节点的属性text-indent的值，并判断text-indent的值是否小于零。其中属性text-indent表示离左边界的距离。
步骤S202、清除所述当前render节点的父亲链上所有render节点的背景图；
当当前render节点的属性text-indent小于零时，清除当前render节点的父亲链的背景图。如图4所示，该render树包括6个render节点，其中节点1为根节点。若当前render节点为节点4，且该节点4的属性text-indent<0，则找到该节点4的父亲链，即节点1-节点2-节点4，然后将该父亲链上所有节点的背景图清除，具体为，设置父亲链上所有节点的图片的高度和宽度均为零。
步骤S203、当所述当前render节点的属性display为block或table，且所述当前render节点有背景图且没有被清除，清除所述当前render节点的背景图；
当所述当前render节点的属性text-indent大于或等于零时，则判断当前render节点的属性display是否为block或table，是则判断当前render节点是否有背景图且没有被清除，否则不做处理。具体为：根据render节点的样式中的属性hasBackgroundImage的值来判断是否有背景图。同时还将增加是否被清除的标记。例如，标记为0，则该背景图没有被清除，标记为1，则该背景图被清除。当当前render节点有背景图且没有被清除时，则清除当前render节点的图片的高度和宽度均为零。
进一步地，上述背景图过滤过程还可包括：
步骤S204、当所述当前render节点对应的元素为inline元素时，判断所述当前render节点是否有背景图或者render节点的背景图没有被清除；当所述当前render节点有背景图或者所述当前render节点的背景图没有被清除时，转入步骤S205，否则转入步骤S206；
步骤S205、设置所述当前render节点的属性text-indent＝0；
步骤S206、当所述当前render节点的父亲节点的属性text-indent小于零时，设置所述当前render节点的属性text-indent＝0。
当当前render节点的父亲节点的属性text-indent大于或等于零时，不做处理。
(二)高度规则
依次获得每个render节点的样式，其中包括当前render节点的属性及属性值、该render节点的元素类型等等。然后按照预设的高度规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行高度调整，若当前render节点的样式中需要进行高度调整，则进行相应的高度调整。
如图5所示，具体的高度调整过程可包括：
步骤S301、判断所述当前render节点对应的元素为inline元素或者所述当前render节点对应的标签为img、button、input或i标签；是则转入步骤S302，否则转入步骤S307；
步骤S302、设置所述当前render节点对应的元素的高度为最小高度；
该最小高度是指元素高度的最低限制值。
步骤S303、当所述当前render节点的父亲节点的属性line-Height大于零时，清除所述当前render节点的父亲链上所有render节点对应的元素的高度；
获取当前render节点的父亲节点的属性line-Height是否大于零。正常情况下，该父亲节点的属性line-Height是大于或等于零，但是有网页开发者，为了显示图片而不显示文字，会把line-Height设置为小于零。因此在判断当前render节点的父亲节点的属性line-Height大于零时，清除所述当前render节点的父亲链的高度。具体为，将父亲链上所有节点的对应的元素的高度设置为auto。如图3所示，该render树包括6个render节点，其中节点1为根节点。若当前render节点为节点4，且该节点4的父亲节点(也就是节点2)的属性line-height>0，则找到该节点4的父亲链，即节点1-节点2-节点4，然后将该父亲链上所有节点对应的元素的高度设置为auto。
步骤S304、判断所述当前render节点对应的元素的逻辑宽度是否小于显示终端的屏幕宽度或者所述当前render节点对应的标签是否为img标签；是则转入步骤S305，否则转入步骤S306；
如图6所示，页面的元素可由盒模型表示，其中该元素在页面中所占的宽度则为逻辑宽度，由左边界的宽度(margin-left width)+左边框的宽度(border-left width)+左边框留空白的宽度(padding-left width)+元素内容的宽度+左边框留空白的宽度(padding-right width)+左边框的宽度(border-right width)+右边界的宽度(margin-rightwidth)组成。因此，先获取当前render节点对应的元素各个部分的宽度(margin-leftwidth、border-left width、padding-left width、width、margin-right width、border-right width、padding-right width)，然后计算获得该元素的逻辑宽度。
当所计算的元素的逻辑宽度大于显示终端的屏幕宽度，则设置该元素的高度为auto，即该高度将随元素的内容调整而变化。例如当该元素的逻辑宽度大于显示终端的屏幕宽度，则该元素的内容无法完全显示在显示终端的显示区域，此时则可以将该元素无法显示在显示终端的显示区域的内容显示在下一行，从而将增加元素的高度。当所计算的元素的逻辑宽度小于显示终端的屏幕宽度，则不做处理。
步骤S305、判断当前render节点对应的标签是否为img标签且当前render节点对应的元素的高度为零，或者当前render节点对应的元素为float元素；是则转入步骤S306；否则不做处理；
步骤S306、设置当前render节点对应的元素的高度为auto；
步骤S307、设置当前render节点对应的元素的最大高度和最小高度为auto；
步骤S308、当当前render节点对应的标签为dl或者li标签时，若当前render节点对应的元素的高度为fixed，设置当前render节点对应的元素的高度为auto，然后清除所述当前render节点的父亲链上所有render节点对应的元素的高度；
当当前render节点对应的标签为dl、li标签，且所述当前render节点对应的元素的属性line-height为fixed，则设置当前render节点对应的元素的高度为auto，即该元素的高度可以随实际的内容进行调整。然后，再清除当前render节点的父亲链的高度，具体为，将父亲链上所有节点对应的元素的高度设置为auto。
步骤S309、，清除所述当前render节点的父亲链上所有render节点对应的元素的高度。
具体为：根据render节点的样式中的属性hasBackgroundImage的值来判断是否有背景图。同时还将增加是否被清除的标记。例如，标记为0，则该背景图没有被清除，标记为1，则该背景图被清除。因此，当当前render节点有背景图且没有被清除时，将父亲链上所有节点对应的元素的高度设置为auto。
(三)行高规则
依次获得每个render节点的样式；其中包括当前render节点的属性及属性值、该render节点的元素类型等等。然后按照预设的行高规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行行高调整，若当前render节点的样式中需要进行行高调整，则进行相应的行高调整。
如图7所示，具体的行高调整过程可包括：
步骤S401、当所述当前render节点对应的元素为inline元素，或者所述当前render节点对应的标签为img、button标签时，设置属性line-height为120％；
步骤S402、当所述当前render节点的属性line-height的值继承自所述当前render节点的父亲节点，且为固定值，则设置所述当前render节点的父亲链上所有render节点的属性line-height均为120％；
当当前render节点的父亲节点的属性line-height>0，且当前render节点的属性line-height不为零时，表示当前render节点的属性line-height的值继承自所述当前render节点的父亲节点。而且，当当前render节点的属性line-height的值为固定值时，设置所述当前render节点的父亲链上所有render节点的属性line-height均为120％。
步骤S403、当所述当前render节点的背景图被清除，且属性line-height的值大于90％，则设置属性line-height为120％；
判断当前render节点的背景图是否被清除，当当前render节点的背景图未被清除，则不做处理。当当前render节点的背景图被清除，且当前render节点的属性line-height的值大于90％时，设置属性line-height为120％。
步骤S404、当所述当前render节点的属性line-height的值为固定值，且所述当前render节点对应的元素为inline元素时，则设置当前render节点的属性line-height为140％。
(四)flattern规则
当预设的样式规则包括flattern规则时，根据flattern规则调节render节点对应的样式时，具体包括：
当所述当前render节点对应的元素为iframe元素时，对iframe元素进行flattern(平坦化)处理，以使iframe中的内容全部展示出来。
(五)字体反色规则
当预设的样式规则包括字体反色规则时，根据字体反色规则调节render节点对应的样式时，具体包括：
对当前render节点的文字属性进行反色处理。
由于背景图被过滤，因此需要对当前render节点的文字属性进行反色处理，以使文字在显示终端的显示屏幕上显示。
(六)边框空白规则
当预设的样式规则包括边框空白规则时，根据边框空白规则调节render节点对应的样式时，具体包括：
当所述当前render节点的属性padding的值大于一预设阈值时，将所述当前render节点的属性padding的值设置为3-5像素。
(七)边界处理规则
当预设的样式规则包括边界处理规则时，根据边界处理规则调节render节点对应的样式时，具体包括：
当所述当前render节点的属性margin的值大于一预设阈值时，将所述当前render节点的属性margin的值设置为3-5像素。
(八)空格处理规则
如图8所示，当预设的样式规则包括空格处理规则时，根据空格处理规则调节render节点对应的样式时，具体包括：
步骤S501、当所述当前render节点对应的元素的宽度及高度均为1像素，则设置属性display为none；
步骤S502、当属性visibility为hidden，则设置当前render节点属性display为none；
步骤S503、当iframe元素中没有内容，则设置当前render节点属性display为none。
(九)显示属性调整规则
如图9所示，当预设的样式规则包括显示属性调整规则时，根据显示属性调整规则调节render节点对应的样式时，具体包括：
步骤S601、当所述当前render节点对应的标签为table、tbody、tfoot、tr、th标签，且属性display不为none时，设置当前render节点属性dsplay为block；
步骤S602、当所述当前render节点对应的标签为td标签，且属性display不为none时，设置当前render节点属性dsplay为inline_block。
(十)输入框显示规则
当预设的样式规则包括输入框显示规则时，根据输入框显示规则调节render节点对应的样式时，具体包括：
当所述当前render节点对应的标签为input，即当前render节点对应的元素为输入框，则对该render节点的边框宽度、样式、颜色和圆角矩形进行相应的调整。
进一步地，如图10所示，上述步骤S140可包括：
步骤S141、计算元素的最大允许宽度；
由于子元素的盒模型位于父亲元素的盒模型内，因此，计算当前render节点对应的元素的最大允许宽度时，将结合当前render节点的父亲节点对应的宽度来计算。具体为：如图11所示，最大允许宽度为父亲节点对应的宽度-margin的宽度-padding的宽度-border的宽度之后的宽度。
步骤S142、当所述当前render节点对应元素为inline元素，且标签为img标签、有背景图且未被清除，且当前render节点对应元素的逻辑宽度大于所述最大允许宽度时，设置当前render节点对应元素的逻辑宽度为所述最大允许宽度；
步骤S143、当所述当前render节点对应元素为float元素，且所述当前render节点为右float，所述当前render节点的兄弟节点为左float时，重新计算当前render节点对应元素的最大允许宽度；
步骤S144、当重新计算的最大允许宽度小于150像素或者所述当前render节点对应元素为line元素时，设置当前render节点对应元素的逻辑宽度为元素的逻辑宽度与最大允许宽度中较小的值。
对应方法实施例，本发明还提供了一种网页的显示处理装置，如图12所示，该网页的显示处理装置包括：
页面数据接收模块110，用于接收服务器根据终端发起的页面访问请求而返回的页面数据，且所述页面数据为web页面的数据；
页面数据解析模块120，用于对接收到的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
样式调整模块130，用于按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
宽度调整模块140，用于按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得render节点对应的元素的最终宽度。
本发明实施例通过预先设置的样式规则以及宽度规则，分别对各render节点的样式及对应的元素的逻辑宽度进行调整，从而使得页面可以在显示终端的显示屏幕上自适应进行显示，不需要左右滚动页面，而且显示效果更佳，甚至不会造成页面元素的丢失。
进一步地，预设的样式规则可包括背景图过滤规则、高度规则、行高规则、flattern规则、字体反色规则、边框空白规则、边界处理规则、空格处理规则及输入框处理规则等等。因此，如图13所示，上述样式调整模块130可包括：背景图过滤子模块131、高度调整子模块132、行高调整子模块133、flattern处理子模块134、字体反色处理模块135、边框空白处理子模块136、边界处理子模块137、空格处理子模块138、显示属性调整子模块139。以下将对各样式调整子模块根据相应的样式规则进行样式调整的过程一一描述。
上述背景图过滤子模块131用于：
判断当前render节点的属性text-indent是否小于零；
当所述当前render节点的属性text-indent小于零时，清除所述当前render节点的父亲链上所有render节点的背景图；
当所述当前render节点的属性text-indent大于或等于零，且所述当前render节点的属性display为block或table时，判断所述当前render节点是否有背景图且没有被清除；
当所述当前render节点有背景图且没有被清除时，清除所述当前render节点的背景图。
进一步地，上述背景图过滤子模块131还用于：
当所述当前render节点对应的元素为inline元素时，判断所述当前render节点是否有背景图或者render节点的背景图没有被清除；
当所述当前render节点有背景图或者所述当前render节点的背景图没有被清除时，设置所述当前render节点的样式属性text-indent＝0；
当所述当前render节点没有背景图、且所述当前render节点的背景图被清除时，判断所述当前render节点的父亲节点的样式属性text-indent是否小于零；
当所述当前render节点的父亲节点的样式属性text-indent小于零时，设置所述当前render节点的样式属性text-indent＝0。
上述高度调整子模块132用于：
当所述当前render节点对应的元素为inline元素或者所述当前render节点对应的标签为img、button、input、i标签时，设置所述当前render节点对应的元素的高度为最小高度；
当所述当前render节点的父亲节点的属性line-Height大于零时，清除所述当前render节点的父亲链的高度；
当所述当前render节点对应的标签为dl、li标签，且所述当前render节点对应的元素的高度为固定值时，设置元素高度为auto，并清除所述当前render节点的父亲链上所有render节点对应的元素的高度；
当所述当前render节点没有背景图或者背景图被清除时，清除所述当前render节点的父亲链上所有render节点对应的元素的高度。
进一步地，上述高度调整子模块132还用于：
当所述当前render节点对应的元素的逻辑宽度大于零且小于显示终端的屏幕宽度时，设置当前render节点对应的元素高度为auto；
当所述当前render节点对应的标签为img标签，且元素高度为零或者所述当前render节点对应的元素为float元素时，设置当前render节点对应的元素高度为auto；
当所述当前render节点对应的元素的逻辑宽度大于显示终端的屏幕宽度，且所述当前render节点对应的标签不是img标签时，设置当前render节点对应的元素高度为auto。
上述行高调整子模块133用于：
当所述当前render节点对应的元素为inline元素，或者所述当前render节点对应的标签为img、button标签时，设置属性line-height为120％；
当所述当前render节点的属性line-height的值继承自所述当前render节点的父亲节点，且为固定值，则设置所述当前render节点的父亲链上所有render节点的属性line-height均为120％；
当所述当前render节点的背景图被清除，且高度大于90％，则设置当前render节点属性line-height为120％；
当所述当前render节点的属性line-height的值为固定值，且所述当前render节点对应的元素为inline元素时，则设置当前render节点属性line-height为140％。
上述flattern处理子模块134用于：所述当前render节点对应的元素为iframe元素时，对iframe元素进行flattern处理。
上述字体反色处理模块135用于：对当前render节点的文字属性进行反色处理。
上述边框空白处理子模块136用于：当所述当前render节点的属性padding的值大于一预设阈值时，将所述当前render节点的属性padding的值设置为3-5像素。
上述边界处理子模块137用于：当所述当前render节点的属性margin的值大于一预设阈值时，将所述当前render节点的属性margin的值设置为3-5像素。
上述空格处理子模块138用于：
当所述当前render节点对应的元素的宽度及高度均为1像素，则设置属性display为none；
当属性visibility为hidden，则设置当前render节点属性display为none；
当iframe元素中没有内容，则设置当前render节点属性display为none。
上述显示属性调整子模块139，用于：
当所述当前render节点对应的标签为table、tbody、tfoot、tr、th标签，且属性display不为none时，设置当前render节点属性dsplay为block；
当所述当前render节点对应的标签为td标签，且属性display不为none时，设置当前render节点属性dsplay为inline_block。
进一步地，所述宽度调整模块140用于：
计算元素的最大允许宽度；
当所述当前render节点对应元素为inline元素，且标签为img标签、有背景图且未被清除，且当前render节点对应元素的逻辑宽度大于所述最大允许宽度时，设置当前render节点对应元素的逻辑宽度为所述最大允许宽度；
当所述当前render节点对应元素为float元素，且所述当前render节点为右float，所述当前render节点的兄弟节点为左float时，重新计算当前render节点对应元素的最大允许宽度；
当重新计算的最大允许宽度小于150像素或者所述当前render节点对应元素为line元素时，设置当前render节点对应元素的逻辑宽度为元素的逻辑宽度与最大允许宽度中较小的值。
以上所述仅为本发明的优选实施例，并非因此限制其专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (17)
1.一种网页的显示处理方法，其特征在于，包括以下步骤：
接收服务器根据终端发起的页面访问请求而返回的页面数据，且所述页面数据为web页面的数据；
对接收到的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得各render节点对应的元素的最终宽度；
所述预设的样式规则包括背景图规则；按照预设样式规则，对所述render节点的样式进行调整，获得render节点最终的样式包括：
依次获得每个render节点的样式；
判断当前render节点的属性text-indent是否小于零；
当所述当前render节点的属性text-indent小于零时，清除所述当前render节点的父亲链的背景图；
当所述当前render节点的属性text-indent大于或等于零，且所述当前render节点的属性display为block或table时，判断所述当前render节点是否有背景图且没有被清除；
当所述当前render节点有背景图且没有被清除时，清除所述当前render节点的背景图。
2.如权利要求1所述的网页的显示处理方法，其特征在于，按照预设的背景图规则，对当前render节点的属性进行判断，确定当前render节点的样式中是否需要清除背景图，若当前render节点的样式中需要清除背景图，则清除所述当前render节点的背景图还包括：
当所述当前render节点对应的元素为inline元素时，判断所述当前render节点是否有背景图或者render节点的背景图没有被清除；
当所述当前render节点有背景图或者所述当前render节点的背景图没有被清除时，设置所述当前render节点的样式属性text-indent＝0；
当所述当前render节点没有背景图、且所述当前render节点的背景图被清除时，判断所述当前render节点的父亲节点的样式属性text-indent是否小于零；
当所述当前render节点的父亲节点的样式属性text-indent小于零时，设置所述当前render节点的样式属性text-indent＝0。
3.如权利要求1所述的网页的显示处理方法，其特征在于，所述预设的样式规则还包括高度规则，按照预设的样式规则，对所述render节点的样式进行调整，获得render节点最终的样式还包括：
依次获得每个render节点的样式；
按照预设的高度规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行高度调整，若当前render节点的样式中需要进行高度调整，则进行相应的高度调整。
4.如权利要求3所述的网页的显示处理方法，其特征在于，所述按照预设的高度规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行高度调整，若当前render节点的样式中需要进行高度调整，则进行相应的高度调整包括：
当当前render节点对应的元素为inline元素或者所述当前render节点对应的标签为img、button、input、i标签时，设置所述当前render节点对应的元素的高度为最小高度；
当所述当前render节点的父亲节点的属性line-height大于零时，清除所述当前render节点的父亲链上所有render节点对应的元素的高度；
当所述当前render节点对应的标签为dl、li标签，且所述当前render节点对应的元素的高度为固定值时，设置元素高度为auto，并清除所述当前render节点的父亲链上所有render节点对应的元素的高度；
当所述当前render节点没有背景图或者背景图被清除时，清除所述当前render节点的父亲链上所有render节点对应的元素的高度。
5.如权利要求4所述的网页的显示处理方法，其特征在于，所述按照预设的高度规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行高度调整，若当前render节点的样式中需要进行高度调整，则进行相应的高度调整还包括：
当当前render节点对应的元素的逻辑宽度大于零且小于显示终端的屏幕宽度时，设置元素高度为auto；
当所述当前render节点对应的标签为img标签，且元素高度为零或者所述当前render节点对应的元素为float元素时，设置当前render节点对应的元素高度为auto；
当所述当前render节点对应的元素的逻辑宽度大于显示终端的屏幕宽度，且所述当前render节点对应的标签不是img标签时，设置当前render节点对应的元素高度为auto。
6.如权利要求1所述的网页的显示处理方法，其特征在于，所述预设的样式规则还包括行高规则，按照预设的样式规则，对所述render节点的样式进行调整，获得render节点最终的样式还包括：
依次获得每个render节点的样式；
按照预设的行高规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行行高调整，若当前render节点的样式中需要进行行高调整，则进行相应的行高调整。
7.如权利要求6所述的网页的显示处理方法，其特征在于，所述按照预设的行高规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行行高调整，若当前render节点的样式中需要进行行高调整，则进行相应的行高调整包括：
当当前render节点对应的元素为inline元素，或者所述当前render节点对应的标签为img、button标签时，设置属性line-height为120％；
当所述当前render节点的属性line-height的值继承自所述当前render节点的父亲节点，且为固定值，则设置所述当前render节点的父亲链上所有render节点的属性line-height均为120％；
当所述当前render节点的背景图被清除，且高度大于90％，则设置所述当前render节点属性line-height为120％；
当所述当前render节点的属性line-height的值为固定值，且所述当前render节点对应的元素为inline元素时，则设置所述当前render节点属性line-height为140％。
8.如权利要求1所述的网页的显示处理方法，其特征在于，所述预设的样式规则还包括字体反色规则，按照预设的样式规则，对所述render节点的样式进行调整，获得render节点最终的样式还包括：
对当前render节点的文字属性进行反色处理。
9.如权利要求1所述的网页的显示处理方法，其特征在于，所述预设的样式规则还包括边框空白规则，按照预设的样式规则，对所述render节点的样式进行调整，获得render节点最终的样式还包括：
当当前render节点的属性padding的值大于一预设阈值时，将所述当前render节点的属性padding的值设置为3-5像素。
10.如权利要求1所述的网页的显示处理方法，其特征在于，所述预设的样式规则还包括边界处理规则，按照预设的样式规则，对所述render节点的样式进行调整，获得render节点最终的样式还包括：
当当前render节点的属性margin的值大于一预设阈值时，将所述当前render节点的属性margin的值设置为3-5像素。
11.如权利要求1所述的网页的显示处理方法，其特征在于，所述预设的样式规则还包括空格处理规则，按照预设的样式规则，对所述render节点的样式进行调整，获得render节点最终的样式还包括：
当当前render节点对应的元素的宽度及高度均为1像素，则设置当前render节点的属性display为none；
当属性visibility为hidden，则设置当前render节点的属性display为none；
当当前render节点对应的元素为，且iframe元素中没有内容时，则设置当前render节点的属性display为none。
12.如权利要求1-11任一项所述的网页的显示处理方法，其特征在于，按照预设的宽度规则，对待显示的页面数据中各元素的宽度进行调整，获得各元素的最终宽度包括：
计算元素的最大允许宽度；
当当前render节点对应元素为inline元素，且标签为img标签、有背景图且未被清除，且元素的逻辑宽度大于所述最大允许宽度时，设置元素的逻辑宽度为所述最大允许宽度；
当所述当前render节点对应元素为float元素，且所述当前render节点为右float，所述当前render节点的兄弟节点为左float时，重新计算当前render节点对应的元素的最大允许宽度；
当重新计算的最大允许宽度小于150像素或者所述当前render节点对应元素为line元素时，设置当前render节点对应的元素的逻辑宽度为元素的逻辑宽度与最大允许宽度中较小的值。
13.一种网页的显示处理装置，其特征在于，包括：
页面数据接收模块，用于接收服务器根据终端发起的页面访问请求而返回的页面数据，且所述页面数据为web页面的数据；
页面数据解析模块，用于对接收到的页面数据进行解析，并生成render树，同时获得所述render树中所有render节点的样式；
样式调整模块，用于按照预设的样式规则，对各render节点的样式进行调整，获得各render节点最终的样式；
宽度调整模块，用于按照预设的宽度规则，对各render节点对应的元素的宽度进行调整，获得render节点对应的元素的最终宽度；
所述预设的样式规则包括背景图过滤规则，所述样式调整模块包括背景图过滤子模块，用于：依次获得每个render节点的样式；
判断当前render节点的属性text-indent是否小于零；
当所述当前render节点的属性text-indent小于零时，清除所述当前render节点的父亲链的背景图；
当所述当前render节点的属性text-indent大于或等于零，且所述当前render节点的属性display为block或table时，判断所述当前render节点是否有背景图且没有被清除；
当所述当前render节点有背景图且没有被清除时，清除所述当前render节点的背景图。
14.如权利要求13所述的网页的显示处理装置，其特征在于，所述预设的样式规则还包括高度规则，所述样式调整模块还包括高度调整子模块，用于：依次获得每个render节点的样式；按照预设的高度规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行高度调整，若当前render节点的样式中需要进行高度调整，则进行相应的高度调整。
15.如权利要求13所述的网页的显示处理装置，其特征在于，所述预设的样式规则还包括行高规则，所述样式调整模块还包括行高调整子模块，用于：依次获得每个render节点的样式；按照预设的行高规则，对当前render节点的样式进行判断，确定当前render节点的样式中是否需要进行行高调整，若当前render节点的样式中需要进行行高调整，则进行相应的行高调整。
16.如权利要求13-15任一项所述的网页的显示处理装置，其特征在于，所述宽度调整模块用于：
计算元素的最大允许宽度；
当当前render节点对应元素为inline元素，且标签为img标签、有背景图且未被清除，且元素的逻辑宽度大于所述最大允许宽度时，设置元素的逻辑宽度为所述最大允许宽度；
当所述当前render节点对应元素为float元素，且所述当前render节点为右float，所述当前render节点的兄弟节点为左float时，重新计算当前render节点对应的元素的最大允许宽度；
当重新计算的最大允许宽度小于150像素或者所述当前render节点对应元素为line元素时，设置元素的逻辑宽度为元素的逻辑宽度与最大允许宽度中较小的值。
17.一种存储介质，其特征在于，所述存储介质中存储有计算机可执行指令，所述计算机可执行指令被处理器加载并执行时，实现如上权利要求1至12任一项所述的网页的显示处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410409972.6A CN105389308B (zh) | 2014-08-18 | 2014-08-18 | 网页的显示处理方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410409972.6A CN105389308B (zh) | 2014-08-18 | 2014-08-18 | 网页的显示处理方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105389308A CN105389308A (zh) | 2016-03-09 |
| CN105389308B true CN105389308B (zh) | 2020-02-07 |
Family
ID=55421605
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410409972.6A Active CN105389308B (zh) | 2014-08-18 | 2014-08-18 | 网页的显示处理方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105389308B (zh) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107390980A (zh) * | 2016-05-16 | 2017-11-24 | 中兴通讯股份有限公司 | 菜单显示方法及装置 |
| CN106339437A (zh) * | 2016-08-19 | 2017-01-18 | 合网络技术（北京）有限公司 | 浏览器的显示方法及装置 |
| CN108153663B (zh) * | 2016-12-02 | 2022-02-18 | 阿里巴巴集团控股有限公司 | 页面数据处理方法及装置 |
| CN114036432A (zh) * | 2022-01-11 | 2022-02-11 | 山东捷瑞数字科技股份有限公司 | 一种终端图片展示方法及系统 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102663126A (zh) * | 2012-04-23 | 2012-09-12 | 奇智软件（北京）有限公司 | 一种在移动终端中显示网页的方法及装置 |
| CN102779167A (zh) * | 2012-06-21 | 2012-11-14 | 北京奇虎科技有限公司 | 在移动终端中显示网页的方法及系统 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1229743C (zh) * | 2002-08-22 | 2005-11-30 | 联想(北京)有限公司 | 低分辨率显示设备及其控制浏览器显示网页的方法 |
| CN101833586A (zh) * | 2010-05-26 | 2010-09-15 | 卓望数码技术（深圳）有限公司 | 一种html小屏幕自适应排版方法及排版服务器 |
-
2014
- 2014-08-18 CN CN201410409972.6A patent/CN105389308B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102663126A (zh) * | 2012-04-23 | 2012-09-12 | 奇智软件（北京）有限公司 | 一种在移动终端中显示网页的方法及装置 |
| CN102779167A (zh) * | 2012-06-21 | 2012-11-14 | 北京奇虎科技有限公司 | 在移动终端中显示网页的方法及系统 |
Non-Patent Citations (2)
| Title |
|---|
| DIV+CSS网页错位原因解决方法;DIVCSS5;《http_www.divcss5.com_css-hack_c397.shtml》;20130205;第1-3页 * |
| text-indent_-9999px 字体隐藏问题;cherie;《https_www.cnblogs.com_qiaocheng_archive_2012_06_14_2549769.html》;20120614;第1-3页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105389308A (zh) | 2016-03-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9111007B2 (en) | Adaptive rendering of a webpage on an electronic display device | |
| US11455460B2 (en) | Method for displaying handwritten note in electronic book, electronic device and computer storage medium | |
| CN107256259B (zh) | 页面显示方法、装置、电子设备以及存储介质 | |
| CN101937428B (zh) | 移动终端设备的带文字内容的图片的重新排版方法及系统 | |
| US10504258B2 (en) | Information processing device editing map acquired from server | |
| CN104834637B (zh) | 网页图片展示方法及装置 | |
| CN105389308B (zh) | 网页的显示处理方法及装置 | |
| CN111476852B (zh) | 阅读器刷新方法、计算设备及计算机存储介质 | |
| CN110598140A (zh) | 页面调整方法、装置及服务器 | |
| CN113190781A (zh) | 页面布局方法、装置、设备及存储介质 | |
| KR20200104899A (ko) | 디지털 컴포넌트 배경 렌더링 | |
| CN115237522A (zh) | 页面自适应展示方法及装置 | |
| WO2018130069A1 (zh) | 图集内容承载页生成方法、装置、计算设备以及存储介质 | |
| CN111223155A (zh) | 图像数据处理方法、装置、计算机设备和存储介质 | |
| CN107608733B (zh) | 图片显示方法、装置和终端设备 | |
| CN113762235A (zh) | 检测页面叠加区域的方法和装置 | |
| CN111767492B (zh) | 图片加载方法、装置、计算机设备及存储介质 | |
| CN108874373B (zh) | 向网页内插入信息的方法及装置、显示终端及存储介质 | |
| CN105589883B (zh) | 网页的页面元素的显示方法和装置 | |
| JP2014071448A (ja) | ディスプレイのフォント生成システム及び方法 | |
| CN110825989A (zh) | 图片展示方法、装置、电子设备及可读介质 | |
| CN112445478A (zh) | 图形文件的处理方法、装置、设备及介质 | |
| CN113032696A (zh) | 一种页面图片的显示方法和显示装置 | |
| CN113763860B (zh) | 显示颜色确定方法、装置、电子设备和存储介质 | |
| CN116932120B (zh) | 地图底图的可视化页面缩放方法、装置和电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20221222 Address after: 1402, Floor 14, Block A, Haina Baichuan Headquarters Building, No. 6, Baoxing Road, Haibin Community, Xin'an Street, Bao'an District, Shenzhen, Guangdong 518000 Patentee after: Shenzhen Yayue Technology Co.,Ltd. Address before: 2, 518000, East 403 room, SEG science and Technology Park, Zhenxing Road, Shenzhen, Guangdong, Futian District Patentee before: TENCENT TECHNOLOGY (SHENZHEN) Co.,Ltd. |