CN102375851A

CN102375851A - 一种显示页面的方法及设备

Info

Publication number: CN102375851A
Application number: CN2010102611548A
Authority: CN
Inventors: 李峰
Original assignee: China Mobile Communications Co Ltd
Current assignee: China Mobile Communications Co Ltd
Priority date: 2010-08-23
Filing date: 2010-08-23
Publication date: 2012-03-14
Anticipated expiration: 2030-08-23
Also published as: CN102375851B

Abstract

本发明公开了一种显示页面的方法及设备，主要内容包括：通过对页面数据解析后的DOM树进行分析，将一个满足现实条件的DOM节点在所述页面数据渲染后得到的页面中对应区域的内容作为该页面的重要内容，并将该内容通过移动终端显示，使最终显示的页面内容相较于未处理的页面而言，最终显示的页面内容的大小与移动终端的显示器大小相对适配，并在用户不参与操作的情况下，向用户显示重要的页面内容。

Description

一种显示页面的方法及设备

技术领域

本发明涉及通信领域，尤其涉及一种显示页面的方法及设备。

背景技术

随着手机终端业务的不断发展，越来越多的用户使用手机终端来浏览网页，通过移动终端浏览的网页可以是来自于WAP网站的WAP页面，也可以是来自于常规Internet网站的WEB页面。

WEB页面是以PC机的显示器大小来设计的HTML或XML等格式的页面，如果将WEB页面直接在手机终端的显示器上显示，其显示结果将会如图1所示，其中，虚线部分的矩形框表示手机终端的显示器，外层的实线部分的矩形框表示WEB页面。从图1中可以看出，如果不对WEB页面进行处理而直接通过手机终端的显示器显示，则会因为WEB页面的设计大小远大于手机终端显示器的大小，使得用户需要通过手机终端显示器上的左右、上下滚动条来浏览WEB页面，则导致用户浏览页面的过程极为不便。为了解决上述使用手机终端浏览WEB页面的问题，目前业界提出了几种解决方案：

第一种解决方案：

对常规Internet网站进行改造，使得用户通过PC机访问Internet网站时，网站返回WEB网页，当用户通过手机终端访问该Internet网站时，网站返回适配手机终端的显示器大小的WAP网页。

第一种解决方案虽然能够使用户通过手机终端方便地浏览页面，但是对网站做了较大改造，使常规的Internet网站同时还具有WAP网站的功能。由于目前的Internet网站数量众多，如果对所有的Internet网站进行改造以适配手机终端的访问是很难实现的。

第二种解决方案：

通过安装在手机终端内的浏览器对WEB网页进行重新排版，通过改变WEB网页布局的方式使页面适配手机终端的显示器大小。目前诸如Operamini、UCWeb等已实施了该方案的手机浏览器的重排操作都是将原WEB页面中的JavaScript、Flash等内容删除，使得用户虽然能够实现通过手机终端显示WEB页面的目的，但是显示的内容不完整，降低了用户浏览页面时的视觉效果和交互效果。

第三种解决方案：

浏览器接收到WEB网页数据后，渲染出页面图像，并使用图像处理技术将页面划分为多个相关区域，由用户选择划分出的至少一个区域后放大显示。

第四种解决方案：

浏览器接收到WEB网页数据后，渲染出页面图像，并根据用户输入的位置信息来分析该位置对应的页面节点，并将该节点对应的页面区域以与手机终端显示器对准的方式显示。

上述第三种解决方案和第四种解决方案都是在浏览器显示页面后由用户手动选择显示的页面区域，无法在浏览器载入页面时直接向用户显示页面内容。

综上所述，目前利用手机终端浏览WEB页面时，由于手机终端显示器的大小和WEB页面设计的大小不适配，为了方便地显示页面，只能由用户手动选择手机终端显示器显示页面的部分区域，无法在浏览器载入页面时直接向用户显示页面内容。

发明内容

本发明实施例提供一种显示页面的方法及设备，用以解决现有技术中存在的利用移动终端浏览页面时，由于移动终端显示器的大小和页面设计的大小不适配，造成页面中的重要内容无法直接在移动终端显示器上显示的问题。

一种显示页面的方法，所述方法包括：

对获得的页面数据解析后得到文件对象模型DOM树，并从所述DOM树中选择至少一个DOM节点；

对选择的DOM节点分别进行分析，确定一个满足显示条件的DOM节点；

确定满足显示条件的DOM节点在所述页面数据渲染后得到的页面中对应区域的内容，并将确定的内容通过移动终端显示。

