CN102156716B - 网页页面重排方法及装置 - Google Patents

Abstract

本发明提供一种用于对包含图片数据的网页页面进行重排的网页页面重排方法，包括：利用从网页内容服务器所获得的网页页面内容的初始数据，对该网页页面进行排版；基于网页页面内容包含的图片控件，将该排版的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域；在获得与该图片控件对应的图片数据后，针对所划分出的区域，按照不同的方式进行重新排版，以获得在移动终端的浏览上显示的重新排版后的网页页面，从而可以减少重排时的运算量，由此提高页面重排速率，并且避免出现图片与文字重叠，由此提高用户浏览网页的体验。

Description

网页页面重排方法及装置

技术领域

本发明涉及浏览器领域，更为具体地，涉及用于对包含图片数据的网页页面内容进行重排的网页页面重排方法及装置。

背景技术

随着技术的进步和社会的发展，人们越来越喜欢利用移动终端（例如，手机）来进行网页浏览。在现有的移动终端中，当需要进行网页浏览时，通常通过移动终端的浏览器访问服务器。在移动终端的浏览器访问服务器时，一般都是先访问服务器上的网页页面内容（body），该网页页面内容通常由多个控件组成，例如文字控件、图片控件等。在获得网页页面内容后，首先对所有控件进行排版展示，其中，图片控件是根据初始大小值进行排版，然后会继续根据图片控件的链接去下载该图片控件的图片数据，等到图片数据下载完成，再在浏览器上重新显示图片。

这时，如果所获得的网页页面内容中的图片控件的初始值大小与最终下载到的图片大小有偏差，那么就必须对在浏览器上显示的网页页面进行重新排版。

在这种情况下，现有的移动终端浏览器通常都是在该网页页面内容中包含的所有图片控件对应的图片数据都下载完成后，才开始按照统一的方式，对网页页面进行重新排版。

由于所有图片控件的图片数据都下载完成需要较长的时间，从而导致重新排版涉及的范围广，所花费的时间长，因而重新排版的效率低，特别在浏览器性能差的移动终端上，这种情形更加明显。

此外，上述重新排版方式是在所有图片数据都下载完成后才开始，在这种情况下，可能会出现图片数据与文字数据重叠的情形，从而导致用户浏览网页的体验不佳。

因此，需要一种新的网页页面快速重排方法及装置，其能够快速地完成页面重排以及不会出现图片与文字重叠。

发明内容

鉴于上述，本发明提供了一种对包含图片数据的网页页面内容进行重排的网页页面重排方法及装置，利用上述方法和装置，可以基于网页页面内容中所包含的图片控件，对排版后的网页页面进行区域划分，并针对划分出的不同区域，按照不同的方式进行重新排版，由此重新排版时所涉及的范围小，从而可以减少重排时的运算量，由此提高页面重排速率。此外，由于当所获得网页页面内容包含多个图片控件时，只有在当前处理的图片控件完成处理后，才对下一图片控件进行处理，从而可以避免出现图片与文字重叠，由此提高用户浏览网页的体验。

根据本发明的一个方面，提供了一种用于对包含图片数据的网页页面进行重排的网页页面重排方法，包括：利用从网页内容服务器所获得的网页页面内容的初始数据，对该网页页面进行排版，其中，所述初始数据至少包括所获得的网页页面内容中的图片控件的初始大小的尺寸数据；基于所述网页页面内容所包含的图片控件，将该排版的网页页面划分为包括从所述网页页面的第一个元素开始到该图片控件但不包括该图片控件的图片控件之前区域、包括从该图片控件开始到下一换行符控件的图片控件区域和/或包括从该换行符控件到网页页面结束的图片控件之后区域；在获得与该图片控件对应的图片数据后，针对所划分出的区域，按照不同的方式进行重新排版，以获得在移动终端的浏览上显示的重新排版后的网页页面。

此外，在本发明的一个示例中，针对所划分出的不同区域，按照不同的方式进行重新排版的步骤包括：对于图片控件之前区域，不进行重新排版；对于图片控件区域，根据所获得的图片数据的实际大小的尺寸数据，对该图片控件区域中所包含的所有控件的控件坐标进行重新计算，并按照重新计算后的坐标进行重新排版；以及对于图片控件之后区域，基于图片控件区域重新排版后的Y轴方向值，在进行重新排版时，将该图片控件之后区域中的所有控件沿Y轴下移，该下移的偏移量为重新排版后的图片控件区域Y轴方向值减去重新排版前的图片控件区域Y轴方向值所得的差值。

