本發(fā)明涉及互聯網技術領域，尤其涉及一種頁面顯示方法及裝置。

背景技術：

在瀏覽器/服務器(Browser/Server，簡稱B/S)架構下，用戶通常會利用瀏覽器向服務器請求加載頁面。在頁面加載的開始，頁面高度比較低，不會出現滾動條，而隨著加載數據的增加，頁面的高度會增高；當頁面高度大于瀏覽器窗口的高度時，瀏覽器窗口右側會出現一個滾動條，用戶拖動滾動條可以瀏覽未顯示的頁面內容。

對于頁面中需要居中顯示的主體內容，現有技術將所述主體內容居中顯示在瀏覽器窗口的可顯示區(qū)域內。具體地，參見圖1所示的頁面顯示示意圖，在瀏覽器窗口右側出現滾動條之前，所述主體內容(陰影部分)顯示在瀏覽器窗口中間；在瀏覽器窗口右側出現滾動條的時刻，所述主體內容會向左側跳一下，此時，所述主體內容位于滾動條左側的瀏覽器窗口區(qū)域的中間，即圖中虛線之間為所述主體內容的顯示位置。但是，當滾動條出現時，所述主體內容會出現跳動的情況，這會影響用戶對瀏覽器的使用體驗。

技術實現要素：

本發(fā)明實施例的主要目的在于提供一種頁面顯示方法及裝置，能夠在瀏覽器滾動條出現時，當前頁面內容不會向左跳動，提升了用戶體驗。

本發(fā)明實施例提供了一種頁面顯示方法，包括：

在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現；

在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間；其中，所述左側空閑區(qū)域是位于所述瀏覽器窗口最左側的、與所述右側滾動條的滑動區(qū)域相同大小的區(qū)域。

可選的，所述方法還包括：

確定所述瀏覽器窗口的寬度；

則，所述在出現所述右側滾動條的同時，所述控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間，包括：

若所述瀏覽器窗口的寬度大于預設寬度，則在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間。

可選的，所述方法還包括：

若所述瀏覽器窗口的寬度小于或等于所述預設寬度，則在出現所述右側滾動條的同時，控制所述目標頁面的主體內容居中顯示在所述滑動區(qū)域左側的區(qū)域內。

可選的，所述控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間，包括：

在所述瀏覽器窗口中標記所述左側空閑區(qū)域；

控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與被標記出的所述左側空閑區(qū)域之間。

可選的，所述控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間，包括：

根據所述瀏覽器窗口的寬度，控制所述目標頁面的主體內容局中顯示在所述瀏覽器窗口的區(qū)域內。

本發(fā)明實施例還提供了一種頁面顯示裝置，包括：

滾動條檢測單元，用于在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現；

頁面居中顯示單元，用于在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間；其中，所述左側空閑區(qū)域是位于所述瀏覽器窗口最左側的、與所述右側滾動條的滑動區(qū)域相同大小的區(qū)域。

可選的，所述裝置還包括：

窗口寬度確定單元，用于確定所述瀏覽器窗口的寬度；

則，所述頁面居中顯示單元，具體用于若所述瀏覽器窗口的寬度大于預設寬度，則在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間。

可選的，所述裝置還包括：

頁面局左顯示單元，用于若所述瀏覽器窗口的寬度小于或等于所述預設寬度，則在出現所述右側滾動條的同時，控制所述目標頁面的主體內容居中顯示在所述滑動區(qū)域左側的區(qū)域內。

可選的，所述頁面居中顯示單元包括：

空閑區(qū)域標記子單元，用于在所述瀏覽器窗口中標記所述左側空閑區(qū)域；

頁面居中顯示子單元，用于控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與被標記出的所述左側空閑區(qū)域之間。

可選的，所述頁面居中顯示單元，具體用于在出現所述右側滾動條的同時，根據所述瀏覽器窗口的寬度，控制所述目標頁面的主體內容局中顯示在所述瀏覽器窗口的區(qū)域內。