一种显示页面的设备，所述设备包括：

解析模块，用于对获得的页面数据解析后得到文件对象模型DOM树；

选择模块，用于从所述DOM树中选择至少一个DOM节点；

节点确定模块，用于对选择的DOM节点分别进行分析，确定一个满足显示条件的DOM节点；

显示模块，用于确定满足显示条件的DOM节点在所述页面数据渲染后得到的页面中对应区域的内容，并将确定的内容通过移动终端显示。

本发明实施例通过对页面数据解析后的DOM树进行分析，将一个满足显示条件的DOM节点在所述页面数据渲染后得到的页面中对应区域的内容作为该页面的重要内容，并将该内容通过移动终端显示，使最终显示的页面内容的大小与移动终端的显示器大小相对适配，并在用户不参与操作的情况下，向用户显示重要的页面内容。

附图说明

图1为背景技术中在移动终端的显示器上显示WEB页面的示意图；

图2为本发明实施例一中显示页面的方法示意图；

图3为利用本发明实施例一操作后，在移动终端的显示器上显示WEB页面的示意图；

图4为本发明实施例二中显示页面的方法示意图；

图5为本发明实施例三中显示页面的设备结构示意图。

具体实施方式

为了使用户能够方便地通过移动终端浏览WEB页面，本发明实施例对获得的页面数据进行处理，根据页面数据解析得到的文件对象模型(DocumentObject Model，DOM)节点树，从所述DOM节点树中选择重要的DOM节点，并将选择的DOM节点在页面数据渲染后得到的页面中对应区域的内容通过移动终端显示，使得在不需要用户手动参与操作的情况下，显示的内容既能够相对于未处理过的页面更加匹配移动终端的显示器大小，又能够使用户浏览页面中的重要内容。

本发明各实施例中的方案可以针对WEB页面进行页面显示，也可以针对WAP页面进行页面显示。通过网络协议(如HTTP协议)从网络服务器中读取的页面数据或从本地读取的页面数据可以是HTML格式的页面数据，也可以是XML或WML格式的页面数据。本发明各实施例中涉及的移动终端可以是手机终端。

下面结合说明书附图对本发明实施例的方案进行详细描述。

实施例一：

如图2所示，为本发明实施例一中显示页面的方法示意图，所述方法包括以下步骤：

步骤101：读取页面数据。

在本步骤中，假设从网络服务器或本地读取的页面数据是HTML格式的页面数据。

步骤102：对页面数据进行解析，生成该页面数据对应的DOM树。

在本步骤中，通过解析HTML格式的页面数据，为HTML格式的页面数据在逻辑上建立一个树模型，树模型中DOM节点是操作的对象，通过对DOM树和DOM节点的操作就可实现对HTML格式的页面数据的操作。

步骤103：从所述DOM树中选择至少一个DOM节点。

本步骤中选择的DOM节点可以是通过初步估计认为是表示页面中重要内容的节点，例如，DOM树的第二层中包含数据体(body)节点、数据头(header)节点等节点，由于body节点及其子节点很可能表示页面中的重要内容，如：body节点的子节点div节点，则可以将body节点的下一级子节点作为选择的DOM节点，或是将body节点的下N级子节点作为选择的DOM节点，其中，N为正整数。

本实施例中，包括但不限于上述选择DOM节点的方式，但通过上述方式选择DOM节点可以使实现过程简单，提高选择DOM节点的效率，是优选方案。

另外，在很多页面中有浮动窗口，如页面显示时同时显示的广告浮动窗口，因此，在选择DOM节点之前，从页面数据中解析并过滤浮动窗口节点，本步骤中过滤浮动窗口节点后的DOM树种选择DOM节点。

步骤104：对选择的DOM节点分别进行分析，确定一个满足显示条件的DOM节点。

本实施例的方案中，所述显示条件包括但不限于以下任一条件或两个条件的组合：

第一条件：DOM节点在页面中对应的区域是表单区域，且该表单区域的面积与页面总面积之和的比值大于第一门限值、表单区域中包含的表单元素个数达到设定个数。

第二条件：DOM节点对应在页面中区域的面积达到第二门限值，且该DOM节点在页面中对应区域内的链接区域面积与页面总面积的比值小于第三门限值，以及该DOM节点在页面中对应区域内的文本区域和多媒体区域面积之和与页面总面积的比值达到第四门限值。所述页面总面积可以是DOM树中所有的DOM节点在页面上对应区域的面积和。