此外，当所获得网页页面内容包含多个图片控件时，按照先后顺序对该多个图片控件依次进行处理，并且只有在当前处理的图片控件完成处理后，才对下一图片控件进行处理。在这种情况下，在处理当前图片控件时，基于当前处理的图片控件，将基于前一图片控件重新排版后的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域。

此外，在本发明的一个示例中，当所述网页页面内容的第一个元素是图片控件时，将该排版的网页页面划分为图片控件区域和/或图片控件之后区域。

此外，所述方法在移动终端浏览器上实现。

根据本发明的另一方面，提供了一种用于对包含图片数据的网页页面进行重排的网页页面重排装置，包括：网页页面初始排版单元，用于利用从网页内容服务器所获得的网页页面内容的初始数据，对该网页页面进行排版，其中，所述初始数据至少包括所获得的网页页面内容中的图片控件的初始大小的尺寸数据；网页页面区域划分单元，用于基于所述网页页面内容所包含的图片控件，将该排版的网页页面划分为包括从所述网页页面的第一个元素开始到该图片控件但不包括该图片控件的图片控件之前区域、包括从该图片控件开始到下一换行符控件的图片控件区域和/或包括从该换行符控件到网页页面结束的图片控件之后区域；以及网页页面重排单元，用于在获得与该图片控件对应的图片数据后，针对所划分出的区域，按照不同的方式进行重新排版，以获得在移动终端的浏览上显示的重新排版后的网页页面。

此外，对于图片控件之前区域，所述网页页面重排单元不进行重新排版；对于图片控件区域，所述网页页面重排单元根据所获得的图片数据的实际大小的尺寸数据，对该图片控件区域中所包含的所有控件的控件坐标进行重新计算，并按照重新计算后的坐标进行重新排版；以及对于图片控件之后区域，所述网页页面重排单元基于图片控件区域重新排版后的Y轴方向值，在进行重新排版时，将该图片控件之后区域中的所有控件沿Y轴下移，该下移的偏移量为重新排版后的图片控件区域Y轴方向值减去重新排版前的图片控件区域Y轴方向值所得的差值。

此外，当所获得网页页面内容包含多个图片控件时，所述网页页面重排单元按照先后顺序对该多个图片控件依次进行处理，并且只有在当前处理的图片控件完成处理后，才对下一图片控件进行处理。并且，在处理当前图片控件时，所述网页页面区域划分单元基于当前处理的图片控件，将基于前一图片控件重新排版后的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域。

此外，当所述网页页面内容的第一个元素是图片控件时，所述网页页面区域划分单元将该排版的网页页面划分为图片控件区域和/或图片控件之后区域。

此外，所述装置位于移动终端浏览器中。

根据本发明的另一方面，提供了一种移动终端，包括如上所述的装置。

根据本发明的另一方面，提供了一种服务器，包括如上所述的装置。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

有益效果：利用上述方法和装置，可以基于网页页面内容中所包含的图片控件，对排版后的网页页面进行区域划分，并针对划分出的不同区域，按照不同的方式进行重新排版，由此重新排版时所涉及的范围小，从而可以减少重排时的运算量，由此提高页面重排速率。

此外，由于当所获得网页页面内容包含多个图片控件时，只有在当前处理的图片控件完成处理后，才对下一图片控件进行处理，从而可以避免出现图片与文字重叠，由此提高用户浏览网页的体验。

附图说明

通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中：

图1示出了根据本发明的一个实施例的网页页面重排方法的流程图；

图2A示出了在网页页面内容包含一个图片控件时，利用网页页面内容的初始数据进行排版后的结果；

图2B示出了在网页页面内容包含一个图片控件时，利用本发明的网页页面重排方法进行网页页面重排后的结果；

图3A示出了在网页页面内容包含多个图片控件时，利用网页页面内容的初始数据进行排版后的结果；

图3B示出了在网页页面内容包含多个图片控件时，利用本发明的网页页面重排方法进行网页页面重排后的结果；

图4示出了根据本发明的网页页面重排装置的方框示意图；

图5示出了包含根据本发明的网页页面重排装置的移动终端的方框示意图；

图6示出了包含根据本发明的网页页面重排装置的服务器的方框示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施例

在下面的描述中，出于说明的目的，为了提供对一个或多个实施例的全面理解，阐述了许多具体细节。然而，很明显，也可以在没有这些具体细节的情况下实现这些实施例。在其它例子中，为了便于描述一个或多个实施例，公知的结构和设备以方框图的形式示出。

下面将参照附图来对根据本发明的各个实施例进行详细描述。

图1示出了根据本发明的一个实施例的用于在移动终端的浏览器上对包含图片数据的网页页面内容进行重排的网页页面重排方法的流程图。