本發(fā)明實施例提供的一種頁面展示方法及裝置，在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現；在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間；其中，所述左側空閑區(qū)域是位于所述瀏覽器窗口最左側的、與所述右側滾動條的滑動區(qū)域相同大小的區(qū)域?？梢?，在滾動條出現之前，所述主體內容居中于瀏覽器窗口的中間位置，出現所述右側滾動條時，所述主體內容局中于右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間，實際上還是居中于瀏覽器窗口的中間位置，因此，所述右側滾動條出現前后，所述主體內容的位置不變，避免了現有技術在瀏覽器滾動條出現時頁面向左跳動的情況，提升了用戶體驗。

附圖說明

為了更清楚地說明本發(fā)明實施例或現有技術中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖是本發(fā)明的一些實施例，對于本領域普通技術人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據這些附圖獲得其他的附圖。

圖1為現有技術中頁面顯示示意圖；

圖2為本發(fā)明實施例提供的一種頁面顯示方法的流程示意圖；

圖3為本發(fā)明實施例提供的一種頁面顯示示意圖；

圖4為本發(fā)明實施例提供的另一種頁面顯示示意圖；

圖5為本發(fā)明實施例提供的另一種頁面顯示方法的流程示意圖；

圖6為本發(fā)明實施例提供的一種頁面顯示裝置的組成示意圖；

圖7為本發(fā)明實施例提供的另一種頁面顯示裝置的組成示意圖；

圖8為本發(fā)明實施例提供的另一種頁面顯示裝置的組成示意圖。

具體實施方式

為使本發(fā)明實施例的目的、技術方案和優(yōu)點更加清楚，下面將結合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例是本發(fā)明一部分實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領域普通技術人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

對于當前頁面中需要居中顯示的主體內容，在現有技術中，當瀏覽器窗口出現滾動條之前，使所述主體內容顯示在瀏覽器窗口的中間位置，當出現滾動條時，使所述主體內容顯示在滾動條滑動區(qū)域以外的窗口區(qū)域中間，因此，隨著滾動條的出現，所述主體內容將向左移動半個滾動條的寬度，用戶感覺所述主體內容向左跳動了一下。而本發(fā)明實施例提供的一種頁面顯示方法，通過限制所述主體內容的可顯示區(qū)域范圍，在滾動條出現前后使所述主體內容的顯示位置保持不變，避免了所述主體內容向左跳動的情況，提升了用戶體驗。

實施例一

參見圖2，為本發(fā)明實施例提供的一種頁面顯示方法的流程示意圖，該方法包括以下步驟：

S201：在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現。

用戶在瀏覽網頁時，通常會利用瀏覽器加載一個頁面，為便于描述，本實施例將當前被加載的頁面稱為目標頁面。

瀏覽器在加載目標頁面的過程中，當目標頁面的頁面高度低于或等于瀏覽器窗口的高度時，控制目標頁面的主體內容居中顯示在瀏覽器窗口的區(qū)域內。隨著目標頁面內容的不斷加載，當目標頁面的頁面高度高于瀏覽器窗口的高度時，瀏覽器右側將出現一個滾動條，此時，可以通過步驟S202限制所述主體內容的可顯示區(qū)域范圍，來保證所述主體內容的顯示位置保持不變，避免所述主體內容發(fā)生跳動。

需要說明的是，本實施例不限制所述主體內容所涉及的網頁內容，比如，對于上網主頁“hao123”，該網頁的主體內容可以是除左側浮動圖標以外的全部頁面內容，也可以是包括浮動圖標在內的全部頁面內容，又比如，對于淘寶主頁，該網頁的主體內容可以是淘寶主頁的全部頁面內容。

S202：在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間；其中，所述左側空閑區(qū)域是位于所述瀏覽器窗口最左側的、與所述右側滾動條的滑動區(qū)域相同大小的區(qū)域。

