頁面排版方法、裝置及系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及移動(dòng)終端瀏覽器領(lǐng)域，更為具體地，涉及用于對在移動(dòng)終端上顯示的網(wǎng)頁內(nèi)容進(jìn)行適屏排版處理的頁面排版方法、裝置及系統(tǒng)。
【背景技術(shù)】
[0002]目前，移動(dòng)終端上顯示的網(wǎng)頁內(nèi)容大部分都是從PC端獲取的。PC端的網(wǎng)頁內(nèi)容都是基于PC機(jī)的屏幕尺寸來設(shè)計(jì)的，由于PC機(jī)的屏幕尺寸遠(yuǎn)遠(yuǎn)大于移動(dòng)終端的屏幕尺寸，如果不對從PC端獲取的網(wǎng)頁內(nèi)容進(jìn)行適屏處理，則在移動(dòng)終端上顯示該網(wǎng)頁內(nèi)容時(shí)，將會有大部分網(wǎng)頁內(nèi)容顯示在移動(dòng)終端的屏幕之外，從而使得移動(dòng)終端的用戶在閱讀該網(wǎng)頁內(nèi)容時(shí)需要進(jìn)行左右移動(dòng)操作處理，由此給用戶的閱讀帶來不佳的體驗(yàn)。
[0003]為了解決上述問題，目前移動(dòng)終端瀏覽器都采用了適屏排版技術(shù)，該適屏排版技術(shù)是目前WEB瀏覽的一種主要處理方式。在適屏排版技術(shù)中，原有網(wǎng)頁字體大小保持不變，而是將超出手機(jī)屏寬的部分網(wǎng)頁內(nèi)容折行顯示。這樣，用戶僅僅通過上下滑動(dòng)屏幕，就可以方便地瀏覽網(wǎng)頁。
[0004]適屏排版的難點(diǎn)在于需要對原始網(wǎng)頁的樣式進(jìn)行特別處理，在保證適屏顯示的同時(shí)盡量保持較好的網(wǎng)頁整體布局。另外，針對表格、圖文之類的元素或者元素組合，也需要一些特別處理，由此保證這些元素也能適屏且不對整體排版效果造成破壞。
[0005]目前，在移動(dòng)終端上一般都采用私有的排版協(xié)議來進(jìn)行上述適屏排版處理。在這種情況下，在移動(dòng)終端上安裝的瀏覽器客戶端往往不是比如類似于android自帶瀏覽器Chrome和iPhone自帶瀏覽器Safari之類的標(biāo)準(zhǔn)瀏覽器。這種瀏覽器客戶端不具有標(biāo)準(zhǔn)瀏覽器內(nèi)核，從而無法單獨(dú)解析標(biāo)準(zhǔn)的HTML和CSS，并且瀏覽器客戶端也需要和服務(wù)器一一對應(yīng)，換言之，對端服務(wù)器也需要采用相應(yīng)的私有排版協(xié)議，才能進(jìn)行相應(yīng)的數(shù)據(jù)解析和傳輸。
[0006]然而，這類適屏排版處理方式有以下無法克服的問題:(1)由于該種瀏覽器沒有采用標(biāo)準(zhǔn)的瀏覽器內(nèi)核，因此在一些平臺上會被禁止；(2)由于采用私有協(xié)議，后期會非常麻煩，往往需要同時(shí)更新客戶端和服務(wù)器；(3)跨平臺移植效率低，無法廣泛兼容。

【發(fā)明內(nèi)容】

