本发明属于一种对网页内容进行分页显示的方法，具体的是采用HTML5技术对网页 内容进行分页显示的方法。
背景技术：
iBook出现以后，电子图书的阅读方式，变成类似于实体书的“翻书阅读”效果。比 以前来讲，用户体验有了极大的提升，这种阅读方式，有两个特点：1、采用分页的显示 方式，图书是一页一页的显示；2、切换页面时，采取翻页的效果，类似于真实的图书。 iBook不只支持纯文本的图书显示，还能支持带格式的图书显示。iBook的标准文档格式 是ePub格式。ePub底层就是HTML5的格式，因此iBook能够显示各种复杂的HTML5排版 格式。iBook的这种阅读方式，其主要的好处是更像实体的图书，从而使得用户阅读时， 更有真实感。在强调用户体验的时代，这种阅读模式得到了大家的广泛好评。iBook是采 用原生态的Object C来编写的，虽然在iOS平台上实现了翻页显示效果，但是其代码， 并不能移植到其他平台上。iBook另外还有一个缺点，就是只支持ePub格式，而ePub 格式的图书，尤其是中文书，在网络上是相当难找的，这就大大制约了iBook在中文图 书阅读方面的使用。
在Android和Windows Phone平台中，也有人开发了类似的翻页显示效果，然而虽然 这个网址实现了翻页效果，但是却无法支持ePub，无法实现文字格式的显示。由于这个 原因，Android下面的图书阅读软件，绝大部分都只能支持纯文本图书的显示，而无法支 持各种复杂的图书排版效果。同样，Windows Phone和PC机下面，也还没有类似于iBook 的图书阅读软件。为了解决这个问题，最简单的做法，就是直接使用HTML5技术，实现 类似于iBook的图书翻页效果。因为HTML5技术是跨平台的，因此一旦实现，在所有的 移动平台和PC机上，都能使用。HTML5的默认内容显示模式，是所谓的“流式显示模式”。 这种显示模式下，所有的内容，像液体一样，向下“流动”，然后通过垂直卷滚条的滑动， 来观看被遮挡的内容。流式显示模式，因为显示的方式不一样，根本就不存在页面的概 念，因此是不可能产生图书翻页效果的。要在HTML5应用中，实现类似于iBook的翻页 显示效果，要解决三个主要问题：1、要在HTML5中实现“页式显示模式”，以“页”为 单位显示网页内容。2、性能要足够好，要能够支持带格式的、数量很多的页面。3、可 以实现图书翻页显示效果。要在HTML5中实现“页式显示模式”，最简单的思路，就是计 算段落或者行的高度，然后达到设定的页面高度之后，就从中打断，把剩余的内容放到 下一页去。然而这个思路实际上是不可行的，原因是因为在HTML中，一大篇文字，例如 实际上可能占100页的一大篇文字，可能只有一个DOM对象。而HTML中所有获取高度的 操作，都只能针对DOM对象。因此，HTML中无从获取“段落”和“行”的高度，因此， 无法简单地以打断段落、或者打断行的方式进行分页。另一个思路，就是在第3方编辑 软件(例如Word)中，事先进行好分页，然后保存在HTML5中(可以通过某个特殊的自 定义标记)。这个方式在实践中也行不通，因为用户的设备分辨率千变万化，不同的设备， 页面尺寸不同，分页的位置也会不一样。另外，即使同一台设备，用户也可能改变字号， 进而导致分页的改变。因此，事先进行好分页的思路也是不可行的。还有人采用HTML5 的Canvas技术，来实现页式显示模式，以及翻页效果，例如：采用Canvas技术，虽然 也能实现页式显示模式，但是存在一些严重的问题：性能问题，只有在CPU性能强大的 设备上，才能流畅地运行，大部分移动设备上，都不能正常运行。无法支持网页内容的 排版，Canvas是一种方形的画布对象，采用Canvas之后，其中的内容就无法采用其他网 页技术，例如CSS3之类。这样导致网页内容的显示，无法支持排版格式。只能支持“纯 文字+图像”这样的简单内容显示。公开号为CN101853293A的专利，虽然名称为“一 种自适应分页的方法及装置”，但是其解决的问题，是对一个HTML的网页版面，以DOM 对象为单元进行分割。如前所述，DOM对象是一个很粗的单位，一大篇文字可能只是一个 DOM对象(例如100页长)，以DOM对象为基本单元的方案根本无从分页。因此，我们必 须找到一种能够将HTML内容进行分页显示的方法，并且这种方法有着足够高的性能，然 后才有可能实现基于HTML5的图书翻页显示效果。
技术实现要素：
针对上述问题，本发明的目的采用HTML5技术对网页内容进行分页显示的方法，本 方法能够让HTML5的内容，以分页的方式进行显示，高性能的算法，即使上百页的内容， 也可能在几秒内完成分页，速度可媲美PC机上Word的分页速度，内容发生变化时，可 以很方便的重新计算分页，完全采用HTML5代码实现，因而有着良好的可移植性。
本发明的目的是通过以下技术方案来实现的：
采用HTML5技术对网页内容进行分页显示的方法，其特征在于：包括以下步骤：
(1)网页上需要分页显示的基本内容单元，是图书中的一个连续的、没有人工预先 设定好分页的内容区块，不同图书设置内容区块的方式不一样，内容区块可以是图书的 一个章，也可以不是；
(2)将较长的网页内容根据图书的每个章，分拆为多个小节，需要将较长的网页内 容进行拆分，拆分为若干个小节，这个拆分的部分，称为“小节”，将很多个小节组合起 来，共同构成完整的分页效果，然后一部分一部分地显示在栏目中；
(3计算出每个小节的高度，然后计算出“剩余影响”；小节的“剩余影响”，在排版 仍然要考虑在内，计算出每个小节对后面的小节的“剩余影响”，计算出了剩余影响，以 后各个小节排列时，只要考虑到前一个小节的“剩余影响”，就可以通过多个小节的组合， 实现较长内容的分栏排版；
(4)生成一系列页面对象，每个页面对象包含合适的栏内容，从而看上去像图书的 “一页”，首先，将分栏中的一个栏，变为一个独立的页面；具体的做法：将分栏中的栏 的尺寸，设置为和页面尺寸同样大小；设定页面为容器，其中包含分栏内容；调整分栏 的margin-left参数，让想要的栏出现在最左边；分栏内容的父对象，父对象的宽度设 置为页面的宽度，这样超出这个宽度的栏，都不会显示出来，父对象的高度就设置为页 面的高度，分栏的高度也设置为页面的高度，分栏对象的margin-left设置为若干栏的 宽度，这样在父对象中，就能显示出指定的栏；规定页面的尺寸，让剩余的栏不显示出 来；通过这样的设置，就可以让页面显示指定的一个栏；就将分栏中的一个栏，转化为 了一个独立的页面，为了提高性能，每个页面就不能包含所有的栏，只包含其要显示的 栏，多余的栏越少越好；
(5)将HTML5的内容拆分为很多个独立的页面对象生成后，可以根据需要进行显示 或者设置翻页效果，翻页效果的实现，实际上就是对页面进行某种切换。
本本发明HTML5的页式显示模式，能够让HTML5的内容，以分页的方式进行显示，高性能的算法，即使上百页的内容，也可能在几秒内完成分页，速度可媲美PC机上Word 的分页速度，内容发生变化时，可以很方便的重新计算分页，完全采用HTML5代码实现，因而有着良好的可移植性。
具体实施方式
下面对本发明做进一步的说明：
实施例：采用HTML5技术对网页内容进行分页显示的方法，包括以下步骤：
(1)网页上需要分页显示的基本内容单元，是图书中的一个连续的、没有人工预先设定 好分页的内容区块，不同图书设置内容区块的方式不一样，内容区块可以是图书的一个 章，也可以不是；
(2)将较长的网页内容根据图书的每个章，分拆为多个小节，需要将较长的网页内 容进行拆分，拆分为若干个小节，这个拆分的部分，称为“小节”，将很多个小节组合起 来，共同构成完整的分页效果，然后一部分一部分地显示在栏目中；
(3)计算出每个小节的高度，然后计算出“剩余影响”；小节的“剩余影响”，在排 版仍然要考虑在内，计算出每个小节对后面的小节的“剩余影响”，计算出了剩余影响， 以后各个小节排列时，只要考虑到前一个小节的“剩余影响”，就可以通过多个小节的组 合，实现较长内容的分栏排版；
(4)生成一系列页面对象，每个页面对象包含合适的栏内容，从而看上去像图书的 “一页”，首先，将分栏中的一个栏，变为一个独立的页面；具体的做法：将分栏中的栏 的尺寸，设置为和页面尺寸同样大小；设定页面为容器，其中包含分栏内容；调整分栏 的margin-left参数，让想要的栏出现在最左边；分栏内容的父对象，父对象的宽度设 置为页面的宽度，这样超出这个宽度的栏，都不会显示出来，父对象的高度就设置为页 面的高度，分栏的高度也设置为页面的高度，分栏对象的margin-left设置为若干栏的 宽度，这样在父对象中，就能显示出指定的栏；规定页面的尺寸，让剩余的栏不显示出 来；通过这样的设置，就可以让页面显示指定的一个栏；就将分栏中的一个栏，转化为 了一个独立的页面，为了提高性能，每个页面就不能包含所有的栏，只包含其要显示的 栏，多余的栏越少越好；
(5)将HTML5的内容拆分为很多个独立的页面对象生成后，可以根据需要进行显示 或者设置翻页效果，翻页效果的实现，实际上就是对页面进行某种切换。
补充说明：
1.确定要实现翻页效果的HTML内容，为了方便起见，下面我们称其为“原始内容”；
a)原始内容可以是整个图书，也可以是图书的一个章，或者章下面的一个小节， 这个没有一定之规，不过通常来说，因为图书阅读都是以章为单元的，因此， 以章为单位进行处理比较好一些；
b)至于图书每章之间的切换，方法非常多，最简单的一种模式就是章切换时， 将每一章对应的DOM对象，全部进行替换；
c)在具体的表现形式上，原始内容实际上就是一个HTML格式的字符串；
2.将原始内容拆分为“小节”，然后保存在一个数组中，数组记录小节的起点和终 点位置；
a)拆分的标准，就是每个小节的内容，在一个页面中，应该是显示不完的，如 果一个小节，不够显示为一个页面(自然也不够显示为一个栏)，那就起不到 分栏的效果了；
b)对于各种不同的屏幕分辨率，一个页面能显示的内容的多少也不是固定的， 此时应该考虑最大页面尺寸能显示的内容。例如设计的HTML5应用打算用于 480*800和720*1280两种不同的设备分辨率。那么应该考虑720*1280设备 的页面；
c)可以采用“字数”作为拆分标准，也可以采用“段落数”作为拆分标准，例 如规定“字数超过600字”，对于大部分移动设备而言，是一个合适的拆分标 准；
d)拆分时，不能将HTML标记从中间打断。例如<p>this is a book</p>，不能 从a这个字母中间打断，而要从</p>之后拆分， 如果将HTML标记从中间打断，可能导致HTML显示不正确；
e)拆分小节的参考代码(略)，假设拆分标准为600字，并且假设原始内容，只 有<br/>这一种HTML标记，拆分后的小节的信息，保存在sections变量中；
f)sections变量并没有记录小节字符串的内容，只是记录了其在原始内容中的 起始和结束位置，这样做能够节省内存消耗，但并不是必须的。如果不在乎 内存消耗，也可以直接保存小节字符串内容；
3.计算每个小节的高度，并且将高度信息也保存到sections变量中，首先要在网 页中，创建一个“高度探测对象”，假设其名称为testElement。因为小节的高度， 必须实际赋予了DOM对象才能测试出来，因此，需要一个临时的页面对象，用于 临时赋予小节内容，并测量其高度。这个临时页面对象的尺寸应该和正式的页面 完全一样，并且其宽度和高度在可视区域之外，这样在测试高度时，不会引起屏 幕刷新。我们称这样的测试对象为“高度探测对象”，testElement是被包含在一 个testContainer对象之中的，这里的复杂的CSS设置，就是为了使得高度测试 对象的CSS，和真实的页面是完全一致的。如果这里的样式表设置有不同的话， 就会导致小节高度测试不准确，那么以后的所有页面计算都会出错。页面的CSS 设置，后面还会介绍。将每个小节的内容，放到一个容器中，容器的目的是能够 明确的找到小节内容对应的DOM对象。将容器代码，赋予高度探测对象，创建测 试用的DOM对象。
a)获取小节的高度，并保存在数组中。
b)之所以创建DOM对象后，延时一段时间，再获取高度值，是为了等待DOM对 象中可能有的排版格式计算完成，尤其是图像的加载完成。
i.刚刚将小节字符串赋予高度测试对象时，图像还没有加载进来，因此， 此时获得的高度，是不包含图像的。由于图像是异步加载的，因此，我 们需要等待一会，等图像加载完，才能获取正确的段落高度。
ii.等多久呢？这里设置的是100毫秒，如果图像较多，这样能保证图像确 实被加载了。不同设备上，这个参数值可以调整。
iii.如果图像不是已经存在于本地，而是从网络上动态加载的话，等待多少 时间，就很难预测了。此时就不应该简单地进行延时，而应该检测所有 图像加载完毕后，再获取高度。
4.获取了小节高度之后，可以根据前面获得的数据，计算页面的数据。前面已经介 绍过小节和页面的关系。简而言之，一个小节可能有若干页面。
a)计算的重点是页面对应哪个栏，重点是左缩进，以及上一段在栏目中剩余的 高度。这些数据计算出来之后，就可以用来生成页面的DOM对象。
b)计算页面数据，是比较复杂的逻辑，下面结合代码进行说明。
c)最后得到的结果，是一个数组pages，里面记录了每页的信息：
5.根据页面数据，实际生成页面的DOM对象，并且通过CSS参数的设置，让这个DOM 对象只显示指定的栏，从而实现将HTML内容转化为一系列页面对象的目的。
6.页面对象生成好之后，就可以按照需要，以各种方式显示。
7.性能的测试
a)算法，每个页面，对应的小节只有2～3个栏，因此，如果是100个页面的话， 也就是200～300个栏，不会对性能造成较大影响。
b)采取第2步～第5步的方法，对原始内容生成页面的DOM对象，在1G的单核 CPU、Android操作系统下，实测数据为：
i.第1个实验：原始内容的字符串长度是32，927字。最后一共生成了92 个页面。平均耗时大约3.5秒。
ii.第2个实验：原始内容的字符串长度是15，693字。最后一共生成了42 个页面。平均耗时大约1.4秒。
c)由此可见，本专利描述的算法，在大量生成页面时，即使对于较差的设备， 仍然能够保持足够好的性能。
8.如果原始内容发生变化，可以重复2～5的步骤，重新计算分页。因为所有的计 算都是在客户端，使用Javascript计算出来的，因此，重新计算分页是一个很 简单、也不会有太大耗时的操作。