需要說明的是，本實施例不限制所述左側空閑區(qū)域的顏色，例如，所述左側空閑區(qū)域的顏色可以與所述主體內容兩側空閑區(qū)域的顏色相同，比如白色，所述左側空閑區(qū)域的顏色也可以與所述右側滾動條的顏色相同，比如藍色。

在步驟S202中，限制了所述主體內容的可顯示區(qū)域范圍，即，該可顯示區(qū)域范圍是右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間的可視區(qū)域，并使所述主體內容居中顯示在該可顯示區(qū)域范圍內。具體地，步驟S202可以采用以下兩種實施方式之一實現。

在一種實施方式中，驟S202中的“控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間”，可以包括步驟A1-A2：

A1：在所述瀏覽器窗口中標記所述左側空閑區(qū)域。

參見圖3所示的一種頁面顯示示意圖，在瀏覽器左側標記出一個與右側滾動條相同寬度的區(qū)域。

A2：控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與被標記出的所述左側空閑區(qū)域之間。

將右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間的可視區(qū)域作為所述主體內容的可顯示區(qū)域，并將所述主體內容在寬度上居中顯示在該可顯示區(qū)域內。

本實施例可以設置一個計算公式K＝L-2a，其中，K為所述主體內容的可顯示區(qū)域的寬度，即所述右側滾動條的滑動區(qū)域與所述左側空閑區(qū)域之間的可視區(qū)域的寬度，L為所述瀏覽器窗口的寬度，a為所述右側滾動條的寬度。采用該公式可以計算出寬度K，從而可以使所述主體內容顯示在寬度K的中間位置。

另外，該公式也適用于滾動條出現之前，即，在沒有出現滾動條時，a＝0，則K＝L，說明所述主體內容的可顯示區(qū)域為瀏覽器窗口的整個區(qū)域。

可見，通過上述實施方式，在出現滾動條時，將主體內容的顯示區(qū)域固定為右側滾動條與左側空閑條之間的區(qū)域，這樣，可以在滾動條出現前后，所述主體內容不會如現有技術那樣向左跳動，而始終均顯示在瀏覽器窗口的中間位置。

在另一種實施方式中，步驟S202中的“控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間”，可以包括步驟B1：

B1:根據所述瀏覽器窗口的寬度，控制所述目標頁面的主體內容局中顯示在所述瀏覽器窗口的區(qū)域內。

在這種實施方式中，參見圖4所示的另一種頁面顯示示意圖，可以以所述瀏覽器窗口的可視區(qū)域為基準，將所述瀏覽器窗口的可視區(qū)域作為所述主體內容的可顯示區(qū)域，并將所述主體內容顯示在該可顯示區(qū)域的中間位置。這種方式達到了上述第一種實施方式的相同效果，也就是說，雖然沒有如第一種實施方式那樣，在瀏覽器窗口內標記所述左側空閑區(qū)域，但在滾動條出現時，間接地在瀏覽器窗口內預留出了所述左側空閑區(qū)域。

本實施例可以設置一個計算公式K＝L，其中，K為所述主體內容的可顯示區(qū)域的寬度，L為所述瀏覽器窗口的寬度。采用該公式可以計算出寬度K，從而可以使所述主體內容顯示在寬度K的中間位置。

可見，通過上述實施方式，由于將所述主體內容的可顯示區(qū)域固定為瀏覽器窗口的可視區(qū)域，這樣，可以在滾動條出現前后，所述主體內容不會如現有技術那樣向左跳動，而始終顯示在瀏覽器窗口的中間位置。

在某些情況下，瀏覽器窗口可能會比較小，比如顯示設備屏幕較小的情況下，此時，如果通過上述實施例一那樣在瀏覽器窗口左側預留出所述左側空閑區(qū)域，所述主體內容左側的非頁面顯示區(qū)域看起來會明顯多于所述主體內容右側的非頁面顯示區(qū)域，這將會影響用戶的視覺效果。采用以下實施例二可解決上述問題。

實施例二

參見圖5，為本發(fā)明實施例提供的另一種頁面顯示方法的流程示意圖，該方法包括以下步驟：