如图1所示，在浏览器从网页内容服务器获取网页页面内容后，首先，在步骤S110中，利用从网页内容服务器所获得的网页页面内容的初始数据，对该网页页面进行排版，其中，所获得的初始数据例如包含文字控件的坐标数据以及图片控件的初始大小的尺寸数据，即在X轴和Y轴方向的尺寸数据。这里，所述图片控件的初始大小可以例如是固定的，例如所述图片控件的初始大小可以在Ｘ轴方向上为１，以及在Ｙ轴方向上为２。当然，也可以根据需要采用其它合适值。图2A示出了在网页页面内容包含一个图片控件时，利用网页页面内容的初始数据进行排版后的结果。图3A示出了在网页页面内容包含多个图片控件时，利用网页页面内容的初始数据进行排版后的结果。

在利用网页页面内容的初始数据进行排版后，在步骤S120，基于所述网页页面内容所包含的图片控件，将该排版的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域，其中图片控件之前区域包括从所述网页页面的第一个元素开始到该图片控件但不包括该图片控件的区域，图片控件区域包括从该图片控件开始到下一换行符控件的区域，以及图片控件之后区域包括从该换行符控件到网页页面结束的区域，如图2A中所示。

然后，在步骤S130中，在获得与该图片控件对应的图片数据后，针对所划分出的不同区域，按照不同的方式进行重新排版，以获得在移动终端的浏览上显示的重新排版后的网页页面。例如，在本发明的一个示例中，针对所划分出的不同区域，可以按照下述的不同方式进行重新排版。

（1）对于图片控件之前区域，不进行重新排版。

（2）对于图片控件区域，根据所获得的图片数据的实际大小，对该图片控件区域中所包含的所有控件的控件坐标进行重新计算，并按照重新计算后的坐标进行重新排版。也就是，根据所获得的图片数据的实际大小的X轴方向值和Y轴方向值，对图片控件区域中的所有控件的控件坐标在X轴和Y轴方向重新进行计算，并按照重新计算后的坐标对该区域进行重新排版。例如，首先清空图片控件区域中的控件排版信息，接着从当前图片控件左上角开始，自左向右，自上向下将图片控件区域中的控件依次计算好排版位置，插入到页面排版信息中。以及（3）对于图片控件之后区域，基于图片控件区域重新排版后的Y轴方向值，在进行重新排版时，将该图片控件之后区域中的所有控件沿Y轴下移，该下移的偏移量为重新排版后的图片控件区域Y轴方向值减去重新排版前的图片控件区域Y轴方向值所得的差值，也就是说，将该图片控件之后区域中的所有控件的Y轴控件坐标加上重新排版后的图片控件区域Y轴方向值减去重新排版前的图片控件区域Y轴方向值所得的差值，作为图片控件之后区域中的所有控件的实际坐标。例如，假设重新排版前图片控件区域在Ｙ轴方向值为20，重新排版后的图片控件区域在Ｙ轴方向值为30，则图片控件之后区域中所有控件需要向下偏移10。在这种情况下，仅仅需要如上在Y轴方向上进行下移处理，而不需要在X轴方向上进行重排处理。

这里要说明的是，上述的不同重新排版方式仅仅是本发明的一个示例，本领域的技术人员还可以根据需要，采取其他不同的方式来实现。

以上是针对所获得的网页页面内容中只包含一个图片控件的情形进行的说明。这里要说明的是，所获得的网页页面内容还可以包括多个图片控件。当所获得的网页页面内容包含多个图片控件时，按照先后顺序对该多个图片控件依次进行处理，并且只有在当前处理的图片控件完成重新排版处理后，才对下一图片控件进行处理。而且，在这种情况下，在处理当前图片控件时，基于处理的当前图片控件，将基于前一图片控件重新排版后的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域。然后，针对所划分出的不同区域，按照上述的不同方式进行重新排版，以获得在移动终端的浏览上显示的重新排版后的网页页面。

此外，这里还要说明的是，在本发明的一个示例中，当所述网页页面内容的第一个元素是当前处理的图片控件时，将该排版后的网页页面划分为图片控件区域和/或图片控件之后区域。在本发明的另一示例中，当所述网页页面内容的最后一个元素是当前处理的图片控件时，将该排版后的网页页面划分为图片控件之前区域和/或图片控件区域。

这里要说明的是，上述方法可以利用移动终端的浏览器来实现，也可以在服务器端实现。

