[發明專利]采用HTML5技術對網頁內容進行分頁顯示的方法

有效

• 申請號: 201310233801.8
• 申請日: 2013-06-14
• 公開（公告）號: CN103294819B
• 公開（公告）日: 2018-08-31
• 發明（設計）人: 張昀
• 申請（專利權）人: 北京新學堂網絡科技有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 暫無信息
• 代理人: 暫無信息

本發明涉及一種采用HTML5技術對網頁內容進行分頁顯示的方法，網頁上需要分頁顯示的基本內容單元，是圖書中的一個連續不分頁的內容區塊，通常這是圖書的一個章；將較長的網頁內容根據圖書的每個章，分拆為多個小節，需要將較長的網頁內容進行拆分，拆分為若干個小節，這個拆分的部分，稱為“小節”，將很多個小節組合起來，共同構成完整的分頁效果，然后一部分一部分地顯示在欄目中。本發明能夠讓HTML5的內容，以分頁的方式進行顯示，高性能的算法，即使上百頁的內容，也可能在幾秒內完成分頁，速度可媲美PC機上Word的分頁速度，內容發生變化時，可以很方便的重新計算分頁，完全采用HTML5代碼實現，因而有著良好的可移植性。

技術領域

本發明屬于一種對網頁內容進行分頁顯示的方法，具體的是采用HTML5技術對網頁 內容進行分頁顯示的方法。

背景技術

iBook出現以后，電子圖書的閱讀方式，變成類似于實體書的“翻書閱讀”效果。比以前來講，用戶體驗有了極大的提升，這種閱讀方式，有兩個特點：1、采用分頁的顯示 方式，圖書是一頁一頁的顯示；2、切換頁面時，采取翻頁的效果，類似于真實的圖書。 iBook不只支持純文本的圖書顯示，還能支持帶格式的圖書顯示。iBook的標準文檔格式 是ePub格式。ePub底層就是HTML5的格式，因此iBook能夠顯示各種復雜的HTML5排版 格式。iBook的這種閱讀方式，其主要的好處是更像實體的圖書，從而使得用戶閱讀時， 更有真實感。在強調用戶體驗的時代，這種閱讀模式得到了大家的廣泛好評。iBook是采 用原生態的ObjectC來編寫的，雖然在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的圖書翻頁顯示效果。