一種瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于瀏覽器技術(shù)領(lǐng)域，尤其涉及一種瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法及裝置。
【背景技術(shù)】
[0002]內(nèi)嵌地址欄是一種特殊的瀏覽器地址欄，其并非傳統(tǒng)的獨立于頁面的一個瀏覽器組件，而是內(nèi)嵌在頁面中，被視為頁面的一部分。目前瀏覽器的內(nèi)嵌地址欄均是基于用戶界面(User Interface,UI)控件來實現(xiàn)的,通過將頁面的顯示區(qū)域向下推動，由內(nèi)嵌地址欄占據(jù)一部分原本屬于頁面的位置，從而在視覺上實現(xiàn)地址欄的內(nèi)嵌。
[0003]然而，由于部分瀏覽器內(nèi)核(例如webkit內(nèi)核)無法感知到通過UI控件來實現(xiàn)的內(nèi)嵌地址欄的存在，當(dāng)涉及到頁面滾動等操作時，都需要額外對內(nèi)嵌地址欄進行處理，導(dǎo)致整個開發(fā)過程工作量增加，開發(fā)效率降低。

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

[0004]本發(fā)明實施例的目的在于提供一種瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法，旨在解決現(xiàn)有的瀏覽器內(nèi)嵌地址欄的實現(xiàn)辦法容易導(dǎo)致開發(fā)過程工作量增加，開發(fā)效率降低的問題。
[0005]本發(fā)明實施例是這樣實現(xiàn)的，一種瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法，包括:
[0006]當(dāng)載入網(wǎng)頁的超文本標(biāo)記語言時，在所述網(wǎng)頁的超文本標(biāo)記語言中插入預(yù)置的超文本標(biāo)記語言，所述預(yù)置的超文本標(biāo)記語言用于在所述網(wǎng)頁中顯示地址欄；
[0007]解析所述預(yù)置的超文本標(biāo)記語言，創(chuàng)建與所述預(yù)置的超文本標(biāo)記語言中的標(biāo)簽對應(yīng)的文件對象模型節(jié)點；
[0008]根據(jù)創(chuàng)建的所述文件對象模型節(jié)點，創(chuàng)建與所述預(yù)置的超文本標(biāo)記語言中的標(biāo)簽對應(yīng)的渲染節(jié)點；
[0009]繪制創(chuàng)建的每個所述渲染節(jié)點，以在網(wǎng)頁中內(nèi)嵌所述地址欄。
[0010]本發(fā)明實施例的另一目的在于提供一種瀏覽器內(nèi)嵌地址欄的實現(xiàn)裝置，包括:
[0011]插入單元，用于當(dāng)載入網(wǎng)頁的超文本標(biāo)記語言時，在所述網(wǎng)頁的超文本標(biāo)記語言中插入預(yù)置的超文本標(biāo)記語言，所述預(yù)置的超文本標(biāo)記語言用于在所述網(wǎng)頁中顯示地址欄；
[0012]第一創(chuàng)建單元，用于解析所述預(yù)置的超文本標(biāo)記語言，創(chuàng)建與所述預(yù)置的超文本標(biāo)記語言中的標(biāo)簽對應(yīng)的文件對象模型節(jié)點；
[0013]第二創(chuàng)建單元，用于根據(jù)創(chuàng)建的所述文件對象模型節(jié)點，創(chuàng)建與所述預(yù)置的超文本標(biāo)記語言中的標(biāo)簽對應(yīng)的渲染節(jié)點；
[0014]顯示單元，用于繪制創(chuàng)建的每個所述渲染節(jié)點，以在網(wǎng)頁中內(nèi)嵌所述地址欄。
[0015]在本發(fā)明實施例中，通過HTML的方式來實現(xiàn)瀏覽器對內(nèi)嵌地址欄的加載與顯示，同時，在瀏覽器內(nèi)預(yù)置相應(yīng)的解析功能，使得瀏覽器能夠成功地對用于顯示內(nèi)嵌地址欄的HTML中新擴充的標(biāo)簽進行解析，通過上述方式，當(dāng)涉及到相關(guān)頁面操作時，瀏覽器無需額外對內(nèi)嵌地址欄進行處理，由此大大地減輕了開發(fā)工作量，提高了開發(fā)效率。
【附圖說明】
[0016]圖1是本發(fā)明實施例提供的瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法的實現(xiàn)流程圖；
[0017]圖2是本發(fā)明實施例提供的S102生成的繼承關(guān)系示意圖；
[0018]圖3是本發(fā)明實施例提供的S102生成的DOM樹示意圖；
[0019]圖4是本發(fā)明實施例提供的S103生成的繼承關(guān)系示意圖；
[0020]圖5是本發(fā)明實施例提供的S103生成的Render樹示意圖；
[0021]圖6是本發(fā)明另一實施例提供的瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法的實現(xiàn)流程圖；
[0022]圖7是本發(fā)明另一實施例提供的瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法的實現(xiàn)流程圖；
[0023]圖8是本發(fā)明實施例提供的瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法S107的具體實現(xiàn)流程圖；
[0024]圖9是本發(fā)明實施例提供的瀏覽器內(nèi)嵌地址欄的實現(xiàn)裝置的結(jié)構(gòu)框圖。
【具體實施方式】
[0025]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點更加清楚明白，以下結(jié)合附圖及實施例，對本發(fā)明進行進一步詳細說明。應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0026]在本發(fā)明實施例中，通過超文本標(biāo)記語言(Hypertext Markup Language,HTML)的方式來實現(xiàn)瀏覽器對內(nèi)嵌地址欄的加載與顯示，同時，在瀏覽器內(nèi)預(yù)置相應(yīng)的解析功能，使得瀏覽器能夠成功地對用于顯示內(nèi)嵌地址欄的HTML中新擴充的標(biāo)簽進行解析，通過上述方式，當(dāng)涉及到相關(guān)頁面操作時，瀏覽器無需額外對內(nèi)嵌地址欄進行處理，由此大大地減輕了開發(fā)工作量，提高了開發(fā)效率。
[0027]圖1示出了本發(fā)明實施例提供的瀏覽器內(nèi)嵌地址欄的實現(xiàn)方法的實現(xiàn)流程，詳述如下:
[0028]在SlOl中，當(dāng)載入網(wǎng)頁的HTML時，在所述網(wǎng)頁的HTML中插入預(yù)置的HTML，所述預(yù)置的HTML用于在所述網(wǎng)頁中顯示地址欄。
[0029]當(dāng)瀏覽器需要加載網(wǎng)頁時，首先獲取并載入該網(wǎng)頁的HTML，從而啟動瀏覽器的解析功能，對該網(wǎng)頁的HTML進行解析。而在本實施例中，在載入網(wǎng)頁的HTML之后，對網(wǎng)頁的HTML進行解析之前，瀏覽器會在該網(wǎng)頁的HTML中插入一段預(yù)置的HTML，以使該預(yù)置的HTML作為該網(wǎng)頁的HTML的一部分，一同進行解析。具體地，可以在該網(wǎng)頁的HTML的body標(biāo)簽中插入一段預(yù)置的HTML。
[0030]在本實施例中，預(yù)置的HTML在經(jīng)過瀏覽器的解析之后，用于在網(wǎng)頁中顯示地址欄，即，實現(xiàn)瀏覽器內(nèi)嵌地址欄。為了能夠最終在網(wǎng)頁中顯示地址欄，該預(yù)置的HTML中包含了一些現(xiàn)行的HTML標(biāo)準之外的、新定義的HTML標(biāo)簽(TAG)，其中，包括了內(nèi)嵌地址欄標(biāo)簽(<AddressBar>),以及以下至少一項:
[0031 ] 地址欄圖標(biāo)標(biāo)簽(〈AddressBarlcon〉)、地址欄輸入框標(biāo)簽(〈AddressBar Input〉)或者地址欄分享標(biāo)簽(〈AddressBarShare〉)。
[0032]在本實施例中，當(dāng)新定義了上述標(biāo)簽之后，需要在瀏覽器中增加對上述新定義標(biāo)簽的解析功能，以使得當(dāng)瀏覽器解析到這部分新定義標(biāo)簽時，能夠成功解析并在頁面顯示區(qū)域渲染出內(nèi)嵌地址欄。其中，內(nèi)嵌地址欄標(biāo)簽即被解析并渲染為在網(wǎng)頁中顯示的內(nèi)嵌地址欄，地址欄圖標(biāo)標(biāo)簽即被解析并渲染為在內(nèi)嵌地址欄中顯示的圖標(biāo)，地址欄輸入框標(biāo)簽即被解析并渲染為在內(nèi)嵌地址欄中顯示的用于輸入網(wǎng)頁地址的輸入框，地址欄分享標(biāo)簽即被解析并渲染為在內(nèi)嵌地址欄中顯示的用于分享網(wǎng)址或者網(wǎng)頁內(nèi)容的圖標(biāo)或者按鈕。
[0033]作為本發(fā)明的一個實現(xiàn)示例，預(yù)置的HTML的格式可以大致如下:
[0034]<Addres sBar>
[0035]〈AddressBarlcon〉
[0036]〈/AddressBarlcon〉
[0037]〈AddressBar Input〉
[0038]〈/AddressBar Input〉
[0039]〈AddressBarShare〉
[0040]〈/AddressBarShare〉
[0041]〈/AddressBar〉
[0042]其中，上述新定義的標(biāo)簽中的內(nèi)容可以包括一些現(xiàn)行HTML標(biāo)準中的標(biāo)準屬性，例如id、name λ onClick等等，還可以包括一些自定義的屬性，當(dāng)涉及到自定義屬性時，相應(yīng)地，需要在瀏覽器中增加對這些自定義屬性的解析功能，在此不一一舉例說明。
[0043]在S102中，解析所述預(yù)置的HTML，創(chuàng)建與所述預(yù)置的HTML中的標(biāo)簽對應(yīng)的文件對象模型(Document Object Model，D0M)節(jié)點。
[0044]在本實施例中，由于新定義了標(biāo)簽，因此，需要在瀏覽器中增加對這部分新定義標(biāo)簽的解析功能。具體地，通過在瀏覽器中增加這部分新定義標(biāo)簽對應(yīng)的節(jié)點類，從而生成這部分新定義標(biāo)簽所對應(yīng)的DOM節(jié)點，用于完整構(gòu)建整個網(wǎng)頁的DOM樹。
[0045]例如，
[0046]標(biāo)簽〈AddressBar〉對應(yīng)DOM 節(jié)點 HTMLAddressBarElement ；
[0047]標(biāo)簽〈AddressBarlcon〉對應(yīng)DOM 節(jié)點 HTMLAddressBarIconElement ；
[0048]標(biāo)簽〈AddressBarlnput〉對應(yīng)DOM 節(jié)點 HTMLAddressBarInputElement ；
[0049]標(biāo)簽〈AddressBarShare〉對應(yīng)DOM 節(jié)點 HTMLAddressBarShareElement。
[0050]作為本發(fā)明的一個實現(xiàn)示例，經(jīng)過S102之后，生成的DOM節(jié)點之間的繼承關(guān)系圖以及DOM樹可以分別如圖2及圖3所示。在圖2中，每個DOM節(jié)點均繼承于連接該節(jié)點的箭頭所指向的上一個節(jié)點，例如，DOM節(jié)點HTMLAddressBarElement和DOM節(jié)點 HTMLAddressBarIconElement 均繼承于 DOM 節(jié)點 HTMLELment，又例如，DOM 節(jié)點HTMLAddressBarInputElement 和 DOM 節(jié)點 HTMLAddressBarShareElement 均繼承于 DOM節(jié)點HTMLFormControlElement?而圖3中展示的則是將內(nèi)嵌地址欄的代碼進行解析之后生成的DOM樹，其中，內(nèi)嵌地址欄標(biāo)簽對應(yīng)HTMLAddressBarElement節(jié)點，在該節(jié)點之下存在三個子節(jié)點，分別是 HTMLAddressBarIconElement、HTMLAddressBarInputElement 和HTMLAddressBarShareEIement。
[0051]在S103中，根據(jù)創(chuàng)建的所述DOM節(jié)點，創(chuàng)建與所述預(yù)置的HTML中的標(biāo)簽對應(yīng)的渲染(Render)節(jié)點。
[0052]在本實施例中，由于新定義了標(biāo)簽，因此，還需要在瀏覽器中增加相應(yīng)的解析功能，用于根據(jù)這部分新定義標(biāo)簽所對應(yīng)的DOM節(jié)點來創(chuàng)建這部分新定義的標(biāo)簽所對應(yīng)的Render節(jié)點。具體地，通過在瀏覽器中增加對應(yīng)的渲染類，從而生成這部分新定義標(biāo)簽的DOM節(jié)點所對應(yīng)的Render節(jié)點，用于完整構(gòu)建整個網(wǎng)頁的Render樹。
[0053]例如，
[0054]DOM 節(jié)點 HTMLAddressBarElement 對應(yīng) Render 節(jié)點 RenderAddressBar ；
[0055]DOM 節(jié)點 HTMLAddressBarIconElement 對應(yīng) Render 節(jié)點 RenderAddressBarIcon ；
[0056]DOM 節(jié)點 HTMLA