在利用移动终端的浏览器实现时，需要该浏览器具有强大的性能。在利用服务器实现时，移动终端中的浏览器客户端将需要浏览的网址URL发送给服务器，并且将移动终端的屏幕大小（以像素为单位）信息发送给服务器，然后由服务器从该网址获取网页数据并进行解析重排。在完成重排后，服务器将重排结果发送给浏览器客户端。

如上参照图1、图2A-2B和图3A-3B描述了根据本发明的对包含图片数据的网页页面内容进行重排的网页页面重排方法。本发明的上述对包含图片数据的网页页面内容进行重排的网页页面重排方法，可以采用软件实现，也可以采用硬件实现，或采用软件和硬件组合的方式实现。

图4示出了根据本发明的对包含图片数据的网页页面内容进行重排的网页页面重排装置400的方框示意图。如图4所示，根据本发明的网页页面重排装置400包括网页页面初始排版单元410、网页页面区域划分单元420以及网页页面重排单元430。

在从网页内容服务器获取网页页面内容后，网页页面初始排版单元410利用从网页内容服务器所获得的网页页面内容的初始数据，对该网页页面进行排版。

然后，网页页面区域划分单元420基于所述网页页面内容所包含的图片控件，将该排版的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域，其中图片控件之前区域包括从所述网页页面的第一个元素开始到该图片控件但不包括该图片控件的区域，图片控件区域包括从该图片控件开始到下一换行符控件的区域，以及图片控件之后区域包括从该换行符控件到网页页面结束的区域。

随后在获得与该图片控件对应的图片数据后，网页页面重排单元430针对所划分出的不同区域，按照不同的方式进行重新排版，以获得在移动终端的浏览上显示的重新排版后的网页页面。例如，在本发明的一个示例中，针对所划分出的不同区域，可以按照下述的不同方式进行重新排版。

（1）对于图片控件之前区域，不进行重新排版。

（2）对于图片控件区域，根据所获得的图片数据的实际大小，对该图片控件区域中所包含的所有控件的控件坐标进行重新计算，并按照重新计算后的坐标进行重新排版。也就是，根据所获得的图片数据的X轴方向值和Y轴方向值，对图片控件区域中的所有控件的控件坐标在X轴和Y轴方向重新进行计算，并按照重新计算后的坐标对该区域进行重新排版。例如，首先清空图片控件区域中的控件排版信息，接着从当前图片控件左上角开始，自左向右，自上向下将图片控件区域中的控件依次计算好排版位置，插入到页面排版信息中。以及（3）对于图片控件之后区域，基于图片控件区域重新排版后的Y轴方向值，在进行重新排版时，将该图片控件之后区域中的所有控件沿Y轴下移，该下移的偏移量为重新排版后的图片控件区域Y轴方向值减去重新排版前的图片控件区域Y轴方向值所得的差值，也就是说，将该图片控件之后区域中的所有控件的Y轴控件坐标加上重新排版后的图片控件区域Y轴方向值减去重新排版前的图片控件区域Y轴方向值所得的差值，作为图片控件之后区域中的所有控件的实际坐标。在这种情况下，仅仅需要如上在Y轴方向上进行下移处理，而不需要在X轴方向上进行重排处理。

此外，当所获得网页页面内容包含多个图片控件时，所述网页页面重排单元430按照先后顺序对该多个图片控件依次进行处理，并且只有在当前处理的图片控件完成处理后，才对下一图片控件进行处理。并且，在处理当前图片控件时，所述网页页面区域划分单元430基于当前处理的图片控件，将基于前一图片控件重新排版后的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域。

此外，当所述网页页面内容的第一个元素是图片控件时，所述网页页面区域划分单元420将该排版的网页页面划分为图片控件区域和/或图片控件之后区域。或者，当所述网页页面内容的最后一个元素是当前处理的图片控件时，所述网页页面区域划分单元420将该排版后的网页页面划分为图片控件之前区域和/或图片控件区域。

这里要说明的是，所述网页页面重排装置400可以设置在移动终端的浏览器中，也可以设置在服务器端。图5示出了包括根据本发明的网页页面重排装置400的移动终端10。图6示出了包括根据本发明的网页页面重排装置400的服务器20。

典型地，本发明所述的移动终端可为各种可能进行网页浏览的终端设备，例如手机、个人数字助理等，因此本发明的保护范围不应限定为某种特定类型的移动终端。

尽管前面公开的内容示出了本发明的示例性实施例，但是应当注意，在不背离权利要求限定的本发明的范围的前提下，可以进行多种改变和修改。根据这里描述的发明实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。

尽管已经结合详细示出并描述的优选实施例公开了本发明，但是本领域技术人员应当理解，对于上述本发明所提出的对包含图片数据的网页页面内容进行重排的网页页面重排方法及装置，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (10)