通过上述两个条件来筛选满足显示条件的DOM节点是为了从大量的DOM节点中筛选出能够表示页面中重要内容的DOM节点。例如，如果存在满足上述第一条件的DOM节点，表示该页面数据渲染出的页面中的重要内容是对话框，如搜索网站的主页面，因此，能够表示该对话框的一个DOM节点就是满足显示条件的重要节点；否则，进一步判断是否存在满足上述第二条件的DOM节点，若存在，表示满足第二条件的一个DOM节点对应在网页中内容的链接区域小，且在网页中占较大区域面积，则该DOM节点对应在网页中内容很可能是正文、图片等内容，因此，该DOM节点可以作为满足显示条件的重要节点。

步骤105：对所述页面数据渲染后得到待显示的页面。

在本步骤中，通过渲染引擎对页面进行渲染，形成可以在移动终端显示器上显示的图像。

步骤106：将满足显示条件的DOM节点对应在页面中的区域的内容通过移动终端显示。

在本步骤中，如果在步骤104中筛选出重要节点，则该DOM节点对应在页面中的区域作为页面的重要区域，将该重要区域在移动终端的显示器上显示，其显示结构如图3所示，其中，虚线部分为移动终端的显示器，外层的实线框为页面。如果在步骤104中未筛选出满足现实条件的DOM节点，则将所述页面按照背景技术中的方案在移动终端上显示。

比较图1和图3的示意图可以看出，使用本发明实施例的方案显示页面时，可以直接将页面中的重要内容通过移动终端的显示器首先显示出来，如果重要内容的大小仍大于移动终端的显示器大小，用户仍需要通过手动方式调节显示内容，但相对于图1的方式，还是大大简化了用户的手动操作。

通过本发明实施例一的方案显示页面时，可以在移动终端的显示器上显示页面中的重要区域，如图3所示，使用户在不参与的情况下通过移动终端的显示器显示页面，同时，用户在浏览完显示的重要区域后，通过移动终端显示器上的左右、上下滚动条来继续浏览页面的其他内容，提高了用户浏览页面时的视觉效果和交互效果。

实施例二：

本发明实施例二通过具体的实例对本发明实施例一的方案进行详细描述。

如图4所示，为本发明实施例二的方法示意图，包括以下步骤：

步骤201：对页面数据进行解析，生成该页面数据对应的DOM树和渲染(Render)树。

所述DOM树包含DOM节点以及该DOM节点子节点的内容，而Render树包含了各DOM节点对应在页面中的位置信息以及对应在页面中区域的面积信息。

步骤202：将DOM树中body节点的下一级节点作为选择的DOM节点的节点集合。

步骤203：确定节点集合中的每个DOM节点对应在页面中的位置信息。

步骤204：按照对应在页面的位置从上到下的顺序将节点集合中的DOM节点进行排序。

步骤205：若存在至少两个DOM节点对应在页面中的位置信息表示的位置在页面中的高度相同，则将所述至少两个DOM节点进一步按照对应在页面的位置从左到右的顺序排序。

考虑到用户在实际浏览页面时多采用从上到下、从左到右的顺序浏览，因此，步骤204和步骤205对节点集合中的多个节点分别进行了排序，使得排列后相邻的两节点之间，前一节点对应在页面中的位置在后一节点对应在页面中的位置之上，或者是该相邻两节点对应在页面中的位置是同一高度，但前一节点对应在页面中的位置是后一节点对应在页面中的位置的左边。

步骤206：判断节点集合中的DOM节点中是否存在满足第一条件的DOM节点，若存在，则执行208；否则，执行步骤207。

步骤207：按照节点集合中各DOM节点的排序，依次判断是否存在满足第二条件的DOM节点，若存在，则执行步骤208；否则，执行步骤209。

特殊地，若存在多个满足所述第一条件的DOM节点，则将按照DOM节点的排序首次确定出的满足第一条件的一个DOM节点作为满足显示条件的DOM节点；若存在多个满足所述第二条件的DOM节点，则将首次确定出的满足第二条件的DOM节点作为满足显示条件的DOM节点。这样做的目的是：由于满足第二条件的DOM节点很可能对应在网页中内容是正文、图片等重要内容，而用户的浏览习惯是从上到下、从左到右的顺序浏览，因此，按照从上到下、从左到右的顺序排序后得到的满足第二条件的DOM节点对应在页面中的内容是用户首先希望浏览内容。

