網(wǎng)頁的顯示處理方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)絡(luò)技術(shù)領(lǐng)域，尤其涉及網(wǎng)頁的顯示處理方法及裝置。
【背景技術(shù)】
[0002]隨著移動互聯(lián)網(wǎng)的快速發(fā)展，通過手機訪問互聯(lián)網(wǎng)，可以獲得各種各樣的信息。但是由于手機的屏幕限制，若在手機上訪問較大的頁面，可能需要滾動頁面，以進行信息的完整閱讀?，F(xiàn)有技術(shù)中，常采用將背景圖全部過濾，高度被設(shè)置為auto。通過上述處理后，雖然可以達到顯示的頁面適用顯示屏幕進行顯示的目的，但是其顯示效果不佳，甚至?xí)斐刹糠衷責(zé)o法顯示。

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

[0003]本發(fā)明實施例的主要目的在于解決現(xiàn)有技術(shù)中為達到顯示的頁面適用顯示屏幕進行顯示的目的時，顯示的效果不佳的技術(shù)問題。
[0004]為實現(xiàn)上述目的，本發(fā)明實施例提供了一種網(wǎng)頁的顯示處理方法，包括以下步驟:
[0005]接收頁面顯示請求，所述頁面顯示請求包括待顯示的頁面數(shù)據(jù)，且所述頁面數(shù)據(jù)為web頁面；
[0006]根據(jù)所述頁面顯示請求，對待顯示的頁面數(shù)據(jù)進行解析，并生成render樹，同時獲得所述render樹中所有render節(jié)點的樣式；
[0007]按照預(yù)設(shè)的樣式規(guī)則，對各render節(jié)點的樣式進行調(diào)整，獲得各render節(jié)點最終的樣式；
[0008]按照預(yù)設(shè)的寬度規(guī)則，對各render節(jié)點對應(yīng)的元素的寬度進行調(diào)整，獲得各render節(jié)點對應(yīng)的元素的最終寬度。
[0009]此外，為實現(xiàn)上述目的，本發(fā)明實施例還提供了一種網(wǎng)頁的顯示處理裝置，包括:
[0010]頁面數(shù)據(jù)接收模塊，用于接收頁面顯示請求，所述頁面顯示請求包括待顯示的頁面數(shù)據(jù)，且所述頁面數(shù)據(jù)為web頁面；
[0011]頁面數(shù)據(jù)解析模塊，用于根據(jù)所述頁面顯示請求，對待顯示的頁面數(shù)據(jù)進行解析，并生成render樹，同時獲得所述render樹中所有render節(jié)點的樣式；
[0012]樣式調(diào)整模塊，用于按照預(yù)設(shè)的樣式規(guī)則，對各render節(jié)點的樣式進行調(diào)整，獲得各render節(jié)點最終的樣式；
[0013]寬度調(diào)整模塊，用于按照預(yù)設(shè)的寬度規(guī)則，對各render節(jié)點對應(yīng)的元素的寬度進行調(diào)整，獲得render節(jié)點對應(yīng)的元素的最終寬度。
[0014]本發(fā)明實施例通過預(yù)先設(shè)置的樣式規(guī)則以及寬度規(guī)則，分別對各render節(jié)點的樣式及對應(yīng)的元素的邏輯寬度進行調(diào)整，從而使得頁面可以在顯示終端的顯示屏幕上自適應(yīng)進行顯示，不需要左右滾動頁面，而且顯示效果更佳。
【附圖說明】
[0015]圖1是本發(fā)明網(wǎng)頁的顯示處理方法所實現(xiàn)的終端的硬件架構(gòu)示意圖；
[0016]圖2是本發(fā)明網(wǎng)頁的顯示處理方法的流程示意圖；
[0017]圖3是本發(fā)明網(wǎng)頁的顯示處理方法中根據(jù)背景圖過濾規(guī)則對各render節(jié)點的樣式進行調(diào)整的細化流程示意圖；
[0018]圖4是本發(fā)明網(wǎng)頁的顯示處理方法相關(guān)的render樹的示例圖；
[0019]圖5是本發(fā)明網(wǎng)頁的顯示處理方法中根據(jù)高度規(guī)則對各render節(jié)點的樣式進行調(diào)整的細化流程示意圖；
[0020]圖6是本發(fā)明相關(guān)的元素的結(jié)構(gòu)示例圖；
[0021]圖7是本發(fā)明網(wǎng)頁的顯示處理方法中根據(jù)行高規(guī)則對各render節(jié)點的樣式進行調(diào)整的細化流程示意圖；
[0022]圖8是本發(fā)明網(wǎng)頁的顯示處理方法中根據(jù)空格處理規(guī)則對各render節(jié)點的樣式進行調(diào)整的細化流程示意圖；
[0023]圖9是本發(fā)明網(wǎng)頁的顯示處理方法中根據(jù)顯示屬性調(diào)整規(guī)則對各render節(jié)點的樣式進行調(diào)整的細化流程示意圖；
[0024]圖10是本發(fā)明網(wǎng)頁的顯示處理方法中根據(jù)寬度規(guī)則對各render節(jié)點對應(yīng)的元素的寬度進行調(diào)整的細化流程示意圖；
[0025]圖11是本發(fā)明相關(guān)的父親元素與子元素的結(jié)構(gòu)示例圖；
[0026]圖12是本發(fā)明頁面的顯示處理裝置的功能模塊示意圖；
[0027]圖13是本發(fā)明頁面的顯示處理裝置中樣式調(diào)整模塊的細化功能模塊示意圖。
[0028]本發(fā)明目的的實現(xiàn)、功能特點及優(yōu)點將結(jié)合實施例，參照附圖做進一步說明。
【具體實施方式】
[0029]以下結(jié)合說明書附圖及具體實施例進一步說明本發(fā)明的技術(shù)方案。應(yīng)當理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0030]本發(fā)明的核心思想是，通過預(yù)先設(shè)置頁面的顯示規(guī)則，當終端訪問的頁面的寬度大于終端屏幕的顯示寬度時，利用該頁面的顯示規(guī)則對頁面數(shù)據(jù)進行處理，以使處理后的頁面的寬度適應(yīng)終端屏幕的顯示寬度。根據(jù)該頁面的顯示規(guī)則所處理的頁面可以解決現(xiàn)有技術(shù)中直接過濾背景圖而導(dǎo)致頁面顯示效果很差的技術(shù)問題。
[0031]如圖1所示，本發(fā)明所運行的顯示終端可包括處理器101、存儲器102、用戶接口103、網(wǎng)絡(luò)接口 104、通信總線105。通信總線105用于終端中各組成部件之間的通信，用戶接口 103可包括輸入模塊及顯示模塊，其中輸入模塊用于接收用戶輸入的信息，并將其發(fā)送至處理器101，以供處理器101進行相應(yīng)的處理，并控制顯示模塊對處理結(jié)果進行顯示。網(wǎng)絡(luò)接口 104用于顯示終端與外部進行互相通信，該網(wǎng)絡(luò)接口主要包括有線接口和無線接口，例如RS232模塊、射頻模塊、WIFI模塊等等。該終端上安裝有各種應(yīng)用程序，例如瀏覽器，用戶利用該瀏覽器，并通過網(wǎng)絡(luò)接口可訪問互聯(lián)網(wǎng)，以獲得互聯(lián)網(wǎng)上的各種信息。例如即時通訊軟件，用戶利用即時通訊軟件，并通過網(wǎng)絡(luò)接口與其他用戶進行信息互通。存儲器102可以包括一個或一個以上計算機可讀存儲介質(zhì)，而且其不但包括內(nèi)部存儲器，還包括外部存儲器。該存儲器中存儲有操作系統(tǒng)、頁面的顯示處理系統(tǒng)等其他系統(tǒng)。處理器101則可以調(diào)用存儲器102中的頁面的顯示處理系統(tǒng)，以實現(xiàn)頁面適應(yīng)顯示終端的顯示屏幕進行顯示，且顯示效果更佳，甚至不會造成頁面元素的丟失。
[0032]如圖2所示，基于上述終端，處理器101調(diào)用存儲器102中的頁面的顯示處理系統(tǒng)，實現(xiàn)的頁面的顯示處理方法包括以下步驟:
[0033]步驟S110、接收服務(wù)器根據(jù)終端發(fā)起的頁面訪問請求而返回的頁面數(shù)據(jù)，且所述頁面數(shù)據(jù)為web頁面的數(shù)據(jù)；
[0034]顯示終端利用瀏覽器向服務(wù)器發(fā)起頁面訪問請求，服務(wù)器則獲取要訪問的頁面數(shù)據(jù)，并將獲取的頁面數(shù)據(jù)通過頁面顯示請求返回至所述顯示終端。顯示終端則接收頁面數(shù)據(jù)，并判斷該頁面數(shù)據(jù)是否為web頁面，若是則需要對頁面的顯示進行處理，若不是則不做處理，對頁面數(shù)據(jù)進行顯示。本實施例中，該顯示終端包括手機、平板電腦、ipad、掌上電腦等屏幕相對較小的終端。web頁面是指用于在PC機上顯示，且頁面的寬度比顯示終端的顯示屏幕的寬度大的頁面。
[0035]步驟S120、對待顯示的頁面數(shù)據(jù)進行解析，并生成render樹，同時獲得所述render樹中所有render節(jié)點的樣式；
[0036]對接收到的頁面數(shù)據(jù)進行解析，并生成dom樹和render樹。其中，dom樹用于描述頁面的信息，render樹用于設(shè)置dom樹的頁面布局及頁面樣式，以控制dom樹如何顯示在顯示終端的屏幕上。因此，在對待顯示的頁面數(shù)據(jù)進行解析后生成的render樹中，可以獲得所有render節(jié)點的原始樣式。
[0037]步驟S130、按照預(yù)設(shè)的樣式規(guī)則，對各render節(jié)點的樣式進行調(diào)整，獲得各render節(jié)點最終的樣式；
[0038]本發(fā)明實施例預(yù)先設(shè)置相應(yīng)的樣式規(guī)則，該樣式規(guī)則可包括背景圖過濾規(guī)則、高度規(guī)則、行高規(guī)則、flattern規(guī)則、字體反色規(guī)則、邊框空白規(guī)則、邊界處理規(guī)則、空格處理規(guī)則及輸入框處理規(guī)則等等。根據(jù)該預(yù)先設(shè)置的樣式規(guī)則，依次獲取render樹的各render節(jié)點，并對各render節(jié)點的樣式進行調(diào)整，待所有render節(jié)點都進行樣式調(diào)整后，根據(jù)調(diào)整后的render節(jié)點樣式進行控制的頁面顯示將滿足自適應(yīng)顯示屏幕的要求。
[0039]步驟S140、按照預(yù)設(shè)的寬度規(guī)則，對各render節(jié)點對應(yīng)的元素的寬度進行調(diào)整，獲得各render節(jié)點對應(yīng)的元素的最終寬度。
[0040]本發(fā)明實施例預(yù)先設(shè)置相應(yīng)的寬度規(guī)則，該寬度規(guī)則用于處理頁面中各元素的邏輯寬度大于顯示終端的屏幕寬度時，對各元素的邏輯寬度進行調(diào)整，以使得頁面的顯示滿足自適應(yīng)顯示屏幕。網(wǎng)頁由多個元素組成，該元素可包括文本、圖像、動畫、視頻、超鏈接、表格、框架、表單等基本元素，當然還可包括橫幅廣告、字母、懸停按鈕、日戳、計算器、音頻、視頻、Java Applet等其他元素。
[0041]本發(fā)明實施例通過預(yù)先設(shè)置的樣式規(guī)則以及寬度規(guī)則，分別對各render節(jié)點的樣式及對應(yīng)的元素的邏輯寬度進行調(diào)整，從而使得頁面可以在顯示終端的顯示屏幕上自適應(yīng)進行顯示，不需要左右滾動頁面，而且顯示效果更佳，甚至不會造成頁面元素的丟失。
[0042]以下將對不同的樣式規(guī)則的樣式調(diào)整過程進行具體的描述。
[0043](一)背景圖過濾規(guī)則
[0044]依次獲得每個render節(jié)點的樣式,其中包括當前render節(jié)點的屬性及屬性值、該render節(jié)點的元素類型等等。然后按照預(yù)設(shè)背景圖規(guī)則，對當前render節(jié)點的樣式進行判斷，確定當前render節(jié)點的樣式中是否需要清除背景圖,若當前render節(jié)點的樣式中需要清除背景圖，則清除所述當前render節(jié)點的背景圖。