1.一种用于对包含图片数据的网页页面进行重排的网页页面重排方法，包括：

利用从网页内容服务器所获得的网页页面内容的初始数据，对该网页页面进行排版，其中，所述初始数据至少包括所获得的网页页面内容中的图片控件的初始大小的尺寸数据；

基于所述网页页面内容所包含的图片控件，将该排版的网页页面划分为包括从所述网页页面的第一个元素开始到该图片控件但不包括该图片控件的图片控件之前区域、包括从该图片控件开始到下一换行符控件的图片控件区域和/或包括从该换行符控件到网页页面结束的图片控件之后区域；

在获得与该图片控件对应的图片数据后，针对所划分出的区域，按照不同的方式进行重新排版，其中，针对所划分出的不同区域，按照不同的方式进行重新排版的步骤进一步包括：

对于图片控件之前区域，不进行重新排版；

对于图片控件区域，根据所获得的图片数据的实际大小的尺寸数据，对该图片控件区域中所包含的所有控件的控件坐标进行重新计算，并按照重新计算后的坐标进行重新排版；以及

对于图片控件之后区域，基于图片控件区域重新排版后的Y轴方向值，在进行重新排版时，将该图片控件之后区域中的所有控件沿Y轴下移，该下移的偏移量为重新排版后的图片控件区域Y轴方向值减去重新排版前的图片控件区域Y轴方向值所得的差值。

2.如权利要求1所述的网页页面重排方法，其中，当所获得网页页面内容包含多个图片控件时，按照先后顺序对该多个图片控件依次进行处理，并且只有在当前处理的图片控件完成处理后，才对下一图片控件进行处理，

其中，在处理当前图片控件时，基于当前处理的图片控件，将基于前一图片控件重新排版后的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域。

3.如权利要求1所述的网页页面重排方法，其中，当所述网页页面内容的第一个元素是图片控件时，将该排版的网页页面划分为图片控件区域和/或图片控件之后区域。

4.如权利要求1到3中任何一个所述的网页页面重排方法，其中，所述方法在移动终端浏览器上实现。

5.一种用于对包含图片数据的网页页面进行重排的网页页面重排装置，包括：

网页页面初始排版单元，用于利用从网页内容服务器所获得的网页页面内容的初始数据，对该网页页面进行排版，其中，所述初始数据至少包括所获得的网页页面内容中的图片控件的初始大小的尺寸数据；

网页页面区域划分单元，用于基于所述网页页面内容所包含的图片控件，将该排版的网页页面划分为包括从所述网页页面的第一个元素开始到该图片控件但不包括该图片控件的图片控件之前区域、包括从该图片控件开始到下一换行符控件的图片控件区域和/或包括从该换行符控件到网页页面结束的图片控件之后区域；以及

网页页面重排单元，用于在获得与该图片控件对应的图片数据后，针对所划分出的区域，按照不同的方式进行重新排版，以获得在移动终端的浏览上显示的重新排版后的网页页面，

其中，对于图片控件之前区域，所述网页页面重排单元不进行重新排版；对于图片控件区域，所述网页页面重排单元根据所获得的图片数据的实际大小的尺寸数据，对该图片控件区域中所包含的所有控件的控件坐标进行重新计算，并按照重新计算后的坐标进行重新排版；以及对于图片控件之后区域，所述网页页面重排单元基于图片控件区域重新排版后的Y轴方向值，在进行重新排版时，将该图片控件之后区域中的所有控件沿Y轴下移，该下移的偏移量为重新排版后的图片控件区域Y轴方向值减去重新排版前的图片控件区域Y轴方向值所得的差值。

6.如权利要求5所述的网页页面重排装置，其中，当所获得网页页面内容包含多个图片控件时，所述网页页面重排单元按照先后顺序对该多个图片控件依次进行处理，并且只有在当前处理的图片控件完成处理后，才对下一图片控件进行处理，并且

在处理当前图片控件时，所述网页页面区域划分单元基于当前处理的图片控件，将基于前一图片控件重新排版后的网页页面划分为图片控件之前区域、图片控件区域和/或图片控件之后区域。

7.如权利要求5所述的网页页面重排装置，其中，当所述网页页面内容的第一个元素是图片控件时，所述网页页面区域划分单元将该排版的网页页面划分为图片控件区域和/或图片控件之后区域。

8.如权利要求5到7中任何一个所述的网页页面重排装置，其中，所述装置位于移动终端浏览器中。

9.一种移动终端，包括如权利要求5到7中任何一个所述的装置。

10.一种服务器，包括如权利要求5到7中任何一个所述的装置。 

Images