上述第二条件的极限情况是：最终筛选出的DOM节点是对应在页面中区域的面积最大的节点，且该DOM节点在页面中对应区域内的链接区域面积与页面总面积的比值小于第三门限值，以及该DOM节点在页面中对应区域内的文本区域和多媒体区域面积之和与页面总面积的比值达到第四门限值。具体地，本步骤的实现过程可以如下：

第一步：从节点集合中读取出对应在页面中区域的面积最大的DOM节点。

第二步：判断读取该DOM节点在页面中对应区域内的链接区域面积与页面总面积的比值是否小于第三门限值；若是，则执行第三步；否则，执行第四步。

第三步：判断该DOM节点在页面中对应区域内的文本区域和多媒体区域面积之和与页面总面积的比值达到第四门限值，若达到，则该DOM节点是重要节点，继续执行本实施例二的后续步骤；否则，执行第四步。

第四步：将当前读取的DOM节点从节点集合中删除，并判断当前节点集合中的DOM节点数量是否大于0，若是，则跳转至第一步；否则，结束对重要节点的筛选过程。

步骤208：将满足显示条件的DOM节点对应在页面中的内容通过移动终端的显示器显示。

步骤209：正常显示页面。

实施例三：

本发明实施例三提供一种与实施例一和实施例二属于同一发明构思下的显示页面的设备，如图5所示，所述设备包括解析模块11、选择模块12、节点确定模块13和显示模块14，其中：解析模块11用于对获得的页面数据解析后得到文件对象模型DOM树；选择模块12用于从所述DOM树中选择至少一个DOM节点；节点确定模块13用于对选择的DOM节点分别进行分析，确定一个满足显示条件的DOM节点；显示模块14用于确定满足显示条件的DOM节点在所述页面数据渲染后得到的页面中对应区域的内容，并将确定的内容通过移动终端显示。

所述选择模块12具体用于将所述DOM树中body节点的下N级节点作为选择的DOM节点，所述N为正整数。

所述设备还包括过滤模块15，用于从所述页面数据中解析并过滤浮动窗口节点。

所述解析模块11还用于通过解析页面数据得到表示各DOM节点对应在页面中的位置信息以及对应在页面中区域的面积信息的Render树。所述设备还包括排序模块16，用于确定选择出的每个DOM节点对应在页面中的位置信息，按照对应在页面的位置从上到下的顺序将选择的DOM节点进行排序，且当存在至少两个DOM节点对应在页面中的位置信息表示的位置在页面中的高度相同时，将所述至少两个DOM节点进一步按照对应在页面的位置从左到右的顺序排序。

所述节点确定模块13确定满足显示条件的DOM节点的方式为：判断选择的DOM节点中是否存在满足第一条件的DOM节点，若存在，则将满足所述第一条件的DOM节点作为满足显示条件的DOM节点；否则，按照对选择的DOM节点的排序，依次判断是否存在满足所述第二条件的DOM节点，并将满足所述第二条件的DOM节点作为满足显示条件的DOM节点。

其中，所述第一条件包括：DOM节点在页面中对应的区域是表单区域，且该表单区域的面积与页面总面积之和的比值大于第一门限值、表单区域中包含的表单元素个数达到设定个数；第二条件包括：DOM节点在页面中对应区域的面积达到第二门限值，且该DOM节点在页面中对应区域内的链接区域面积与页面总面积的比值小于第三门限值，以及该DOM节点在页面中对应区域内的文本区域和多媒体区域面积之和与页面总面积的比值达到第四门限值。

另外，节点确定模块13还用于存在多个满足所述第一条件的DOM节点，则将按照DOM节点的排序首次确定出的满足第一条件的一个DOM节点作为满足显示条件的DOM节点，以及，存在多个满足所述第二条件的DOM节点时，将首次确定出的满足第二条件的DOM节点作为满足显示条件的DOM节点。

通过本发明实施例提供的方法和设备，可以在移动终端的显示器上显示页面中的重要区域，使用户在不参与的情况下通过移动终端的显示器显示页面，同时，用户在浏览完显示的重要区域后，通过移动终端显示器上的左右、上下滚动条来继续浏览页面的其他内容，提高了用户浏览页面时的视觉效果和交互效果；同时，本发明实施例对DOM节点对应在页面中的位置信息按照从上到下、从左到右的顺序进行排序，使得最终显示的内容满足用户的浏览习惯，提高本发明方案的可用性。

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

Claims

1.一种显示页面的方法，其特征在于，所述方法包括：