S501：確定所述瀏覽器窗口的寬度。

在本實施例中，用戶在打開瀏覽器后，比如瀏覽器窗口處于最大化時，可以計算瀏覽器窗口的可視區(qū)域的寬度大小。

S502：在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現。

S503：若所述瀏覽器窗口的寬度大于預設寬度，則在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間。

其中，所述左側空閑區(qū)域是位于所述瀏覽器窗口最左側的、與所述右側滾動條的滑動區(qū)域相同大小的區(qū)域。

在本實施例中，可以預設一個寬度值，即所述預設寬度，判斷瀏覽器窗口的可視寬度是否大于所述預設寬度，如果是，說明瀏覽器窗口的可視寬度足夠大，則執(zhí)行S503，如果否，說明瀏覽器窗口的可視寬度較小，則執(zhí)行S504。

S504：若所述瀏覽器窗口的寬度小于或等于所述預設寬度，則在出現所述右側滾動條的同時，控制所述目標頁面的主體內容居中顯示在所述滑動區(qū)域左側的區(qū)域內。

當顯示設備屏幕較小，導致瀏覽器窗口的寬度始終小于或等于所述預設寬度的情況，可以如現有技術那樣，在出現所述右側滾動條的同時，使所述主體內容向左跳動1/2滾動條的寬度。

當用戶操作瀏覽器窗口，比如拖拽瀏覽器窗口左邊界和/或右邊界，導致瀏覽器窗口的寬度小于或等于所述預設寬度的情況，可以在檢測到瀏覽器窗口的寬度小于或等于所述預設寬度時，使所述主體內容向左跳動1/2滾動條的寬度。

采用上述這方式，雖然出現了向左跳動的情況，但可以保證用戶使用瀏覽器時的視覺效果。

本發(fā)明實施例提供的一種頁面展示方法，在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現；在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間；其中，所述左側空閑區(qū)域是位于所述瀏覽器窗口最左側的、與所述右側滾動條的滑動區(qū)域相同大小的區(qū)域?？梢?，在滾動條出現之前，所述主體內容居中于瀏覽器窗口的中間位置，出現所述右側滾動條時，所述主體內容局中于右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間，實際上還是居中于瀏覽器窗口的中間位置，因此，所述右側滾動條出現前后，所述主體內容的位置不變，避免了現有技術在瀏覽器滾動條出現時頁面向左跳動的情況，提升了用戶體驗。

另外，對于頁面高度固定的網頁，除了采用上述頁面的顯示方式外，本實施例還可以采用下述方式顯示頁面：

首先確定頁面的固定顯示高度；對于頁面高度小于或等于瀏覽器窗口高度的目標頁面，使瀏覽器窗口不顯示滾動條，并控制目標頁面的主體內容始終居中顯示在瀏覽器窗口的可視區(qū)域內；對于頁面高度大于瀏覽器窗口高度的目標頁面，使瀏覽器窗口右側自始至終顯示滾動條，并控制目標頁面的主體內容始終居中顯示在右側滾動條左側的可視區(qū)域內。

參見圖6，為本發(fā)明實施例提供的一種頁面顯示裝置的組成示意圖，該裝置600包括：

滾動條檢測單元601，用于在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現；

頁面居中顯示單元602，用于在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間；其中，所述左側空閑區(qū)域是位于所述瀏覽器窗口最左側的、與所述右側滾動條的滑動區(qū)域相同大小的區(qū)域。

其中，所述頁面居中顯示單元602可以包括：

空閑區(qū)域標記子單元，用于在所述瀏覽器窗口中標記所述左側空閑區(qū)域；

頁面居中顯示子單元，用于控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與被標記出的所述左側空閑區(qū)域之間。

或者，所述頁面居中顯示單元602，可以具體用于在出現所述右側滾動條的同時，根據所述瀏覽器窗口的寬度，控制所述目標頁面的主體內容局中顯示在所述瀏覽器窗口的區(qū)域內。

