[發(fā)明專利]網(wǎng)頁的顯示方法和瀏覽器

有效

• 申請?zhí)枺?/td>: 201310535769.9
• 申請日: 2013-11-01
• 公開（公告）號: CN103631867A
• 公開（公告）日: 2014-03-12
• 發(fā)明（設(shè)計）人: 陳虞付;任寰
• 申請（專利權(quán)）人: 北京奇虎科技有限公司;奇智軟件（北京）有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 北京智匯東方知識產(chǎn)權(quán)代理事務(wù)所(普通合伙) 11391
• 代理人: 康正德;郭海彬

技術(shù)領(lǐng)域

本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，特別是涉及一種網(wǎng)頁的顯示方法和瀏覽器。

背景技術(shù)

為了兼容各種顯示器尺寸，絕大多說的網(wǎng)站都將主體內(nèi)容部分集中在一個固定的區(qū)域內(nèi)，例如900像素大小的區(qū)域內(nèi)，隨著顯示器尺寸的增大，顯示器的顯示區(qū)域增大，遠超過網(wǎng)頁主題內(nèi)容的顯示區(qū)域，從而屏幕的大部分區(qū)域只能顯示空白或者特定預(yù)設(shè)的圖片。然而千變?nèi)f化的網(wǎng)頁的背景顏色或者圖片差異很到，這就導(dǎo)致難以滿足對視覺體驗要求較高的用戶，特別是要求瀏覽器一體化視覺體驗的用戶的需要。

針對以上用戶對瀏覽器顯示效果的需求，現(xiàn)有的瀏覽器所采用的方案由：通過擴展改變一些特定頁面的背景顏色或者圖片；將所有頁面的背景都設(shè)置成統(tǒng)一的背景色或者圖片。圖1是根據(jù)現(xiàn)有技術(shù)中改變特定頁面背景圖片后某網(wǎng)頁的顯示效果圖，圖2是根據(jù)現(xiàn)有技術(shù)中改變統(tǒng)一背景圖片后某網(wǎng)頁的顯示效果圖。

從以上效果圖中可以看出以上的解決方案存在兩方面的問題：一、影響頁面中主體內(nèi)容顯示；二、視覺效果差。因此，以上方案僅能針對特定的頁面設(shè)置特定背景色或者背景圖片，無法適用于大量的視覺分割差異較大的頁面，而且無法根據(jù)瀏覽器當(dāng)前主題的特性進行設(shè)置，從而無法與瀏覽器形成一體化的視覺效果。

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

鑒于上述問題，提出了本發(fā)明以便提供一種克服上述問題或者至少部分地解決上述問題的瀏覽器和相應(yīng)的網(wǎng)頁的顯示方法。

基于本發(fā)明的一個方面提供了一種網(wǎng)頁的顯示方法。該網(wǎng)頁顯示方法包括：獲取網(wǎng)頁的主題內(nèi)容區(qū)域；計算網(wǎng)頁中元素相對于所述主題內(nèi)容區(qū)域的位置關(guān)系；根據(jù)位置關(guān)系設(shè)置元素的顯示背景；按照設(shè)置后的顯示背景在瀏覽器中顯示網(wǎng)頁。

可選地，獲取網(wǎng)頁的主題內(nèi)容區(qū)域包括：計算網(wǎng)頁中各元素的邊界信息；根據(jù)邊界信息確定主題內(nèi)容區(qū)域。

可選地，根據(jù)邊界信息確定主題內(nèi)容區(qū)域包括：根據(jù)邊界信息確定網(wǎng)頁中各元素的左邊界和右邊界；計算右邊界的集中區(qū)域與左邊界的集中區(qū)域之間的區(qū)域的寬度；判斷區(qū)域的寬度是否在預(yù)設(shè)的數(shù)值范圍內(nèi)；若是，將右邊界的集中區(qū)域與左邊界的集中區(qū)域之間的區(qū)域作為主題內(nèi)容區(qū)域。

可選地，根據(jù)位置信息確定主題內(nèi)容區(qū)域包括：通過預(yù)設(shè)的元素選擇規(guī)則在網(wǎng)頁的元素中挑選出主題元素；將主題元素的顯示區(qū)域作為主題內(nèi)容區(qū)域。

可選地，在通過預(yù)設(shè)的元素選擇規(guī)則挑選出主題元素之前還包括：判斷網(wǎng)頁是否在預(yù)設(shè)的白名單內(nèi)；若是，獲取白名單中預(yù)置的與所述網(wǎng)頁對應(yīng)的元素選擇規(guī)則。

可選地，計算網(wǎng)頁中元素相對于主題內(nèi)容區(qū)域的位置關(guān)系包括：分別將元素的左右邊界與主題內(nèi)容區(qū)域的左右邊界比較；在元素的右邊界位于主題內(nèi)容區(qū)域的左邊界左側(cè)或者元素的左邊界位于主題內(nèi)容區(qū)域的右邊界右側(cè)的情況下，確定元素位于主題內(nèi)容區(qū)域之外；在元素的左邊界位于主題內(nèi)容區(qū)域的左邊界右側(cè)并且在元素的右邊界位于主題內(nèi)容區(qū)域的右邊界左側(cè)的情況下，確定元素位于主題內(nèi)容區(qū)域內(nèi)部；在元素的左邊界位于主題內(nèi)容區(qū)域的左邊界左側(cè)并且在元素的右邊界位于主題內(nèi)容區(qū)域的右邊界左側(cè)的情況下，或者在元素的左邊界位于主題內(nèi)容區(qū)域的左邊界右側(cè)并且在元素的右邊界位于主題內(nèi)容區(qū)域的右邊界右側(cè)的情況下，確定元素部分位于主題內(nèi)容區(qū)域內(nèi)部。

可選地，根據(jù)位置關(guān)系設(shè)置元素的顯示背景包括：分別創(chuàng)建瀏覽器背景顯示層、主題內(nèi)容背景顯示層、元素背景顯示層，其中，元素背景顯示層位于主題內(nèi)容背景顯示層的上方，主題內(nèi)容背景顯示層位于瀏覽器背景顯示層的上方；對于位于主題內(nèi)容區(qū)域之外的元素，將該元素的背景設(shè)置為瀏覽器背景顯示層的內(nèi)容；對于位于主題內(nèi)容區(qū)域之內(nèi)的元素，將該元素的背景設(shè)置為主題內(nèi)容背景顯示層的內(nèi)容；對于部分位于主題內(nèi)容區(qū)域內(nèi)部的元素，將該元素的背景設(shè)置為元素背景顯示層的內(nèi)容。

可選地，根據(jù)位置關(guān)系設(shè)置元素的顯示背景的步驟通過瀏覽器擴展向網(wǎng)頁注入css或js文件完成。

基于本發(fā)明的另一個方面，提供了一種瀏覽器。該瀏覽器包括：主題區(qū)域獲取模塊，用于獲取網(wǎng)頁的主題內(nèi)容區(qū)域；位置關(guān)系計算模塊，用于計算網(wǎng)頁中元素相對于主題內(nèi)容區(qū)域的位置關(guān)系；背景注入模塊，用于根據(jù)位置關(guān)系設(shè)置元素的顯示背景；顯示模塊，用于按照設(shè)置后的顯示背景顯示網(wǎng)頁。