2.如权利要求1所述的方法，其特征在于，从所述DOM树中选择至少一个DOM节点，具体包括：

将所述DOM树中数据体body节点的下N级节点作为选择的DOM节点，所述N为正整数。

3.如权利要求1所述的方法，其特征在于，获得页面数据之后，且从所述DOM树中选择至少一个DOM节点之前，所述方法还包括：

从所述页面数据中解析并过滤浮动窗口节点。

4.如权利要求1所述的方法，其特征在于，得到DOM树之后，且对选择的DOM节点分别进行分析之前，所述方法还包括：

通过解析页面数据得到表示各DOM节点对应在页面中的位置信息以及对应在页面中区域的面积信息的渲染Render树；

在选择出至少一个DOM节点之后，且对选择的DOM节点分别进行分析之前，所述方法还包括：

确定选择出的每个DOM节点对应在页面中的位置信息；

按照对应在页面的位置从上到下的顺序将选择的DOM节点进行排序，且当存在至少两个DOM节点对应在页面中的位置信息表示的位置在页面中的高度相同时，将所述至少两个DOM节点进一步按照对应在页面的位置从左到右的顺序排序。

5.如权利要求4所述的方法，其特征在于，满足显示条件的DOM节点至少满足以下一个条件：

第一条件：DOM节点在页面中对应的区域是表单区域，且该表单区域的面积与页面总面积之和的比值大于第一门限值、表单区域中包含的表单元素个数达到设定个数；

第二条件：DOM节点在页面中对应区域的面积达到第二门限值，且该DOM节点在页面中对应区域内的链接区域面积与页面总面积的比值小于第三门限值，以及该DOM节点在页面中对应区域内的文本区域和多媒体区域面积之和与页面总面积的比值达到第四门限值。

6.如权利要求5所述的方法，其特征在于，将选择的DOM节点分别进行分析，确定一个满足显示条件的DOM节点，具体包括：

判断选择的DOM节点中是否存在满足所述第一条件的DOM节点，若存在，则将满足所述第一条件的一个DOM节点作为满足显示条件的DOM节点；

否则，按照对选择的DOM节点的排序，依次判断是否存在满足所述第二条件的DOM节点，并将满足所述第二条件的一个DOM节点作为满足显示条件的DOM节点。

7.如权利要求6所述的方法，其特征在于，若存在多个满足所述第一条件的DOM节点，则将按照DOM节点的排序首次确定出的满足第一条件的一个DOM节点作为满足显示条件的DOM节点；

若存在多个满足所述第二条件的DOM节点，则将首次确定出的满足第二条件的DOM节点作为满足显示条件的DOM节点。

8.一种显示页面的设备，其特征在于，所述设备包括：

选择模块，用于从所述DOM树中选择至少一个DOM节点；

9.如权利要求8所述的设备，其特征在于，

选择模块，具体用于将所述DOM树中body节点的下N级节点作为选择的DOM节点，所述N为正整数。

10.如权利要求8所述的设备，其特征在于，所述设备还包括：

过滤模块，用于从所述页面数据中解析并过滤浮动窗口节点。

11.如权利要求8所述的设备，其特征在于，

所述解析模块，还用于通过解析页面数据得到表示各DOM节点对应在页面中的位置信息以及对应在页面中区域的面积信息的Render树；

所述设备还包括：

排序模块，用于确定选择出的每个DOM节点对应在页面中的位置信息，按照对应在页面的位置从上到下的页序将选择的DOM节点进行排序，且当存在至少两个DOM节点对应在页面中的位置信息表示的位置在页面中的高度相同时，将所述至少两个DOM节点进一步按照对应在页面的位置从左到右的顺序排序。

12.如权利要求11所述的设备，其特征在于，

节点确定模块，具体用于判断选择的DOM节点中是否存在满足第一条件的DOM节点，若存在，则将满足所述第一条件的DOM节点作为满足显示条件的DOM节点；否则，按照对选择的DOM节点的排序，依次判断是否存在满足所述第二条件的DOM节点，并将满足所述第二条件的DOM节点作为满足显示条件的DOM节点；

13.如权利要求12所述的设备，其特征在于，

节点确定模块，还用于存在多个满足所述第一条件的DOM节点，则将按照DOM节点的排序首次确定出的满足第一条件的一个DOM节点作为满足显示条件的DOM节点，以及，存在多个满足所述第二条件的DOM节点时，将首次确定出的满足第二条件的DOM节点作为满足显示条件的DOM节点。