網(wǎng)頁(yè)的顯示方法和瀏覽器的制造方法
【專利摘要】本發(fā)明提供了一種網(wǎng)頁(yè)的顯示方法和瀏覽器。其中，網(wǎng)頁(yè)顯示方法包括：獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域；計(jì)算網(wǎng)頁(yè)中元素相對(duì)于所述主題內(nèi)容區(qū)域的位置關(guān)系；根據(jù)位置關(guān)系設(shè)置元素的顯示背景；按照設(shè)置后的顯示背景在瀏覽器中顯示網(wǎng)頁(yè)。使用本發(fā)明的技術(shù)方案，根據(jù)網(wǎng)頁(yè)元素相對(duì)于主題內(nèi)容區(qū)域的位置關(guān)系設(shè)置其顯示背景，不影響網(wǎng)頁(yè)主題內(nèi)容的顯示，并保證了網(wǎng)頁(yè)背景與瀏覽器的界面保持一致，使網(wǎng)頁(yè)與瀏覽器形成一體化的視覺(jué)效果，提高了用戶的體驗(yàn)，避免了瀏覽器出現(xiàn)大片空白或者背景圖片與網(wǎng)頁(yè)不匹配導(dǎo)致的顯示問(wèn)題。
【專利說(shuō)明】網(wǎng)頁(yè)的顯示方法和瀏覽器
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，特別是涉及一種網(wǎng)頁(yè)的顯示方法和瀏覽器。
【背景技術(shù)】
[0002]為了兼容各種顯示器尺寸，絕大多說(shuō)的網(wǎng)站都將主體內(nèi)容部分集中在一個(gè)固定的區(qū)域內(nèi)，例如900像素大小的區(qū)域內(nèi)，隨著顯示器尺寸的增大，顯示器的顯示區(qū)域增大，遠(yuǎn)超過(guò)網(wǎng)頁(yè)主題內(nèi)容的顯示區(qū)域，從而屏幕的大部分區(qū)域只能顯示空白或者特定預(yù)設(shè)的圖片。然而千變?nèi)f化的網(wǎng)頁(yè)的背景顏色或者圖片差異很到，這就導(dǎo)致難以滿足對(duì)視覺(jué)體驗(yàn)要求較高的用戶，特別是要求瀏覽器一體化視覺(jué)體驗(yàn)的用戶的需要。
[0003]針對(duì)以上用戶對(duì)瀏覽器顯示效果的需求，現(xiàn)有的瀏覽器所采用的方案由:通過(guò)擴(kuò)展改變一些特定頁(yè)面的背景顏色或者圖片；將所有頁(yè)面的背景都設(shè)置成統(tǒng)一的背景色或者圖片。圖1是根據(jù)現(xiàn)有技術(shù)中改變特定頁(yè)面背景圖片后某網(wǎng)頁(yè)的顯示效果圖，圖2是根據(jù)現(xiàn)有技術(shù)中改變統(tǒng)一背景圖片后某網(wǎng)頁(yè)的顯示效果圖。
[0004]從以上效果圖中可以看出以上的解決方案存在兩方面的問(wèn)題:一、影響頁(yè)面中主體內(nèi)容顯示；二、視覺(jué)效果差。因此，以上方案僅能針對(duì)特定的頁(yè)面設(shè)置特定背景色或者背景圖片，無(wú)法適用于大量的視覺(jué)分割差異較大的頁(yè)面，而且無(wú)法根據(jù)瀏覽器當(dāng)前主題的特性進(jìn)行設(shè)置，從而無(wú)法與瀏覽器形成一體化的視覺(jué)效果。

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

[0005]鑒于上述問(wèn)題，提出了本發(fā)明以便提供一種克服上述問(wèn)題或者至少部分地解決上述問(wèn)題的瀏覽器和相應(yīng)的網(wǎng)頁(yè)的顯示方法。
[0006]基于本發(fā)明的一個(gè)方面提供了一種網(wǎng)頁(yè)的顯示方法。該網(wǎng)頁(yè)顯示方法包括:獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域；計(jì)算網(wǎng)頁(yè)中元素相對(duì)于所述主題內(nèi)容區(qū)域的位置關(guān)系；根據(jù)位置關(guān)系設(shè)置元素的顯示背景；按照設(shè)置后的顯示背景在瀏覽器中顯示網(wǎng)頁(yè)。
[0007]可選地，獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域包括:計(jì)算網(wǎng)頁(yè)中各元素的邊界信息；根據(jù)邊界信息確定主題內(nèi)容區(qū)域。
[0008]可選地，根據(jù)邊界信息確定主題內(nèi)容區(qū)域包括:根據(jù)邊界信息確定網(wǎng)頁(yè)中各元素的左邊界和右邊界；計(jì)算右邊界的集中區(qū)域與左邊界的集中區(qū)域之間的區(qū)域的寬度；判斷區(qū)域的寬度是否在預(yù)設(shè)的數(shù)值范圍內(nèi)；若是，將右邊界的集中區(qū)域與左邊界的集中區(qū)域之間的區(qū)域作為主題內(nèi)容區(qū)域。
[0009]可選地，根據(jù)位置信息確定主題內(nèi)容區(qū)域包括:通過(guò)預(yù)設(shè)的元素選擇規(guī)則在網(wǎng)頁(yè)的元素中挑選出主題元素；將主題元素的顯示區(qū)域作為主題內(nèi)容區(qū)域。
[0010]可選地，在通過(guò)預(yù)設(shè)的元素選擇規(guī)則挑選出主題元素之前還包括:判斷網(wǎng)頁(yè)是否在預(yù)設(shè)的白名單內(nèi)；若是，獲取白名單中預(yù)置的與所述網(wǎng)頁(yè)對(duì)應(yīng)的元素選擇規(guī)則。
[0011]可選地，計(jì)算網(wǎng)頁(yè)中元素相對(duì)于主題內(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)部。
[0012]可選地，根據(jù)位置關(guān)系設(shè)置元素的顯示背景包括:分別創(chuàng)建瀏覽器背景顯示層、主題內(nèi)容背景顯示層、元素背景顯示層，其中，元素背景顯示層位于主題內(nèi)容背景顯示層的上方，主題內(nèi)容背景顯示層位于瀏覽器背景顯示層的上方；對(duì)于位于主題內(nèi)容區(qū)域之外的元素，將該元素的背景設(shè)置為瀏覽器背景顯示層的內(nèi)容；對(duì)于位于主題內(nèi)容區(qū)域之內(nèi)的元素，將該元素的背景設(shè)置為主題內(nèi)容背景顯示層的內(nèi)容；對(duì)于部分位于主題內(nèi)容區(qū)域內(nèi)部的元素，將該元素的背景設(shè)置為元素背景顯示層的內(nèi)容。
[0013]可選地，根據(jù)位置關(guān)系設(shè)置元素的顯示背景的步驟通過(guò)瀏覽器擴(kuò)展向網(wǎng)頁(yè)注入CSS或js文件完成。
[0014]基于本發(fā)明的另一個(gè)方面，提供了一種瀏覽器。該瀏覽器包括:主題區(qū)域獲取模塊，用于獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域；位置關(guān)系計(jì)算模塊，用于計(jì)算網(wǎng)頁(yè)中元素相對(duì)于主題內(nèi)容區(qū)域的位置關(guān)系；背景注入模塊，用于根據(jù)位置關(guān)系設(shè)置元素的顯示背景；顯示模塊，用于按照設(shè)置后的顯示背景顯示網(wǎng)頁(yè)。
[0015]可選地，位置關(guān)系計(jì)算模塊配置為:分別將元素的左右邊界與主題內(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)部。
[0016]可選地，背景注入模塊配置為:分別創(chuàng)建瀏覽器背景顯示層、主題內(nèi)容背景顯示層、元素背景顯示層，其中，元素背景顯示層位于主題內(nèi)容背景顯示層的上方，主題內(nèi)容背景顯示層位于瀏覽器背景顯示層的上方；對(duì)于位于主題內(nèi)容區(qū)域之外的元素，將該元素的背景設(shè)置為瀏覽器背景顯示層的內(nèi)容；對(duì)于位于主題內(nèi)容區(qū)域之內(nèi)的元素，將該元素的背景設(shè)置為主題內(nèi)容背景顯示層的內(nèi)容；對(duì)于部分位于主題內(nèi)容區(qū)域內(nèi)部的元素，將該元素的背景設(shè)置為元素背景顯示層的內(nèi)容。
[0017]本發(fā)明的網(wǎng)頁(yè)顯示方法根據(jù)網(wǎng)頁(yè)元素相對(duì)于主題內(nèi)容區(qū)域的位置關(guān)系設(shè)置其顯示背景，不影響網(wǎng)頁(yè)主題內(nèi)容的顯示，并保證了網(wǎng)頁(yè)背景與瀏覽器的界面保持一致，使網(wǎng)頁(yè)與瀏覽器形成一體化的視覺(jué)效果，提高了用戶的體驗(yàn)，避免了瀏覽器出現(xiàn)大片空白或者背景圖片與網(wǎng)頁(yè)不匹配導(dǎo)致的顯示問(wèn)題。
[0018]上述說(shuō)明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說(shuō)明書(shū)的內(nèi)容予以實(shí)施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點(diǎn)能夠更明顯易懂，以下特舉本發(fā)明的【具體實(shí)施方式】。[0019]根據(jù)下文結(jié)合附圖對(duì)本發(fā)明具體實(shí)施例的詳細(xì)描述，本領(lǐng)域技術(shù)人員將會(huì)更加明了本發(fā)明的上述以及其他目的、優(yōu)點(diǎn)和特征。
【專利附圖】

