明一個實施例的一種用于識別網頁中可見圖片的裝置框圖;
[0052] 圖4是圖3中識別第二圖片模塊的示意圖。
【具體實施方式】
[0053] 下面將參照附圖更詳細地描述本公開的示例性實施例。雖然附圖中顯示了本公開 的示例性實施例,然而應當理解,可以以各種形式實現本公開而不應被這里闡述的實施例 所限制。相反,提供這些實施例是為了能夠更透徹地理解本公開,并且能夠將本公開的范圍 完整的傳達給本領域的技術人員。
[0054] 本發明實施例中提供一種用于識別網頁中可見圖片的方法,如圖1所示,具體包 括:
[0055] 步驟101 :獲取網頁上的鼠標指針的位置信息以及鼠標指針的位置信息在網頁中 對應的頁面元素,對頁面元素進行判斷,當頁面元素是圖片標簽并且對應的第一圖片是可 見圖片時,則執行步驟102 ;當頁面元素是第一類標簽時,則執行步驟103 ;
[0056] 本實施例中,鼠標指針的位置信息以及其對應的頁面元素是根據瀏覽器渲染引擎 實時發送的通知獲取的;當鼠標指針在網頁中移動時,瀏覽器渲染引擎會實時的將鼠標指 針的狀態通知給瀏覽器;
[0057] 具體的,當鼠標指針移入網頁中的一個元素時,瀏覽器渲染引擎將當前鼠標指針 的位置信息以及在頁面中對應的頁面元素通知給瀏覽器,瀏覽器獲取鼠標指針的位置信息 以及鼠標指針的位置信息對應的頁面元素。
[0058] 步驟102 :確定第一圖片是鼠標指針的位置信息在網頁上對應的可見圖片;
[0059] 本實施例中,圖片標簽為<img> ;圖片標簽中包括圖片標簽的屬性信息,其中,圖 片標簽的屬性信息包括:圖片的尺寸信息、圖片的位置信息以及圖片的統一資源定位符; 可見圖片具體為圖片的尺寸信息不為〇、并且圖片的可見區域不為〇。其中,圖片的可見區 域具體為,將圖片與其父容器做交集,獲取交集部分即為圖片的可見區域。
[0060] 具體地,獲取圖片的可見區域具體包括:獲取圖片標簽在網頁中對應的圖片的位 置信息以及圖片的尺寸信息,根據圖片的位置信息以及圖片的尺寸信息得到圖片在網頁中 的位置以及占據的區域范圍,獲取圖片標簽對應的父容器的位置信息以及父容器的尺寸信 息,根據父容器的位置信息以及父容器的尺寸信息得到父容器在網頁中的位置以及占據的 區域范圍,將圖片在網頁中的位置與父容器在網頁中占據的位置做交集,得到相交位置,將 圖片在網頁中占據的區域范圍與父容器在網頁中占據的范圍做交集,得到相交區域,對相 交區域和相交位置進行判斷,如果同時存在相交區域和相交位置,則確定存在圖片的可見 區域,圖片的可見區域即為根據相交位置以及相交區域確定的區域范圍。
[0061] 步驟103 :逐層遍歷頁面元素的祖先元素所包含的各元素,直至找到一元素是圖 片標簽且鼠標指針的位置信息處于該元素的可見區域范圍內,則確定該元素對應的第二圖 片是鼠標指針的位置信息在網頁上對應的可見圖片;
[0062] 本實施例中,第一類標簽包括<div>、〈span>、〈a>。逐層遍歷具體是根據網頁源代 碼中的樹狀結構逐層遍歷,具體是在網頁的DOM(Document Object Model,文檔對象模型) 樹上面進行逐層遍歷的;當頁面元素是第一類標簽時,如圖2所示,具體包括:
[0063] 步驟1031 :判斷網頁中對應的頁面元素是否存在上一層元素,是則執行步驟 1032 ;否則結束遍歷頁面元素的祖先元素;
[0064] 步驟1032 :獲取頁面元素的上一層元素,將其作為頁面元素的祖先元素,獲取頁 面元素的祖先元素中的各元素,執行步驟1033 ;其中,上一層元素是指在DOM樹中頁面元素 的父節點。
[0065] 步驟1033 :判斷頁面元素的祖先元素中的各元素是否有至少一個是圖片標簽,是 則執行步驟1035 ;否則執行步驟1034 ;
[0066] 步驟1034 :獲取頁面元素的祖先元素的上一層元素,用其更新頁面元素的祖先元 素,獲取更新后的頁面元素的祖先元素中的各元素,執行步驟1033 ;
[0067] 步驟1035 :獲取頁面元素的祖先元素中各圖片標簽的可見區域范圍,直到找到鼠 標指針的位置信息處于的可見區域范圍,確定屬于可見區域范圍的圖片標簽對應的第二圖 片是鼠標指針的位置信息在網頁上對應的可見圖片。
[0068] 在具體實施過程中,以超文本標記語言制作的頁面進行舉例,頁面上的各元素如 下:
[0069] <:div class=" img-wrapper" <img sic= " htl[);//i2, si nalmg. cn/ciy/c/2015-06-26/1;7939Ρ1?? 1)31991153F21DT201506 26095913. jpg'* width=?? 40height=" > <prev/Next> <:a Bref= " 下一隱if, jpg" > </div>;
[0070] 當鼠標的光標的位置對應的頁面元素是A標簽時,即對應〈a href ="下一圖 片.jpg" >,此時獲取該A標簽的上一層元素,即獲取A標簽的祖先元素 div標簽,獲取 div標簽中包含的各個圖片標簽即獲取<div>與</div>之間包含的所有的<img>,即獲 取到〈img src ="http://i2.sinaimg.cn/dy/c/2015-06-26/U7939PlTlD31991153F21 DT20150626095913. jpg"width ="40"height ="20"> ;
[0071] 并且獲取該img標簽在頁面中的可見區域范圍,并確定鼠標光標的位置屬于的可 見區域范圍對應該img標簽,確定該img標簽對應的第二圖片是鼠標指針的位置信息在網 頁上對應的可見圖片,其中,第二圖片即為保存在:
[0072] http://i2.sinaimg.en/dy/c/2015-06-26/U7939PlTlD31991 153F21 DT20150626095913. jpg 位置中的圖片。
[0073] 進一步的,當逐層遍歷頁面元素的祖先元素所包含的各元素,找不到一元素是圖 片標簽且鼠標指針的位置信息處于該元素的可見區域范圍內時,遍歷網頁上的各圖片標簽 的可見區域范圍,找到鼠標指針的位置信息處于的可見區域范圍,則確定屬于該可見區域 范圍的圖片標簽對應的第三圖片是鼠標指針的位置信息在網頁上對應的可見圖片。
[0074] 本實施例中,可選的,執行主體是瀏覽器。
[0075] 可選的,在渲染引擎渲染完網頁時獲取圖片標簽的屬性信息,將圖片標簽的屬性 信息發送至服務器,接收并保存服務器返回的圖片相關信息,當鼠標指針的位置信息在網 頁上對應可見圖片時,獲取該可見圖片對應的圖片相關信息,將圖片相關信息展現在該可 見圖片上,當鼠標指針的位置信息移出該可見圖片時,隱藏該可見圖片上展現的圖片相關 信息。
[0076] 可選的,在識別到鼠標指針的位置信息在網頁上對應的可見圖片時,還可以包括 獲取圖片標簽的屬性信息,將圖片標簽的屬性信息發送至服務器,接收并保存服務器返回 的圖片相關信息,當鼠標指針的位置信息在網頁上對應可見圖片時,獲取該可見圖片對應 的圖片相關信息,將圖片相關信息展現在該可見圖片上,當鼠標指針的位置信息移出該可 見圖片時,隱藏該可見圖片上展現的圖片相關信息。
[0077] 可選的,本實施例中還包括:當頁面元素既不是圖片標簽也不是第一類標簽時,則 確定鼠標指針的位置信息在網頁中對應的不是圖片。
[0078] 可選的,本實施例還可以為:獲取網頁上的鼠標指針的位置信息,遍歷頁面中各圖 片標簽所在的可見區域范圍,獲取包含該鼠標指針的位置信息的可見區域范圍對應的圖片 標簽,確定該圖片標簽對應的圖片是鼠標指針的位置信息在網頁上對應的可見圖片。
[0079] 本實施例中還提供一種用于識別網頁中可見圖片的裝置,如圖3所示,包括:
[0080] 獲取信息模塊201,用于獲取網頁上的鼠標指針的位置信息以及鼠標指針的位置 信息在網頁中對應的頁面元素;
[0081] 識別第一圖片模塊202,用于當頁面元素是圖片標簽并且其對應的第一圖片是可 見圖片時,確定第一圖片是鼠標指針的位置信息在網頁上對應的可見圖片;
[0082] 識別第二圖片模塊203,用于當頁面元素是第一類標簽時,逐層遍歷頁面元素的祖 先元素所包含的各元素,直至找到一元素是圖片標簽且鼠標指針的位置信息處于該元素的 可見區域范圍內,則確定該元素對應的第二圖片是鼠標指針的位置信息在網頁上對應的可 見圖片。
[0083] 本實施例中,識別第二圖片模塊203,如圖4所示,具體包括:
[0084] 第一判斷子模塊2031,用于判斷網頁中對應的頁面元素是否存在上一層元素;
[0085] 第一獲取子模塊2032,用于獲取頁面元素的上一層元素,將其作為頁面元素的祖 先元素;
[0086] 第二獲取子模塊2033,用于獲取頁面元素的祖先元素中的各元素;
[0087] 第二判斷子模塊2034,用