[0007]鑒于上述，本發(fā)明提出了一種頁面排版方法、裝置及系統(tǒng)，利用該方法、裝置及系統(tǒng)，通過確定網(wǎng)頁數(shù)據(jù)的DOM樹中各節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度，在節(jié)點(diǎn)是表格節(jié)點(diǎn)且節(jié)點(diǎn)顯示寬度大于移動(dòng)終端的屏幕寬度時(shí)，修改該節(jié)點(diǎn)及子節(jié)點(diǎn)的節(jié)點(diǎn)類型和節(jié)點(diǎn)CSS屬性，可以實(shí)現(xiàn)基于通用排版協(xié)議的適屏排版處理。
[0008]根據(jù)本發(fā)明的一個(gè)方面，提供了一種頁面排版方法，包括:在接收到基于移動(dòng)終端發(fā)出的網(wǎng)頁加載請求而從目標(biāo)網(wǎng)頁內(nèi)容服務(wù)器獲取的網(wǎng)頁數(shù)據(jù)后，將所述網(wǎng)頁數(shù)據(jù)解析成與所述網(wǎng)頁數(shù)據(jù)對應(yīng)的DOM樹及對應(yīng)的節(jié)點(diǎn)CSS屬性，其中，所述網(wǎng)頁加載請求與移動(dòng)終端的屏幕寬度信息一起發(fā)送給中間件服務(wù)器；遍歷所述DOM樹，確定所述DOM樹中各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度；基于移動(dòng)終端的屏幕寬度和所確定的各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度，修改各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)類型和節(jié)點(diǎn)CSS屬性；以及根據(jù)所述DOM樹以及修改后的各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)CSS屬性，生成經(jīng)過適屏排版處理后的網(wǎng)頁頁面，以供發(fā)送給移動(dòng)終端來進(jìn)行瀏覽。
[0009]在上述方面的一個(gè)或多個(gè)示例中，所述節(jié)點(diǎn)可以包括文本節(jié)點(diǎn)、圖片節(jié)點(diǎn)和表格節(jié)點(diǎn)。
[0010]在上述方面的一個(gè)或多個(gè)示例中,在所述節(jié)點(diǎn)的類型是表格節(jié)點(diǎn)時(shí),確定所述DOM樹中各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度可以包括:遍歷所述表格節(jié)點(diǎn)的所有行，確定各行中包含的表格單元的顯示寬度；將各行中的所有表格單元的顯示寬度相加，計(jì)算出各行的行顯示寬度；從所計(jì)算出的各行的行顯示寬度中選擇最大的行顯示寬度，作為所述表格節(jié)點(diǎn)的節(jié)點(diǎn)顯不覽度。
[0011]在上述方面的一個(gè)或多個(gè)示例中，確定表格單元的顯示寬度包括:確定該表格單元的所有葉節(jié)點(diǎn)的樣式類型和顯示寬度；按照將樣式類型為行內(nèi)元素的連續(xù)葉節(jié)點(diǎn)的顯示寬度相加以及其它葉節(jié)點(diǎn)的顯示寬度保持不變的方式，對該表格單元的所有葉節(jié)點(diǎn)的顯示寬度進(jìn)行處理；以及從經(jīng)過處理后的顯示寬度中選擇最大的顯示寬度，作為該表格單元的顯不覽度。
[0012]在上述方面的一個(gè)或多個(gè)示例中，在所述節(jié)點(diǎn)的類型是文本節(jié)點(diǎn)或圖片節(jié)點(diǎn)時(shí)，確定所述DOM樹中各個(gè)節(jié)點(diǎn)的顯示寬度可以包括:根據(jù)文本寬度計(jì)算方法或圖片寬度計(jì)算方法計(jì)算節(jié)點(diǎn)顯示寬度。
[0013]在上述方面的一個(gè)或多個(gè)示例中，在所述節(jié)點(diǎn)的類型是表格節(jié)點(diǎn)時(shí)，基于移動(dòng)終端的屏幕寬度和所確定的各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度，修改各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)類型和節(jié)點(diǎn)CSS屬性可以包括:在所述節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度不大于所述移動(dòng)終端的屏幕寬度時(shí)，保持所述節(jié)點(diǎn)的節(jié)點(diǎn)類型和節(jié)點(diǎn)CSS屬性不變；以及在所述節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度大于所述移動(dòng)終端的屏幕寬度時(shí)，將所述節(jié)點(diǎn)自身及子節(jié)點(diǎn)的節(jié)點(diǎn)類型從表格節(jié)點(diǎn)修改為普通節(jié)點(diǎn)，并且將所述節(jié)點(diǎn)自身及子節(jié)點(diǎn)中的經(jīng)過節(jié)點(diǎn)類型修改后的表格單元的樣式修改為display:1nline-block。
[0014]在上述方面的一個(gè)或多個(gè)示例中，基于移動(dòng)終端的屏幕寬度和所確定的各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度，修改各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)類型和節(jié)點(diǎn)CSS屬性還可以包括:在所述節(jié)點(diǎn)的節(jié)點(diǎn)CSS屬性中包含有允許被限制輸出的CSS樣式時(shí)，將所述節(jié)點(diǎn)CSS屬性修改為禁止輸出所述CSS樣式。
[0015]根據(jù)本發(fā)明的另一方面，提供了一種表格節(jié)點(diǎn)顯示寬度確定方法，包括:遍歷所述表格節(jié)點(diǎn)的所有行，確定各行中包含的表格單元的顯示寬度；將各行中的所有表格單元的顯示寬度相加，計(jì)算出各行的行顯示寬度；從所計(jì)算出的各行的行顯示寬度中選擇最大的行顯示寬度，作為所述表格節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度。
[0016]在上述方面的一個(gè)或多個(gè)示例中，確定表格單元的顯示寬度可以包括:確定該表格單元的所有葉節(jié)點(diǎn)的樣式類型和顯示寬度；按照將樣式類型為行內(nèi)元素的連續(xù)葉節(jié)點(diǎn)的顯示寬度相加以及其它葉節(jié)點(diǎn)的顯示寬度保持不變的方式，對該表格單元的所有葉節(jié)點(diǎn)的顯示寬度進(jìn)行處理；以及從經(jīng)過處理后的顯示寬度中選擇最大的顯示寬度，作為該表格單元的顯示寬度。
[0017]根據(jù)本發(fā)明的另一方面，提供了一種頁面排版裝置，包括:解析單元，用于在接收到基于移動(dòng)終端發(fā)出的網(wǎng)頁加載請求而從目標(biāo)服務(wù)器獲取的網(wǎng)頁數(shù)據(jù)后，將所述網(wǎng)頁數(shù)據(jù)解析成與所述網(wǎng)頁數(shù)據(jù)對應(yīng)的DOM樹及對應(yīng)的節(jié)點(diǎn)CSS屬性，其中，所述網(wǎng)頁加載請求與移動(dòng)終端的屏幕寬度信息一起發(fā)送給中間件服務(wù)器；節(jié)點(diǎn)顯示寬度確定單元，用于遍歷所述DOM樹，確定所述DOM樹中各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度；類型和屬性修改單元，用于基于移動(dòng)終端的屏幕寬度和所確定的各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度，修改各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)類型和節(jié)點(diǎn)CSS屬性；以及網(wǎng)頁頁面生成單元，用于根據(jù)所述DOM樹以及修改后的各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)CSS屬性，生成經(jīng)過適屏排版處理后的網(wǎng)頁頁面，以供發(fā)送給移動(dòng)終端來進(jìn)行瀏覽。
[0018]在上述方面的一個(gè)或多個(gè)示例中，所述節(jié)點(diǎn)包括文本節(jié)點(diǎn)、圖片節(jié)點(diǎn)和表格節(jié)點(diǎn)，所述節(jié)點(diǎn)顯示寬度確定單元可以包括表格節(jié)點(diǎn)顯示寬度確定模塊，用于確定表格節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度，以及文本及圖片節(jié)點(diǎn)顯示寬度確定模塊，用于根據(jù)文本寬度計(jì)算方法或圖片寬度計(jì)算方法計(jì)算節(jié)點(diǎn)顯示寬度。
[0019]在上述方面的一個(gè)或多個(gè)示例中，所述表格節(jié)點(diǎn)顯示寬度確定模塊可以包括:表格單元顯示寬度確定模塊，用于遍歷所述表格節(jié)點(diǎn)的所有行，確定各行中包含的表格單元的顯示寬度；行顯示寬度計(jì)算模塊，用于將各行中的所有表格單元的顯示寬度相加，計(jì)算出各行的行顯示寬度；以及第一選擇模塊，用于從所計(jì)算出的各行的行顯示寬度中選擇最大的行顯示寬度，作為所述表格節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度。
[0020]在上述方面的一個(gè)或多個(gè)示例中，所述表格單元顯示寬度確定模塊可以包括:樣式類型及顯示寬度確定模塊，用于確定該表格單元的所有葉節(jié)點(diǎn)的樣式類型和顯示寬度；顯示寬度處理模塊，用于按照將樣式類型為行內(nèi)元素的連續(xù)葉節(jié)點(diǎn)的顯示寬度相加以及其它葉節(jié)點(diǎn)的顯示寬度保持不變的方式，對該表格單元的所有葉節(jié)點(diǎn)的顯示寬度進(jìn)行處理；以及第二選擇模塊，用于從經(jīng)過處理后的顯示寬度中選擇最大的顯示寬度，作為該表格單元的顯示寬度。
[0021]在上述方面的一個(gè)或多個(gè)示例中，在所述節(jié)點(diǎn)的類型是表格節(jié)點(diǎn)時(shí)，所述類型和屬性修改單元被配置為:在所述節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度不大于所述移動(dòng)終端的屏幕寬度時(shí)，保持所述節(jié)點(diǎn)的節(jié)點(diǎn)類型和節(jié)點(diǎn)CSS屬性不變；以及在所述節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度大于所述移動(dòng)終端的屏幕寬度時(shí)，將所述節(jié)點(diǎn)自身及子節(jié)點(diǎn)的節(jié)點(diǎn)類型從表格節(jié)點(diǎn)修改為普通節(jié)點(diǎn)，并且將所述節(jié)點(diǎn)自身及子節(jié)點(diǎn)中的經(jīng)過節(jié)點(diǎn)類型修改后的表格單元的樣式修改為display:1nline-block。
[0022]根據(jù)本發(fā)明的另一方面，提供了一種頁面排版系統(tǒng)，包括:移動(dòng)終端；中間件服務(wù)器，包括如上所述的頁面排版裝置；以及目標(biāo)網(wǎng)頁內(nèi)容服務(wù)器，用于存儲網(wǎng)頁內(nèi)容數(shù)據(jù)。
[0023]利用上述方法、裝置及系統(tǒng)，通過確定網(wǎng)頁數(shù)據(jù)的DOM樹中各節(jié)點(diǎn)的節(jié)點(diǎn)顯示寬度，在節(jié)點(diǎn)是表格節(jié)點(diǎn)且節(jié)點(diǎn)顯示寬度大于移動(dòng)終端的屏幕寬度時(shí)，將所述節(jié)點(diǎn)自身及子節(jié)點(diǎn)的節(jié)點(diǎn)類型從表格節(jié)點(diǎn)修改為普通節(jié)點(diǎn)，并且將所述節(jié)點(diǎn)自身及子節(jié)點(diǎn)中的經(jīng)過節(jié)點(diǎn)類型修改后的表格單元的樣式修改為display:1nline-block,可以實(shí)現(xiàn)基于通用排版協(xié)議的適屏排版處理。
[0024]為了實(shí)現(xiàn)上述以及相關(guān)目的，本發(fā)明的一個(gè)或多個(gè)方面包括后面將詳細(xì)說明并在權(quán)利要求中特別指出的特征。下面的說明以及附圖詳細(xì)說明了本發(fā)明的某些示例性方面。然而，這些方面指示的僅僅是可使用本發(fā)明的原理的各種方式中