【附圖說(shuō)明】
[0020]通過(guò)閱讀下文優(yōu)選實(shí)施方式的詳細(xì)描述，各種其他的優(yōu)點(diǎn)和益處對(duì)于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實(shí)施方式的目的，而并不認(rèn)為是對(duì)本發(fā)明的限制。而且在整個(gè)附圖中，用相同的參考符號(hào)表示相同的部件。在附圖中:
[0021]圖1是根據(jù)現(xiàn)有技術(shù)中改變特定頁(yè)面背景圖片后某網(wǎng)頁(yè)的顯示效果圖；
[0022]圖2是根據(jù)現(xiàn)有技術(shù)中改變統(tǒng)一背景圖片后某網(wǎng)頁(yè)的顯示效果圖；
[0023]圖3是根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁(yè)的顯示方法的示意圖；
[0024]圖4是根據(jù)本發(fā)明實(shí)施例的瀏覽器的示意圖；
[0025]圖5是根據(jù)本發(fā)明實(shí)施例的瀏覽器中網(wǎng)頁(yè)元素與主題內(nèi)容區(qū)域的位置關(guān)系圖；
[0026]圖6是根據(jù)本發(fā)明實(shí)施例的瀏覽器中展示網(wǎng)頁(yè)的效果圖；以及
[0027]圖7是根據(jù)本發(fā)明實(shí)施例的瀏覽器中所展示網(wǎng)頁(yè)的各網(wǎng)頁(yè)元素之間的位置關(guān)系圖。
【具體實(shí)施方式】
[0028]在此提供的算法和顯示不與任何特定計(jì)算機(jī)、虛擬系統(tǒng)或者其它設(shè)備固有相關(guān)。各種通用系統(tǒng)也可以與基于在此的示教一起使用。根據(jù)上面的描述，構(gòu)造這類系統(tǒng)所要求的結(jié)構(gòu)是顯而易見(jiàn)的。此外，本發(fā)明也不針對(duì)任何特定編程語(yǔ)言。應(yīng)當(dāng)明白，可以利用各種編程語(yǔ)言實(shí)現(xiàn)在此描述的本發(fā)明的內(nèi)容，并且上面對(duì)特定語(yǔ)言所做的描述是為了披露本發(fā)明的最佳實(shí)施方式。
[0029]圖3是根據(jù)本發(fā)明一個(gè)實(shí)施例的網(wǎng)頁(yè)的顯示方法的示意圖，該網(wǎng)頁(yè)的顯示方法一般性地可包括以下步驟:
[0030]步驟S102，獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域；
[0031]步驟S104，計(jì)算網(wǎng)頁(yè)中元素相對(duì)于所述主題內(nèi)容區(qū)域的位置關(guān)系；
[0032]步驟S106，根據(jù)位置關(guān)系設(shè)置元素的顯示背景；按照設(shè)置后的顯示背景在瀏覽器中顯示網(wǎng)頁(yè)。
[0033]本實(shí)施例中的網(wǎng)頁(yè)的顯示方法中，根據(jù)網(wǎng)頁(yè)元素相對(duì)于主題內(nèi)容區(qū)域的位置關(guān)系設(shè)置其顯示背景，保證其背景不影響網(wǎng)頁(yè)中主題內(nèi)容的顯示，且保持與瀏覽器的顯示主題相匹配，以提高瀏覽器整體的顯示效果。
[0034]其中，網(wǎng)頁(yè)的主題內(nèi)容區(qū)域一般指用戶在網(wǎng)頁(yè)中獲取內(nèi)容的顯示區(qū)域，可以包括:網(wǎng)頁(yè)中正文內(nèi)容及標(biāo)題的顯示區(qū)域、網(wǎng)頁(yè)中需要用戶操作的元素的區(qū)域(如輸入框、按鈕)、網(wǎng)頁(yè)中的視頻等元素的顯示區(qū)域等。
[0035]步驟S102獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域的一般流程可以包括:計(jì)算網(wǎng)頁(yè)中各元素的邊界信息；根據(jù)邊界信息確定主題內(nèi)容區(qū)域。
[0036]以上網(wǎng)頁(yè)元素的邊界信息一般性地可以包括每個(gè)元素距離瀏覽器左邊、右邊的距離、寬度等信息。這些邊界信息可以通過(guò)獲取網(wǎng)頁(yè)元素的clientHeight、clientWidth、scrollHeight、scrollWidth、offsetTop、offsetLeft 屬性中的一項(xiàng)或多項(xiàng)以及米用getBoundingClientRect O方法獲得網(wǎng)頁(yè)元素對(duì)象的左上角和右下角相對(duì)于瀏覽器窗口(viewport)左上角的距離得到。利用獲得的以上邊界信息可以直接計(jì)算的出本實(shí)施例的網(wǎng)頁(yè)的顯示方法中需要的每個(gè)元素距離瀏覽器左邊、右邊的距離、寬度等信息。
[0037]步驟S102中根據(jù)邊界信息確定主題內(nèi)容區(qū)域可以采用程序識(shí)別或者人工標(biāo)記等多種方式進(jìn)行，其中一種程序識(shí)別的流程一般可以包括:根據(jù)邊界信息確定網(wǎng)頁(yè)中各元素的左邊界和右邊界；計(jì)算右邊界的集中區(qū)域與左邊界的集中區(qū)域之間的區(qū)域的寬度；判斷區(qū)域的寬度是否在預(yù)設(shè)的數(shù)值范圍內(nèi)；若是，將右邊界的集中區(qū)域與左邊界的集中區(qū)域之間的區(qū)域作為主題內(nèi)容區(qū)域。以上預(yù)設(shè)的數(shù)值范圍可以取600像素至1000像素，這是根據(jù)網(wǎng)頁(yè)主題區(qū)域的大小的經(jīng)驗(yàn)值，如果網(wǎng)頁(yè)元素的集中區(qū)域在此范圍內(nèi)，就可以確定以上得出的集中區(qū)域?yàn)榫W(wǎng)頁(yè)的主題內(nèi)容區(qū)域。
[0038]對(duì)于以上程序識(shí)別無(wú)法得出的網(wǎng)頁(yè)，可以采用人工規(guī)則編寫(xiě)或者人工標(biāo)注的方式確定主題內(nèi)容區(qū)域。利用已經(jīng)確定的主題內(nèi)容區(qū)域，可以生成元素選擇規(guī)則，該規(guī)則記錄了網(wǎng)頁(yè)的信息以及對(duì)應(yīng)的主題內(nèi)容區(qū)域。利用已有的元素選擇規(guī)則可以自動(dòng)挑選出主題元素，從而得出主題內(nèi)容區(qū)域。利用已有元素選擇規(guī)則確定主題區(qū)域的流程一般可以包括:通過(guò)預(yù)設(shè)的元素選擇規(guī)則在網(wǎng)頁(yè)的元素中挑選出主題元素；將主題元素的顯示區(qū)域作為主題內(nèi)容區(qū)域。
[0039]例如，人工找到一個(gè)能代碼主題內(nèi)容區(qū)域位置的元素，將此元素的選擇器(#id或者.class)以及網(wǎng)站url作為一條規(guī)則，將該規(guī)則作為白名單規(guī)則，將滿足該規(guī)則的網(wǎng)頁(yè)直接對(duì)應(yīng)得出對(duì)應(yīng)的主題內(nèi)容區(qū)域位置。另外也可以利用以上程序識(shí)別出的網(wǎng)頁(yè)的主題內(nèi)容區(qū)域生成白名單規(guī)則，在確定已有規(guī)則的網(wǎng)頁(yè)的主題內(nèi)容區(qū)域時(shí)，直接利用白名單查找與網(wǎng)頁(yè)對(duì)應(yīng)的元素選擇規(guī)則，以得出主題區(qū)域位置，提高了效率。
[0040]在實(shí)際應(yīng)用中，確定主題內(nèi)容區(qū)域的過(guò)程中，可以首先進(jìn)行白名單規(guī)則匹配，如果匹配成功，直接從白名單中獲取該網(wǎng)頁(yè)對(duì)應(yīng)的主題內(nèi)容區(qū)域，如果匹配不成功，進(jìn)入程序識(shí)另O，利用網(wǎng)頁(yè)各元素的左邊界和右邊界之間的集中區(qū)域的寬度確定主題內(nèi)容區(qū)域，如果程序識(shí)別失敗，可以采用人工確定的方式確定主題區(qū)域位置。
[0041]步驟S102獲取到的主題內(nèi)容區(qū)域數(shù)據(jù)可以包括主題內(nèi)容區(qū)域距離瀏覽器左邊框的距離、主題內(nèi)容區(qū)域的寬度等。
[0042]步驟S104的一般流程可以包括:分別將網(wǎng)頁(yè)中某一元素的左右邊界與主題內(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)部。
[0043]以上網(wǎng)頁(yè)元素的顯示背景可以通過(guò)不同的顯示蒙層進(jìn)行設(shè)置，流程可以包括:分別創(chuàng)建瀏覽器背景顯示層、主題內(nèi)容背景顯示層、元素背景顯示層，其中，元素背景顯示層位于主題內(nèi)容背景顯示層的上方，主題內(nèi)容背景顯示層位于瀏覽器背景顯示層的上方；對(duì)于位于主題內(nèi)容區(qū)域之外的元素，將該元素的背景設(shè)置為瀏覽器背景顯示層的內(nèi)容；對(duì)于位于主題內(nèi)容區(qū)域之內(nèi)的元素，將該元素的背景設(shè)置為主題內(nèi)容背景顯示層的內(nèi)容；對(duì)于部分位于主題內(nèi)容區(qū)域內(nèi)部的元素，將該元素的背景設(shè)置為元素背景顯示層的內(nèi)容。
[0044]利用以上三個(gè)顯示層，可以根據(jù)位置關(guān)系設(shè)置元素的顯示背景，一般地，對(duì)于在主體區(qū)域以內(nèi)的網(wǎng)頁(yè)元素，顯示背景仍然網(wǎng)頁(yè)本身的背景進(jìn)行顯示，對(duì)于完全位于主題內(nèi)容區(qū)域之外的網(wǎng)頁(yè)元素，原有的網(wǎng)頁(yè)顯示背景可以設(shè)置為全透明或者由用戶選擇直接刪除或者隱藏，最終顯示的效果為瀏覽器的背景。對(duì)于部分位于主題內(nèi)容區(qū)域之外的網(wǎng)頁(yè)元素，可以首先記錄原有的網(wǎng)頁(yè)顯示背景，然后將該元素的背景改成全透明，然后在元素的下面創(chuàng)建一個(gè)層，所創(chuàng)建層的高度、邊框、背景等與此元素相同，寬度等于此元素位于主題區(qū)域以內(nèi)部分的寬度，位置位于此元素在主體區(qū)域以內(nèi)部分的位置。通過(guò)設(shè)置所創(chuàng)建層的背景可以改變這類網(wǎng)頁(yè)元素的顯示背景。
[0045]以上創(chuàng)建背景層以及設(shè)置背景層的參數(shù)的過(guò)程可以均通過(guò)瀏覽器擴(kuò)展向網(wǎng)頁(yè)注入CSS或js文件完成。一種替代的方案是通過(guò)瀏覽器修改頁(yè)面的DOM渲染實(shí)現(xiàn)，這種方式修改網(wǎng)頁(yè)D0M,相較于注入css (cascading style sheets,層疊樣式表單)或js(javascript)文件的方式,成本和風(fēng)險(xiǎn)較高。
[0046]本發(fā)明的實(shí)施例還提供了一種瀏覽器，該瀏覽器可以用于執(zhí)行以上實(shí)施例中介紹的網(wǎng)頁(yè)的顯示方法，根據(jù)網(wǎng)頁(yè)元素的位置設(shè)置對(duì)應(yīng)的背景，保證網(wǎng)頁(yè)背景與瀏覽器的界面保持一致，使網(wǎng)頁(yè)與瀏覽器形成一體化的視覺(jué)效果。圖4是根據(jù)本發(fā)明實(shí)施例的瀏覽器的示意圖，如圖所示，該瀏覽器包括:主題區(qū)域獲取模塊210、位置關(guān)系計(jì)算模塊220、背景注入模塊230、顯示模塊240。
[0047]其中，主題區(qū)域獲取模塊210用于獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域；位置關(guān)系計(jì)算模塊220用于計(jì)算網(wǎng)頁(yè)中元素相對(duì)于主題內(nèi)容區(qū)域的位置關(guān)系；背景注入模塊230用于根據(jù)位置關(guān)系設(shè)置元素的顯示背景；顯示模塊240用于按照設(shè)置后的顯示背景顯示網(wǎng)頁(yè)。
[0048]主題區(qū)域獲取模塊210可以配置為:計(jì)算網(wǎng)頁(yè)中各元素的邊界信息；根據(jù)邊界信息確定主題內(nèi)容區(qū)域。以上網(wǎng)頁(yè)元素的邊界信息一般性地可以包括每個(gè)元素距離瀏覽器左邊、右邊的距離、寬度等信息。這些邊界信息可以通過(guò)獲取網(wǎng)頁(yè)元素的clientHeight、clientWidth、scrollHeight、scrollWidth、offsetTop、offsetLeft 中或者米用getBoundingClientRect ()方法獲得網(wǎng)頁(yè)元素對(duì)象的左上角和右下角相對(duì)于瀏覽器窗口(viewport)左上角的距離。利用獲得的以上邊界信息可以直接計(jì)算的出本實(shí)施例的網(wǎng)頁(yè)的顯示方法中需要的每個(gè)元素距離瀏覽器左邊、右邊的距離、寬度等信息。根據(jù)邊界信息確定主題內(nèi)容區(qū)域可以采用程序識(shí)別或者人工標(biāo)記等多種方式進(jìn)行，例如可以首先進(jìn)行白名單規(guī)則匹配，如果匹配成功，直接從白名單中獲取該網(wǎng)頁(yè)對(duì)應(yīng)的主題內(nèi)容區(qū)域，如果匹配不成功，進(jìn)入程序識(shí)別，利用網(wǎng)頁(yè)各元素的左邊界和右邊界之間的集中區(qū)域的寬度確定主題內(nèi)容區(qū)域，如果程序識(shí)別失敗，可以采用人工確定的方式確定主題區(qū)域位置。白名單可以根據(jù)利用程序或者人工識(shí)別得出的網(wǎng)頁(yè)的主題內(nèi)容區(qū)域、網(wǎng)頁(yè)的url、以及網(wǎng)頁(yè)元素的選擇器生成并保存。
[0049]位置關(guān)系計(jì)算模塊220可以配置為分別將元素的左右邊界與主題內(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)部。
[0050]利用位置關(guān)系計(jì)算模塊220可以確定出網(wǎng)頁(yè)元素相對(duì)于主題內(nèi)容區(qū)域的位置，以便背景注入模塊230相應(yīng)調(diào)整元素的顯示背景。背景注入模塊230可以被配置為:分別創(chuàng)建瀏覽器背景顯示層、主題內(nèi)容背景顯示層、元素背景顯示層，其中，元素背景顯示層位于主題內(nèi)容背景顯示層的上方，主題內(nèi)容背景顯示層位于瀏覽器背景顯示層的上方；對(duì)于位于主題內(nèi)容區(qū)域之外的元素，將該元素的背景設(shè)置為瀏覽器背景顯示層的內(nèi)容；對(duì)于位于主題內(nèi)容區(qū)域之內(nèi)的元素，將該元素的背景設(shè)置為主題內(nèi)容背景顯示層的內(nèi)容；對(duì)于部分位于主題內(nèi)容區(qū)域內(nèi)部的元素，將該元素的背景設(shè)置為元素背景顯示層的內(nèi)容。
[0051]利用背景注入模塊230，對(duì)于在主體區(qū)域以內(nèi)的網(wǎng)頁(yè)元素，顯示背景仍然網(wǎng)頁(yè)本身的背景進(jìn)行顯示，對(duì)于完全位于主題內(nèi)容區(qū)域之外的網(wǎng)頁(yè)元素，原有的網(wǎng)頁(yè)顯示背景可以設(shè)置為全透明或者由用戶選擇直接刪除或者隱藏，最終顯示的效果為瀏覽器的背景。對(duì)于部分位于主題內(nèi)容區(qū)域之外的網(wǎng)頁(yè)元素，可以首先記錄原有的網(wǎng)頁(yè)顯示背景，然后將該元素的背景改成全透明，然后在元素的下面創(chuàng)建一個(gè)層，所創(chuàng)建層的高度、邊框、背景等與此元素相同，寬度等于此元素位于主題區(qū)域以內(nèi)部分的寬度，位置位于此元素在主體區(qū)域以內(nèi)部分的位置。通過(guò)設(shè)置所創(chuàng)建層的背景可以改變這類網(wǎng)頁(yè)元素的顯示背景。
[0052]以上創(chuàng)建背景層以及設(shè)置背景層的參數(shù)的過(guò)程可以均通過(guò)瀏覽器擴(kuò)展向網(wǎng)頁(yè)注入CSS或js文件完成。
[0053]js代碼的注入方式可以通過(guò)backgroud進(jìn)行或者通過(guò)擴(kuò)展的manifest, json文件代碼注入。
[0054]Css 文件設(shè)置特定的幾個(gè)兀素，例如 div#super_theme_body_mask, div#super_theme_content_mask、 super_theme_outline_mask,其中，div#super_theme_body_mask是瀏覽器背景顯示層，用于展現(xiàn)與瀏覽器主題對(duì)應(yīng)的背景色或者背景圖片，div#SUper_theme_content_mask是主題內(nèi)容背景顯示層，用于展示頁(yè)面背景色或者背景圖片，保持主體內(nèi)容部分的背景色與原頁(yè)面一致；super_theme_outline_mask是元素背景顯示層,用于對(duì)部分超過(guò)主題內(nèi)容區(qū)域元素，保持主體區(qū)域以內(nèi)的內(nèi)容背景色或者背景圖片與原頁(yè)面一致，并使保持主體區(qū)域以外的背景色或者背景圖片與瀏覽器主題一致。
[0055]Js文件創(chuàng)建幾個(gè)特定的元素，記錄當(dāng)前網(wǎng)頁(yè)的背景顏色或者背景圖片為bgbackup,并將其background屬性改成transparent (即全透明)，然后將以上div#super_theme_content_mask元素的背景設(shè)置為bgbackup,以展示頁(yè)面背景色或者背景圖片。另夕卜，js文件通過(guò)瀏覽器提供的特定接口獲取瀏覽器當(dāng)前的主題信息并記為bgtheme，瀏覽器的主題信息包括背景色、背景圖片等內(nèi)容；然后計(jì)算或獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域，將以上div#super_theme_body_mask設(shè)置成bgtheme,以展示與瀏覽器主題對(duì)應(yīng)的背景色或者背景圖片。
[0056]Js文件將網(wǎng)頁(yè)的主題內(nèi)容區(qū)域距離瀏覽器左邊框的定義為left，主題內(nèi)容區(qū)域的寬度定義為width,則將兀素div#super_theme_content_mask的位置大小設(shè)置成距離瀏覽器左邊框left，寬度width。[0057]圖5是根據(jù)本發(fā)明實(shí)施例的瀏覽器中網(wǎng)頁(yè)元素與主題內(nèi)容區(qū)域的位置關(guān)系圖，如圖所示，原頁(yè)面內(nèi)容501位于瀏覽器顯示的最頂層，顯示不受任何遮擋，原頁(yè)面背景502，位于原頁(yè)面內(nèi)容501顯示層下，可以將顯示層次序參數(shù)z-1ndex設(shè)置為0，并設(shè)置為全透明。主題內(nèi)容背景顯示層503，位于原頁(yè)面背景502顯示層下，可以將顯示層次序參數(shù)z-1ndex設(shè)置為-1，背景設(shè)置為bgbackup，以展示頁(yè)面背景色或者背景圖片。瀏覽器背景顯示層504位于主題內(nèi)容背景顯示層503下，可以將顯示層次序參數(shù)z-1ndex設(shè)置為_(kāi)2，背景設(shè)置為bgtheme，以展示與瀏覽器主題對(duì)應(yīng)的背景色或者背景圖片。
[0058]圖6是根據(jù)本發(fā)明實(shí)施例的瀏覽器中展示網(wǎng)頁(yè)的效果圖，利用本發(fā)明實(shí)施例的瀏覽器展示的網(wǎng)頁(yè)保證了瀏覽器背景與網(wǎng)頁(yè)背景的一體化顯示，視覺(jué)效果大大好于圖1和圖2的效果。
[0059]利用本發(fā)明實(shí)施例的瀏覽器，在主體區(qū)域以內(nèi)的網(wǎng)頁(yè)元素不動(dòng)；完全在主體區(qū)域之外的網(wǎng)頁(yè)元素設(shè)置全透明或者由用戶選擇直接刪除或者隱藏；部分在主體區(qū)域以內(nèi)的網(wǎng)頁(yè)元素，需要記錄網(wǎng)頁(yè)元素的原來(lái)背景，然后將此元素的背景改成全透明，然后在此元素的下面創(chuàng)建一個(gè)層，所創(chuàng)建層的高度、邊框、背景等與此元素相同，寬度等于此元素位于主題區(qū)域以內(nèi)部分的寬度，位置位于此元素在主體區(qū)域以內(nèi)部分的位置。
[0060]各層的顯示層次序參數(shù)只要保證次序關(guān)系符合以上要求就滿足要求，并不限于具體的數(shù)值，例如:顯示整個(gè)背景的層div#super_theme_body_mask的層次序參數(shù)z-1ndex可設(shè)置為-1000,顯示主體內(nèi)容背景的層div#super_theme_content_mask的層次序參數(shù)z-1ndex可以設(shè)置為-100,顯示部分超出主體區(qū)域的元素的背景的層div.super_theme_outline_mask的層次序參數(shù)z-1ndex設(shè)置范圍可以為-99至-1。
[0061]為了讓背景層的顏色不影響主體內(nèi)容的顯示，因此需要將div#super_theme_body_mask的z-1ndex設(shè)置的很小(_1000),類似地,為了讓主體內(nèi)容的背景不要影響主體內(nèi)容區(qū)域中具體元素的顯示，可以將div#super_theme_content_mask的z-1ndex設(shè)置成比較小(比如-100,使用-100的原因是一個(gè)頁(yè)面的元素一般不至于嵌套100層)；div.super_theme_outline_mask是不唯一的,所以可以使用class屬性設(shè)置其樣式,其z-1ndex的值由此元素有多少個(gè)超出主體區(qū)域的子元素決定，子元素越多，z-1ndex越小，最大為-1，因?yàn)樽釉氐谋尘耙獌?yōu)先顯示。
[0062]圖7是根據(jù)本發(fā)明實(shí)施例的瀏覽器中所展示網(wǎng)頁(yè)的各網(wǎng)頁(yè)元素之間的位置關(guān)系圖，以下介紹圖中代表的不同位置的網(wǎng)頁(yè)元素以及對(duì)應(yīng)的背景處理方法，最大的框700代表整個(gè)屏幕，框720為識(shí)別出的主題內(nèi)容區(qū)域，框701代表在主題內(nèi)容區(qū)域之外的廣告區(qū)域，其背景需更改為瀏覽器主題對(duì)應(yīng)的背景；框702中在主題內(nèi)容區(qū)域之外的區(qū)域需要進(jìn)行背景處理的。框703中在主題內(nèi)容區(qū)域兩側(cè)之外的區(qū)域需要進(jìn)行背景處理的。框704內(nèi)嵌在框703中其兩側(cè)的區(qū)域也需要進(jìn)行背景處理的?？?05完全內(nèi)嵌在主題內(nèi)容區(qū)域中的，按照原網(wǎng)頁(yè)的背景進(jìn)行顯示?？?06同樣完全內(nèi)嵌在主題內(nèi)容區(qū)域中的，也同樣原網(wǎng)頁(yè)的背景進(jìn)行顯示?？?07中在主題內(nèi)容區(qū)域兩側(cè)之外的區(qū)域是要進(jìn)行背景處理的。
[0063]在以上各位置的區(qū)域中，在主題內(nèi)容區(qū)域內(nèi)的部分，顯示網(wǎng)頁(yè)原來(lái)的背景，在主題內(nèi)容區(qū)域外的部分，通過(guò)處理顯示瀏覽器對(duì)應(yīng)的背景。網(wǎng)頁(yè)頁(yè)面變得更簡(jiǎn)潔，實(shí)現(xiàn)了瀏覽器主題與網(wǎng)頁(yè)背景的一體化視覺(jué)體驗(yàn)，極大地提增強(qiáng)了視覺(jué)效果，為用戶自由設(shè)置瀏覽器主題提供了空間。[0064]本發(fā)明的網(wǎng)頁(yè)顯示方法及執(zhí)行該方法的瀏覽器根據(jù)網(wǎng)頁(yè)元素相對(duì)于主題內(nèi)容區(qū)域的位置關(guān)系設(shè)置其顯示背景，不影響網(wǎng)頁(yè)主題內(nèi)容的顯示，并保證了網(wǎng)頁(yè)背景與瀏覽器的界面保持一致，使網(wǎng)頁(yè)與瀏覽器形成一體化的視覺(jué)效果，提高了用戶的體驗(yàn)，避免了瀏覽器出現(xiàn)大片空白或者背景圖片與網(wǎng)頁(yè)不匹配導(dǎo)致的顯示問(wèn)題。
[0065]在此處所提供的說(shuō)明書(shū)中，說(shuō)明了大量具體細(xì)節(jié)。然而，能夠理解，本發(fā)明的實(shí)施例可以在沒(méi)有這些具體細(xì)節(jié)的情況下實(shí)踐。在一些實(shí)例中，并未詳細(xì)示出公知的方法、結(jié)構(gòu)和技術(shù)，以便不模糊對(duì)本說(shuō)明書(shū)的理解。
[0066]類似地，應(yīng)當(dāng)理解，為了精簡(jiǎn)本公開(kāi)并幫助理解各個(gè)發(fā)明方面中的一個(gè)或多個(gè)，在上面對(duì)本發(fā)明的示例性實(shí)施例的描述中，本發(fā)明的各個(gè)特征有時(shí)被一起分組到單個(gè)實(shí)施例、圖、或者對(duì)其的描述中。然而，并不應(yīng)將該公開(kāi)的方法解釋成反映如下意圖:即所要求保護(hù)的本發(fā)明要求比在每個(gè)權(quán)利要求中所明確記載的特征更多的特征。更確切地說(shuō)，如下面的權(quán)利要求書(shū)所反映的那樣，發(fā)明方面在于少于前面公開(kāi)的單個(gè)實(shí)施例的所有特征。因此，遵循【具體實(shí)施方式】的權(quán)利要求書(shū)由此明確地并入該【具體實(shí)施方式】，其中每個(gè)權(quán)利要求本身都作為本發(fā)明的單獨(dú)實(shí)施例。
[0067]本領(lǐng)域那些技術(shù)人員可以理解，可以對(duì)實(shí)施例中的設(shè)備中的模塊進(jìn)行自適應(yīng)性地改變并且把它們?cè)O(shè)置在與該實(shí)施例不同的一個(gè)或多個(gè)設(shè)備中?？梢园褜?shí)施例中的模塊或單元或組件組合成一個(gè)模塊或單元或組件，以及此外可以把它們分成多個(gè)子模塊或子單元或子組件。除了這樣的特征和/或過(guò)程或者單元中的至少一些是相互排斥之外，可以采用任何組合對(duì)本說(shuō)明書(shū)(包括伴隨的權(quán)利要求、摘要和附圖)中公開(kāi)的所有特征以及如此公開(kāi)的任何方法或者設(shè)備的所有過(guò)程或單元進(jìn)行組合。除非另外明確陳述，本說(shuō)明書(shū)(包括伴隨的權(quán)利要求、摘要和附圖)中公開(kāi)的每個(gè)特征可以由提供相同、等同或相似目的的替代特征來(lái)代替。
[0068]此外，本領(lǐng)域的技術(shù)人員能夠理解，盡管在此所述的一些實(shí)施例包括其它實(shí)施例中所包括的某些特征而不是其它特征，但是不同實(shí)施例的特征的組合意味著處于本發(fā)明的范圍之內(nèi)并且形成不同的實(shí)施例。例如，在權(quán)利要求書(shū)中，所要求保護(hù)的實(shí)施例的任意之一都可以以任意的組合方式來(lái)使用。
[0069]本發(fā)明的各個(gè)部件實(shí)施例可以以硬件實(shí)現(xiàn)，或者以在一個(gè)或者多個(gè)處理器上運(yùn)行的軟件模塊實(shí)現(xiàn)，或者以它們的組合實(shí)現(xiàn)。本領(lǐng)域的技術(shù)人員應(yīng)當(dāng)理解，可以在實(shí)踐中使用微處理器或者數(shù)字信號(hào)處理器(DSP)來(lái)實(shí)現(xiàn)根據(jù)本發(fā)明實(shí)施例的瀏覽器中的一些或者全部部件的一些或者全部功能。本發(fā)明還可以實(shí)現(xiàn)為用于執(zhí)行這里所描述的方法的一部分或者全部的設(shè)備或者裝置程序(例如，計(jì)算機(jī)程序和計(jì)算機(jī)程序產(chǎn)品)。這樣的實(shí)現(xiàn)本發(fā)明的程序可以存儲(chǔ)在計(jì)算機(jī)可讀介質(zhì)上，或者可以具有一個(gè)或者多個(gè)信號(hào)的形式。這樣的信號(hào)可以從因特網(wǎng)網(wǎng)站上下載得到，或者在載體信號(hào)上提供，或者以任何其他形式提供。
[0070]應(yīng)該注意的是上述實(shí)施例對(duì)本發(fā)明進(jìn)行說(shuō)明而不是對(duì)本發(fā)明進(jìn)行限制，并且本領(lǐng)域技術(shù)人員在不脫離所附權(quán)利要求的范圍的情況下可設(shè)計(jì)出替換實(shí)施例。在權(quán)利要求中，不應(yīng)將位于括號(hào)之間的任何參考符號(hào)構(gòu)造成對(duì)權(quán)利要求的限制。單詞“包含”不排除存在未列在權(quán)利要求中的元件或步驟。位于元件之前的單詞“一”或“一個(gè)”不排除存在多個(gè)這樣的元件。本發(fā)明可以借助于包括有若干不同元件的硬件以及借助于適當(dāng)編程的計(jì)算機(jī)來(lái)實(shí)現(xiàn)。在列舉了若干裝置的單元權(quán)利要求中，這些裝置中的若干個(gè)可以是通過(guò)同一個(gè)硬件項(xiàng)來(lái)具體體現(xiàn)。單詞第一、第二、以及第三等的使用不表示任何順序?？蓪⑦@些單詞解釋為名稱。
[0071]至此，本領(lǐng)域技術(shù)人員應(yīng)認(rèn)識(shí)到，雖然本文已詳盡示出和描述了本發(fā)明的多個(gè)示例性實(shí)施例，但是，在不脫離本發(fā)明精神和范圍的情況下，仍可根據(jù)本發(fā)明公開(kāi)的內(nèi)容直接確定或推導(dǎo)出符合本發(fā)明原理的許多其他變型或修改。因此，本發(fā)明的范圍應(yīng)被理解和認(rèn)定為覆蓋了所有這些其他變型或修改。
[0072]本發(fā)明實(shí)施例還公開(kāi)了:
[0073]Al.—種網(wǎng)頁(yè)的顯示方法，包括:
[0074]獲取所述網(wǎng)頁(yè)的主題內(nèi)容區(qū)域；
[0075]計(jì)算所述網(wǎng)頁(yè)中元素相對(duì)于所述主題內(nèi)容區(qū)域的位置關(guān)系；
[0076]根據(jù)所述位置關(guān)系設(shè)置所述元素的顯示背景；
[0077]按照設(shè)置后的顯示背景在瀏覽器中顯示所述網(wǎng)頁(yè)。
[0078]A2.根據(jù)Al所述的顯示方法，其中，獲取所述網(wǎng)頁(yè)的主題內(nèi)容區(qū)域包括:
[0079]計(jì)算所述網(wǎng)頁(yè)中各元素的邊界信息；
[0080]根據(jù)所述邊界信息確定所述主題內(nèi)容區(qū)域。
[0081]A3.根據(jù)A2所述的顯示方法，其中，根據(jù)所述邊界信息確定所述主題內(nèi)容區(qū)域包括:
[0082]根據(jù)所述邊界信息確定所述網(wǎng)頁(yè)中各元素的左邊界和右邊界；
[0083]計(jì)算所述右邊界的集中區(qū)域與所述左邊界的集中區(qū)域之間的區(qū)域的寬度；
[0084]判斷所述區(qū)域的寬度是否在預(yù)設(shè)的數(shù)值范圍內(nèi)；
[0085]若是，將所述右邊界的集中區(qū)域與所述左邊界的集中區(qū)域之間的區(qū)域作為所述主題內(nèi)容區(qū)域。
[0086]A4.根據(jù)A2所述的顯示方法，其中，根據(jù)所述位置信息確定所述主題內(nèi)容區(qū)域包括:
[0087]通過(guò)預(yù)設(shè)的元素選擇規(guī)則在所述網(wǎng)頁(yè)的元素中挑選出主題元素；
[0088]將所述主題元素的顯示區(qū)域作為所述主題內(nèi)容區(qū)域。
[0089]A5.根據(jù)A4所述的顯示方法，其中，在通過(guò)預(yù)設(shè)的元素選擇規(guī)則挑選出主題元素之前還包括:
[0090]判斷所述網(wǎng)頁(yè)是否在預(yù)設(shè)的白名單內(nèi)；
[0091]若是，獲取所述白名單中預(yù)置的與所述網(wǎng)頁(yè)對(duì)應(yīng)的所述元素選擇規(guī)則。
[0092]A6.根據(jù)Al至A5中任一項(xiàng)所述的顯示方法，其中，計(jì)算所述網(wǎng)頁(yè)中元素相對(duì)于所述主題內(nèi)容區(qū)域的位置關(guān)系包括:
[0093]分別將所述元素的左右邊界與所述主題內(nèi)容區(qū)域的左右邊界比較；
[0094]在所述元素的右邊界位于所述主題內(nèi)容區(qū)域的左邊界左側(cè)或者所述元素的左邊界位于所述主題內(nèi)容區(qū)域的右邊界右側(cè)的情況下，確定所述元素位于所述主題內(nèi)容區(qū)域之外；
[0095]在所述元素的左邊界位于所述主題內(nèi)容區(qū)域的左邊界右側(cè)并且在所述元素的右邊界位于所述主題內(nèi)容區(qū)域的右邊界左側(cè)的情況下，確定所述元素位于所述主題內(nèi)容區(qū)域內(nèi)部；[0096]在所述元素的左邊界位于所述主題內(nèi)容區(qū)域的左邊界左側(cè)并且在所述元素的右邊界位于所述主題內(nèi)容區(qū)域的右邊界左側(cè)的情況下，或者在所述元素的左邊界位于所述主題內(nèi)容區(qū)域的左邊界右側(cè)并且在所述元素的右邊界位于所述主題內(nèi)容區(qū)域的右邊界右側(cè)的情況下，確定所述元素部分位于所述主題內(nèi)容區(qū)域內(nèi)部。
[0097]A7.根據(jù)A6所述的顯示方法，其中，根據(jù)所述位置關(guān)系設(shè)置所述元素的顯示背景包括:
[0098]分別創(chuàng)建瀏覽器背景顯示層、主題內(nèi)容背景顯示層、元素背景顯示層，其中，所述元素背景顯示層位于所述主題內(nèi)容背景顯示層的上方，所述主題內(nèi)容背景顯示層位于所述瀏覽器背景顯示層的上方；
[0099]對(duì)于位于所述主題內(nèi)容區(qū)域之外的元素，將該元素的背景設(shè)置為所述瀏覽器背景顯示層的內(nèi)容；
[0100]對(duì)于位于所述主題內(nèi)容區(qū)域之內(nèi)的元素，將該元素的背景設(shè)置為所述主題內(nèi)容背景顯示層的內(nèi)容；
[0101]對(duì)于部分位于所述主題內(nèi)容區(qū)域內(nèi)部的元素，將該元素的背景設(shè)置為所述元素背景顯示層的內(nèi)容。
[0102]AS.根據(jù)A7所述的顯示方法，其中，根據(jù)所述位置關(guān)系設(shè)置所述元素的顯示背景的步驟通過(guò)瀏覽器擴(kuò)展向所述網(wǎng)頁(yè)注入CSS或js文件完成。
[0103]本發(fā)明實(shí)施例還公開(kāi)了 B9.—種瀏覽器，包括:
[0104]主題區(qū)域獲取模塊，用于獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域；
[0105]位置關(guān)系計(jì)算模塊，用于計(jì)算所述網(wǎng)頁(yè)中元素相對(duì)于所述主題內(nèi)容區(qū)域的位置關(guān)系;
[0106]背景注入模塊，用于根據(jù)所述位置關(guān)系設(shè)置所述元素的顯示背景；
[0107]顯示模塊，用于按照設(shè)置后的顯示背景顯示所述網(wǎng)頁(yè)。
[0108]B10.根據(jù)B9所述的瀏覽器，其中，所述位置關(guān)系計(jì)算模塊配置為:
[0109]分別將所述元素的左右邊界與所述主題內(nèi)容區(qū)域的左右邊界比較；
[0110]在所述元素的右邊界位于所述主題內(nèi)容區(qū)域的左邊界左側(cè)或者所述元素的左邊界位于所述主題內(nèi)容區(qū)域的右邊界右側(cè)的情況下，確定所述元素位于所述主題內(nèi)容區(qū)域之外；
[0111]在所述元素的左邊界位于所述主題內(nèi)容區(qū)域的左邊界右側(cè)并且在所述元素的右邊界位于所述主題內(nèi)容區(qū)域的右邊界左側(cè)的情況下，確定所述元素位于所述主題內(nèi)容區(qū)域內(nèi)部；
[0112]在所述元素的左邊界位于所述主題內(nèi)容區(qū)域的左邊界左側(cè)并且在所述元素的右邊界位于所述主題內(nèi)容區(qū)域的右邊界左側(cè)的情況下，或者在所述元素的左邊界位于所述主題內(nèi)容區(qū)域的左邊界右側(cè)并且在所述元素的右邊界位于所述主題內(nèi)容區(qū)域的右邊界右側(cè)的情況下，確定所述元素部分位于所述主題內(nèi)容區(qū)域內(nèi)部。
[0113]Bll.根據(jù)BlO所述的瀏覽器，其中，所述背景注入模塊配置為:
[0114]分別創(chuàng)建瀏覽器背景顯示層、主題內(nèi)容背景顯示層、元素背景顯示層，其中，所述元素背景顯示層位于所述主題內(nèi)容背景顯示層的上方，所述主題內(nèi)容背景顯示層位于所述瀏覽器背景顯示層的上方；[0115]對(duì)于位于所述主題內(nèi)容區(qū)域之外的元素，將該元素的背景設(shè)置為所述瀏覽器背景顯示層的內(nèi)容；
[0116]對(duì)于位于所述主題內(nèi)容區(qū)域之內(nèi)的元素，將該元素的背景設(shè)置為所述主題內(nèi)容背景顯示層的內(nèi)容；
[0117]對(duì)于部分位于所述主題內(nèi)容區(qū)域內(nèi)部的元素，將該元素的背景設(shè)置為所述元素背景顯示層的內(nèi)容。
【權(quán)利要求】
1.一種網(wǎng)頁(yè)的顯示方法，包括: 獲取所述網(wǎng)頁(yè)的主題內(nèi)容區(qū)域； 計(jì)算所述網(wǎng)頁(yè)中元素相對(duì)于所述主題內(nèi)容區(qū)域的位置關(guān)系； 根據(jù)所述位置關(guān)系設(shè)置所述元素的顯示背景； 按照設(shè)置后的顯示背景在瀏覽器中顯示所述網(wǎng)頁(yè)。
2.根據(jù)權(quán)利要求1所述的顯示方法，其中，獲取所述網(wǎng)頁(yè)的主題內(nèi)容區(qū)域包括: 計(jì)算所述網(wǎng)頁(yè)中各元素的邊界信息； 根據(jù)所述邊界信息確定所述主題內(nèi)容區(qū)域。
3.根據(jù)權(quán)利要求2所述的顯示方法，其中，根據(jù)所述邊界信息確定所述主題內(nèi)容區(qū)域包括: 根據(jù)所述邊界信息確定所述網(wǎng)頁(yè)中各元素的左邊界和右邊界； 計(jì)算所述右邊界的集中區(qū)域與所述左邊界的集中區(qū)域之間的區(qū)域的寬度； 判斷所述區(qū)域的寬度是否在預(yù)設(shè)的數(shù)值范圍內(nèi)； 若是，將所述右邊界的集中區(qū)域與所述左邊界的集中區(qū)域之間的區(qū)域作為所述主題內(nèi)容區(qū)域。
4.根據(jù)權(quán)利要求2所述 的顯示方法，其中，根據(jù)所述位置信息確定所述主題內(nèi)容區(qū)域包括: 通過(guò)預(yù)設(shè)的元素選擇規(guī)則在所述網(wǎng)頁(yè)的元素中挑選出主題元素； 將所述主題元素的顯示區(qū)域作為所述主題內(nèi)容區(qū)域。
5.根據(jù)權(quán)利要求4所述的顯示方法，其中，在通過(guò)預(yù)設(shè)的元素選擇規(guī)則挑選出主題元素之前還包括: 判斷所述網(wǎng)頁(yè)是否在預(yù)設(shè)的白名單內(nèi)； 若是，獲取所述白名單中預(yù)置的與所述網(wǎng)頁(yè)對(duì)應(yīng)的所述元素選擇規(guī)則。
6.根據(jù)權(quán)利要求1至5中任一項(xiàng)所述的顯示方法，其中，計(jì)算所述網(wǎng)頁(yè)中元素相對(duì)于所述主題內(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)部。
7.根據(jù)權(quán)利要求6所述的顯示方法，其中，根據(jù)所述位置關(guān)系設(shè)置所述元素的顯示背景包括: 分別創(chuàng)建瀏覽器背景顯示層、主題內(nèi)容背景顯示層、元素背景顯示層，其中，所述元素背景顯示層位于所述主題內(nèi)容背景顯示層的上方，所述主題內(nèi)容背景顯示層位于所述瀏覽器背景顯示層的上方； 對(duì)于位于所述主題內(nèi)容區(qū)域之外的元素，將該元素的背景設(shè)置為所述瀏覽器背景顯示層的內(nèi)容； 對(duì)于位于所述主題內(nèi)容區(qū)域之內(nèi)的元素，將該元素的背景設(shè)置為所述主題內(nèi)容背景顯示層的內(nèi)容； 對(duì)于部分位于所述主題內(nèi)容區(qū)域內(nèi)部的元素，將該元素的背景設(shè)置為所述元素背景顯示層的內(nèi)容。
8.根據(jù)權(quán)利要求7所述的顯示方法，其中，根據(jù)所述位置關(guān)系設(shè)置所述元素的顯示背景的步驟通過(guò)瀏覽器擴(kuò)展向所述網(wǎng)頁(yè)注入css或js文件完成。
9.一種瀏覽器，包括: 主題區(qū)域獲取模塊，用于獲取網(wǎng)頁(yè)的主題內(nèi)容區(qū)域； 位置關(guān)系計(jì)算模塊，用于計(jì)算所述網(wǎng)頁(yè)中元素相對(duì)于所述主題內(nèi)容區(qū)域的位置關(guān)系； 背景注入模塊，用于根據(jù)所述位置關(guān)系設(shè)置所述元素的顯示背景； 顯示模塊，用于按照設(shè)置后的顯示背景顯示所述網(wǎng)頁(yè)。
10.根據(jù)權(quán)利要求9所述的瀏覽器，其中，所述位置關(guān)系計(jì)算模塊配置為: 分別將所述元素的左右邊界與所述主題內(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)部。
【文檔編號(hào)】G06F17/30GK103631867SQ201310535769
【公開(kāi)日】2014年3月12日 申請(qǐng)日期:2013年11月1日 優(yōu)先權(quán)日:2013年11月1日
【發(fā)明者】陳虞付, 任寰 申請(qǐng)人:北京奇虎科技有限公司, 奇智軟件（北京）有限公司