參見圖7，為本發(fā)明實施例提供的另一種頁面顯示裝置的組成示意圖，該裝置700包括：

窗口寬度確定單元702，用于確定所述瀏覽器窗口的寬度；

滾動條檢測單元702，用于在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現；

頁面居中顯示單元703，用于若所述瀏覽器窗口的寬度大于預設寬度，則在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間。

頁面局左顯示單元704，用于若所述瀏覽器窗口的寬度小于或等于所述預設寬度，則在出現所述右側滾動條的同時，控制所述目標頁面的主體內容居中顯示在所述滑動區(qū)域左側的區(qū)域內。

其中，所述頁面居中顯示單元703可以包括：

空閑區(qū)域標記子單元，用于在所述瀏覽器窗口中標記所述左側空閑區(qū)域；

頁面居中顯示子單元，用于控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與被標記出的所述左側空閑區(qū)域之間。

或者，所述頁面居中顯示單元703，可以具體用于在出現所述右側滾動條的同時，根據所述瀏覽器窗口的寬度，控制所述目標頁面的主體內容局中顯示在所述瀏覽器窗口的區(qū)域內。

參閱圖8，圖8為本發(fā)明實施例提供的另一種頁面顯示裝置的組成示意圖，所述電纜調制解調器800包括存儲器801和接收器802，以及分別與所述存儲器801和所述接收器802連接的處理器803，所述存儲器801用于存儲一組程序指令，所述處理器803用于調用所述存儲器801存儲的程序指令執(zhí)行如下操作：

在利用瀏覽器加載目標頁面的過程中，檢測瀏覽器窗口的右側滾動條是否出現；

在出現所述右側滾動條的同時，控制所述目標頁面的主體內容局中顯示在所述右側滾動條的滑動區(qū)域與左側空閑區(qū)域之間；其中，所述左側空閑區(qū)域是位于所述瀏覽器窗口最左側的、與所述右側滾動條的滑動區(qū)域相同大小的區(qū)域。

可選地，所述處理器803可以為中央處理器(Central Processing Unit，CPU)，所述存儲器801可以為隨機存取存儲器(Random Access Memory，RAM)類型的內部存儲器，所述接收器802可以包含普通物理接口，所述物理接口可以為以太(Ethernet)接口或異步傳輸模式(Asynchronous Transfer Mode，ATM)接口。所述處理器803、接收器802和存儲器801可以集成為一個或多個獨立的電路或硬件，如：專用集成電路(Application Specific Integrated Circuit，ASIC)。

通過以上的實施方式的描述可知，本領域的技術人員可以清楚地了解到上述實施例方法中的全部或部分步驟可借助軟件加必需的通用硬件平臺的方式來實現?；谶@樣的理解，本發(fā)明的技術方案本質上或者說對現有技術做出貢獻的部分可以以軟件產品的形式體現出來，該計算機軟件產品可以存儲在存儲介質中，如ROM/RAM、磁碟、光盤等，包括若干指令用以使得一臺計算機設備(可以是個人計算機，服務器，或者諸如媒體網關等網絡通信設備，等等)執(zhí)行本發(fā)明各個實施例或者實施例的某些部分所述的方法。

需要說明的是，本說明書中各個實施例采用遞進的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似部分互相參見即可。對于實施例公開的裝置而言，由于其與實施例公開的方法相對應，所以描述的比較簡單，相關之處參見方法部分說明即可。

還需要說明的是，在本文中，術語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者設備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括所述要素的過程、方法、物品或者設備中還存在另外的相同要素。

對所公開的實施例的上述說明，使本領域專業(yè)技術人員能夠實現或使用本發(fā)明。對這些實施例的多種修改對本領域的專業(yè)技術人員來說將是顯而易見的，本文中所定義的一般原理可以在不脫離本發(fā)明的精神或范圍的情況下，在其它實施例中實現。因此，本發(fā)明將不會被限制于本文所示的這些實施例，而是要符合與本文所公開的原理和新穎特點相一致的最寬的范圍。