適用于智能電視瀏覽器的網(wǎng)頁焦點控制實現(xiàn)方法與流程
本發(fā)明涉及適用于智能電視瀏覽器的網(wǎng)頁開發(fā)技術(shù)，特別涉及一種適用于智能電視瀏覽器的網(wǎng)頁焦點控制實現(xiàn)方法。
背景技術(shù)：
隨著互聯(lián)網(wǎng)技術(shù)的蓬勃發(fā)展，互聯(lián)網(wǎng)的用戶規(guī)模與應(yīng)用場景不斷擴大，用戶不僅可以通過電腦得到互聯(lián)網(wǎng)服務(wù)，還能通過智能手機、智能電視等終端獲取互聯(lián)網(wǎng)服務(wù)。網(wǎng)頁是互聯(lián)網(wǎng)服務(wù)的基礎(chǔ)，而網(wǎng)頁焦點是指網(wǎng)頁上用戶所關(guān)注的區(qū)域，如智能電視的網(wǎng)絡(luò)電視點播頁面中，高亮的待選擇框就是一種典型的網(wǎng)頁焦點。
目前，程序人員在編寫網(wǎng)頁時通常都參照W3C標(biāo)準(zhǔn)，由于歷史的原因，W3C標(biāo)準(zhǔn)主要適用于供電腦瀏覽的網(wǎng)頁。當(dāng)這些網(wǎng)頁在諸如智能電視的新型終端上顯示時，會存在一些在電腦上顯示時預(yù)想不到的問題。以網(wǎng)頁焦點為例，在W3C標(biāo)準(zhǔn)中并沒有對適用于智能電視瀏覽器的遙控器操控方式做統(tǒng)一的規(guī)定，智能電視瀏覽器在加載網(wǎng)頁時，對網(wǎng)頁焦點標(biāo)簽的處理由瀏覽器的底層實現(xiàn)。但由于不同廠商生產(chǎn)的設(shè)備內(nèi)的原生瀏覽器對網(wǎng)頁焦點的控制及呈現(xiàn)方式各不相同，因此現(xiàn)有的智能電視瀏覽器的網(wǎng)頁焦點的實現(xiàn)方式無法適配所有智能電視瀏覽器，導(dǎo)致網(wǎng)頁在一部分智能電視瀏覽器內(nèi)瀏覽時操控體驗很差或無法操控。
技術(shù)實現(xiàn)要素：
本發(fā)明的目的在于克服已有的智能電視瀏覽器的網(wǎng)頁焦點的實現(xiàn)方式無法適配所有智能電視瀏覽器的缺陷，從而提供一種適用于智能電視瀏覽器的網(wǎng)頁焦點控制實現(xiàn)方法。
為了實現(xiàn)上述目的，本發(fā)明提供了一種適用于智能電視瀏覽器的網(wǎng)頁焦點控制實現(xiàn)方法，包括：
步驟1)、智能電視瀏覽器加載所要顯示的網(wǎng)頁代碼；其中，所述網(wǎng)頁代碼包括有自定義的焦點標(biāo)簽，所述自定義的焦點標(biāo)簽包括自定義的屬性與自定義的事件，所述自定義的屬性與焦點標(biāo)簽的顯示樣式相關(guān)聯(lián)；
步驟2)、智能電視瀏覽器的JavaScript監(jiān)聽操作事件，使用焦點標(biāo)簽時，將監(jiān)聽到的操作事件映射到所述自定義的焦點標(biāo)簽，根據(jù)自定義的焦點標(biāo)簽的坐標(biāo)信息 及焦點標(biāo)簽的層級關(guān)系，計算出各個自定義的焦點標(biāo)簽的相對位置，并通過控制焦點標(biāo)簽的顯示樣式使某一焦點標(biāo)簽成為聚焦的焦點，從而實現(xiàn)焦點的移動。
上述技術(shù)方案中，步驟2)中，智能電視瀏覽器的JavaScript所監(jiān)聽到的操作事件為遙控器操控事件，則所述步驟2)進一步包括：
步驟2-1-1)、遍歷所要顯示的網(wǎng)頁內(nèi)所有自定義的焦點標(biāo)簽，并將這些焦點標(biāo)簽在網(wǎng)頁所處的絕對位置、高寬，以及焦點標(biāo)簽的層級關(guān)系記錄下來；
步驟2-1-2)、默認(rèn)情況下，首先將最靠近頁面左上角的自定義焦點標(biāo)簽定為初始焦點位置，為其添加獲取焦點的標(biāo)識，使其呈現(xiàn)聚焦樣式；
步驟2-1-3)、頁面獲取遙控器發(fā)出的按鍵事件時，判斷按鍵鍵值，若按鍵為確認(rèn)鍵，執(zhí)行下一步，若按鍵為方向鍵，執(zhí)行步驟2-1-5)，否則不處理；
步驟2-1-4)、執(zhí)行當(dāng)前具有獲取焦點標(biāo)識的焦點標(biāo)簽中對應(yīng)的按鍵動作；
步驟2-1-5)、根據(jù)步驟2-1-1)所記錄的所有自定義的焦點標(biāo)簽的絕對位置以及焦點標(biāo)簽的層級關(guān)系計算焦點標(biāo)簽間的相對距離，根據(jù)計算結(jié)果尋找當(dāng)前具有獲取焦點標(biāo)識的焦點標(biāo)簽對應(yīng)方向上最近的自定義焦點標(biāo)簽，為其添加獲取焦點的標(biāo)識，同時清除當(dāng)前具有獲取焦點標(biāo)識的焦點標(biāo)簽上的標(biāo)識。
上述技術(shù)方案中，步驟2)中，智能電視瀏覽器的JavaScript所監(jiān)聽到的操作事件為鼠標(biāo)操控事件，則所述步驟2)進一步包括：
步驟2-2-1)、遍歷頁面內(nèi)所有自定義的焦點標(biāo)簽，并將這些標(biāo)簽在頁面所處的絕對位置、高寬，以及焦點標(biāo)簽的層級關(guān)系記錄下來；
步驟2-2-2)、默認(rèn)情況下，將最靠近頁面左上角的自定義的焦點標(biāo)簽定為初始焦點位置，為其添加獲取焦點的標(biāo)識，使其呈現(xiàn)聚焦樣式；
步驟2-2-3)、鼠標(biāo)移動時，實時獲取鼠標(biāo)位置，若鼠標(biāo)位于自定義的焦點標(biāo)簽內(nèi)，則為此標(biāo)簽添加標(biāo)識，使其呈現(xiàn)鼠標(biāo)懸浮的樣式；
步驟2-2-4)、鼠標(biāo)單擊時，獲取鼠標(biāo)當(dāng)前位置；
步驟2-2-5)、根據(jù)步驟2-2-1)所記錄的所有自定義的焦點標(biāo)簽的絕對位置及高寬，判斷鼠標(biāo)點擊位置是否處于自定義的焦點標(biāo)簽內(nèi)；
步驟2-2-6)、若鼠標(biāo)點擊位置處于某一自定義的焦點標(biāo)簽內(nèi)，則執(zhí)行此焦點標(biāo)簽對應(yīng)的點擊事件，并為其添加獲取焦點的標(biāo)識，清除之前具有獲取焦點的標(biāo)識的焦點標(biāo)簽上的標(biāo)識；若鼠標(biāo)點擊位置不處于任一自定義的焦點標(biāo)簽內(nèi)，則不作任何處理。
上述技術(shù)方案中，所述網(wǎng)頁代碼屏蔽了智能電視瀏覽器所采用的默認(rèn)焦點控制實現(xiàn)方法中包含的焦點標(biāo)簽。
本發(fā)明的優(yōu)點在于：
網(wǎng)頁中自定義焦點標(biāo)簽的所有焦點處理全部由開發(fā)者控制，屏蔽了瀏覽器底層，從而實現(xiàn)了對智能電視瀏覽器網(wǎng)頁焦點的精確控制，同時能適配不同的電視瀏覽器。
附圖說明
圖1是在一個實施例中所要加載的網(wǎng)頁的示意圖；
圖2是按照本發(fā)明方法所實現(xiàn)的網(wǎng)頁的總體示意圖；
圖3是采用本發(fā)明方法實現(xiàn)的網(wǎng)頁對遙控器操控的響應(yīng)流程示意圖；
圖4是采用本發(fā)明方法實現(xiàn)的網(wǎng)頁對鼠標(biāo)操控的響應(yīng)流程示意圖。
具體實施方式
現(xiàn)結(jié)合附圖對本發(fā)明作進一步的描述。
在一個實施例中，假設(shè)所要加載的網(wǎng)頁如圖1所示，包括有三個可聚焦的圖片，分別用A、B、C表示，其中圖片A位于網(wǎng)頁的左半部分，圖片B與圖片C位于網(wǎng)頁的右半部分，且圖片B位于圖片C之上。
程序人員按照現(xiàn)有技術(shù)在編寫該網(wǎng)頁時，所撰寫的網(wǎng)頁代碼如下：
<body>
<div><a><img src＝”A.png”></a></div>
<div><a><img src＝”B.png”></a></div>
<div><a><img src＝”C.png”></a></div>
</body>
上述網(wǎng)頁在加載時，智能電視瀏覽器的底層檢測到有<a>標(biāo)簽，此標(biāo)簽為瀏覽器默認(rèn)焦點控制實現(xiàn)方法所包含的焦點標(biāo)簽，瀏覽器的底層會根據(jù)遙控器的按鍵信息，控制焦點在這三個<a>標(biāo)簽上移動。正如背景技術(shù)中所提到的那樣，各個智能電視生產(chǎn)廠商安裝在智能電視中的瀏覽器可能各有不同，因此，當(dāng)網(wǎng)頁在智能電視TT上顯示時，圖片A獲取焦點時，若用戶按向右的方向鍵時，網(wǎng)頁焦點會變動到圖1網(wǎng)頁中的圖片B上；而當(dāng)網(wǎng)頁在智能電視VV上顯示時，圖片A獲取焦點時，若用戶按向右的方向鍵時，網(wǎng)頁焦點又可能會變動到圖1網(wǎng)頁中的圖片C上。這種差異正是不同瀏覽器的底層實現(xiàn)各不相同導(dǎo)致的。
為了避免現(xiàn)有技術(shù)所存在的上述問題，在本發(fā)明的方法中，程序開發(fā)人員在編 碼時在網(wǎng)頁中寫入自定義的焦點標(biāo)簽，在JavaScript中設(shè)定相應(yīng)的處理規(guī)則，在CSS中設(shè)定相應(yīng)的樣式，從而達(dá)到屏蔽瀏覽器底層、在網(wǎng)頁上實現(xiàn)焦點控制的目的。
圖2為按照本發(fā)明方法所實現(xiàn)的網(wǎng)頁的總體示意圖，如圖所示，自定義的焦點標(biāo)簽為組成網(wǎng)頁的主要結(jié)構(gòu)，包含了自定義屬性及自定義事件，并可根據(jù)自定義屬性關(guān)聯(lián)CSS自定義樣式。所述自定義屬性、自定義事件的具體內(nèi)容與應(yīng)用場景有關(guān)，例如，根據(jù)自定義焦點標(biāo)簽獲取焦點時，將會給相應(yīng)的標(biāo)簽添加一個值為true的自定義屬性currentFoucs。JavaScript自定義規(guī)則處理所有網(wǎng)頁邏輯，包括但不限于坐標(biāo)計算、事件監(jiān)聽等。CSS自定義樣式用于處理網(wǎng)頁焦點標(biāo)簽的顯示效果，例如給獲取焦點的自定義焦點標(biāo)簽加上藍(lán)色邊框的CSS自定義樣式的相關(guān)代碼如下：current_foucs{border:5px solid blue；}。未在CSS樣式中定義層級的標(biāo)簽?zāi)J(rèn)屬于同一層級，且同一層級中兩標(biāo)簽的相對距離總是小于分屬不同層級的兩標(biāo)簽的相對距離。需要特別指出的是，采用本發(fā)明方法所實現(xiàn)的網(wǎng)頁中不可包含瀏覽器默認(rèn)焦點控制實現(xiàn)方法所對應(yīng)的焦點標(biāo)簽，如頁面中不能出現(xiàn)類似<a>、<input>等標(biāo)簽。
仍然以圖1所示的網(wǎng)頁為例，按照本發(fā)明的方法所生成的網(wǎng)頁的代碼如下：
<body>
<div myFocus＝”true”currentFoucs＝”true”><img src＝”A.png”></div>
<div myFocus＝”true”currentFoucs＝”false”><img src＝”B.png”></div>
<div myFocus＝”true”currentFoucs＝”false”myhref＝”www.action.com”><img src＝”C.png”></div>
</body>
以上是對本發(fā)明方法中網(wǎng)頁生成過程的描述。在加載網(wǎng)頁，使用焦點標(biāo)簽時，把操作事件(如遙控器或鼠標(biāo)的操控動作)映射到自定義的焦點標(biāo)簽上，根據(jù)自定義的焦點標(biāo)簽坐標(biāo)信息及標(biāo)簽的層級關(guān)系，計算出各個自定義的焦點標(biāo)簽的相對位置，并通過控制焦點顯示樣式使標(biāo)簽成為聚焦的焦點，從而實現(xiàn)焦點的移動。
為了清晰地闡述本發(fā)明的內(nèi)容，本發(fā)明中自定義焦點標(biāo)簽對兩種操控的響應(yīng)流程說明如下，這些響應(yīng)流程由JavaScript完成：
1、采用遙控器操控的流程如圖3所示：
101)根據(jù)本發(fā)明所示方法實現(xiàn)網(wǎng)頁。
102)遍歷頁面內(nèi)所有自定義的焦點標(biāo)簽，并將這些焦點標(biāo)簽在頁面所處的絕對位置、高寬以及焦點標(biāo)簽的層級關(guān)系記錄下來。
103)默認(rèn)情況下，將最靠近頁面左上角的自定義焦點標(biāo)簽定為初始焦點位置，為其添加獲取焦點的標(biāo)識，使其呈現(xiàn)聚焦樣式。
如在默認(rèn)情況下，將圖1中的圖片A作為初始焦點位置。
104)頁面獲取遙控器發(fā)出的按鍵事件時，判斷按鍵鍵值，若按鍵為確認(rèn)鍵，轉(zhuǎn)到105)，若按鍵為方向鍵，轉(zhuǎn)到106)，否則不處理。
105)按鍵為確認(rèn)鍵時，執(zhí)行當(dāng)前具有獲取焦點標(biāo)識的焦點標(biāo)簽中對應(yīng)的按鍵動作。
106)按鍵為方向鍵時，根據(jù)所記錄的所有自定義的焦點標(biāo)簽的絕對位置以及焦點標(biāo)簽的層級關(guān)系計算焦點標(biāo)簽間的相對距離，根據(jù)計算結(jié)果尋找當(dāng)前具有獲取焦點標(biāo)識的焦點標(biāo)簽對應(yīng)方向上最近(即相對距離最小)的自定義焦點標(biāo)簽，為其添加獲取焦點的標(biāo)識，同時清除當(dāng)前具有獲取焦點標(biāo)識標(biāo)簽上的標(biāo)識。其中，在根據(jù)焦點標(biāo)簽的層級關(guān)系計算焦點標(biāo)簽間的相對距離時需要遵循下列原則：同一層級中兩焦點標(biāo)簽的相對距離總是小于分屬不同層級的兩焦點標(biāo)簽的相對距離；未在CSS樣式中定義層級的標(biāo)簽?zāi)J(rèn)屬于同一層級。
仍然以圖1為例，如接收到向右的按鍵后，焦點位置從圖片A變更為圖片B。
2、采用鼠標(biāo)操控的流程如圖4所示
201)根據(jù)本發(fā)明所示方法實現(xiàn)網(wǎng)頁。
202)遍歷頁面內(nèi)所有自定義的焦點標(biāo)簽，并將這些標(biāo)簽在頁面所處的絕對位置、高寬，以及標(biāo)簽的層級關(guān)系記錄下來。
203)默認(rèn)情況下，將最靠近頁面左上角的自定義的焦點標(biāo)簽定為初始焦點位置，為其添加獲取焦點的標(biāo)識，使其呈現(xiàn)聚焦樣式。
204)鼠標(biāo)移動時，實時獲取鼠標(biāo)位置，若鼠標(biāo)位于自定義的焦點標(biāo)簽內(nèi)，則為此標(biāo)簽添加標(biāo)識，使其呈現(xiàn)鼠標(biāo)懸浮的樣式。
205)鼠標(biāo)單擊時，獲取鼠標(biāo)當(dāng)前位置。
206)根據(jù)所記錄的所有自定義焦點標(biāo)簽的位置及高寬，判斷鼠標(biāo)點擊位置是否處于自定義的焦點標(biāo)簽內(nèi)。
207)若點擊位置處于某一自定義的焦點標(biāo)簽內(nèi)，則執(zhí)行此焦點標(biāo)簽對應(yīng)的點擊事件，并為其添加獲取焦點的標(biāo)識，清除之前具有獲取焦點的標(biāo)識的焦點標(biāo)簽上的標(biāo)識。
208)若不處于任一自定義的焦點標(biāo)簽內(nèi)，則不作任何處理。
綜上所述，本發(fā)明一種適用于智能電視瀏覽器的網(wǎng)頁焦點控制實現(xiàn)方法，制定 網(wǎng)頁生成規(guī)則及自定義的焦點標(biāo)簽的使用規(guī)則，把操作事件映射到自定義的焦點標(biāo)簽上，根據(jù)自定義的焦點標(biāo)簽坐標(biāo)信息及標(biāo)簽的層級關(guān)系，計算出各個自定義的焦點標(biāo)簽的相對位置，并通過控制焦點顯示樣式使標(biāo)簽成為聚焦的焦點，從而實現(xiàn)焦點的移動，屏蔽了智能電視瀏覽器對焦點的控制，實現(xiàn)了所有焦點處理的可控性，從而實現(xiàn)了對智能電視瀏覽器網(wǎng)頁焦點的精確控制，同時能適配不同的電視瀏覽器。
最后所應(yīng)說明的是，以上實施例僅用以說明本發(fā)明的技術(shù)方案而非限制。盡管參照實施例對本發(fā)明進行了詳細(xì)說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解，對本發(fā)明的技術(shù)方案進行修改或者等同替換，都不脫離本發(fā)明技術(shù)方案的精神和范圍，其均應(yīng)涵蓋在本發(fā)明的權(quán)利要求范圍當(dāng)中。
- 還沒有人留言評論。精彩留言會獲得點贊！
- 用于通過多個設(shè)備瀏覽和播放內(nèi)容的界面的制作方法
- 用于多瀏覽器的基于網(wǎng)絡(luò)的應(yīng)用的方法和裝置制造方法
- 無線網(wǎng)絡(luò)中用于支持用戶瀏覽多媒體信息的方法和裝置的制作方法
- 一種適用于網(wǎng)絡(luò)交換機中的干擾器的制作方法
- 用于在無線通信設(shè)備內(nèi)限制瀏覽器訪問的設(shè)備及其方法
- 用于直接在Web瀏覽器上以“所見即所得”的方式創(chuàng)建、編輯和交易主頁組件以組合主頁和 ...的制作方法
- 一種用于瀏覽器的自動清理方法及裝置制造方法
- 用于瀏覽器的語音識別處理方法和瀏覽器的制造方法
- 一種用于配置瀏覽器的導(dǎo)航頁的方法與裝置制造方法
- 用于在Web瀏覽器中呈現(xiàn)數(shù)據(jù)的方法及其設(shè)備的制作方法
- 一種用于瀏覽器的自動清理方法及裝置制造方法
- 用于瀏覽器的語音識別處理方法和瀏覽器的制造方法
- 一種用于配置瀏覽器的導(dǎo)航頁的方法與裝置制造方法
- 用于在Web瀏覽器中呈現(xiàn)數(shù)據(jù)的方法及其設(shè)備的制作方法
- 用于現(xiàn)有應(yīng)用的定制和分發(fā)的基于瀏覽器的代理服務(wù)器的制作方法
- 一種適用于移動設(shè)備信息瀏覽的通用頁面返回方法
- 用于在Web瀏覽器上處理Widget的系統(tǒng)和方法
- 用于瀏覽器中產(chǎn)品查看和購買的用戶界面的制作方法
- 一種用于基于搜索結(jié)果提供瀏覽信息的方法和設(shè)備的制作方法
- 一種用于更新瀏覽器的方法和設(shè)備的制作方法
- 用于直接在Web瀏覽器上以“所見即所得”的方式創(chuàng)建、編輯和交易主頁組件以組合主頁和 ...的制作方法
- 一種用于瀏覽器的自動清理方法及裝置制造方法
- 用于瀏覽器的語音識別處理方法和瀏覽器的制造方法
- 一種用于配置瀏覽器的導(dǎo)航頁的方法與裝置制造方法
- 用于在Web瀏覽器中呈現(xiàn)數(shù)據(jù)的方法及其設(shè)備的制作方法
- 用于現(xiàn)有應(yīng)用的定制和分發(fā)的基于瀏覽器的代理服務(wù)器的制作方法
- 一種適用于移動設(shè)備信息瀏覽的通用頁面返回方法
- 用于在Web瀏覽器上處理Widget的系統(tǒng)和方法
- 用于瀏覽器中產(chǎn)品查看和購買的用戶界面的制作方法
- 用于觸摸屏顯示處理的方法、裝置和瀏覽器的制造方法
- 用于步行瀏覽的方法和裝置制造方法
- 用于通過多個設(shè)備瀏覽和播放內(nèi)容的界面的制作方法
- 用于多瀏覽器的基于網(wǎng)絡(luò)的應(yīng)用的方法和裝置制造方法
- 無線網(wǎng)絡(luò)中用于支持用戶瀏覽多媒體信息的方法和裝置的制作方法
- 用于在無線通信設(shè)備內(nèi)限制瀏覽器訪問的設(shè)備及其方法
- 用于直接在Web瀏覽器上以“所見即所得”的方式創(chuàng)建、編輯和交易主頁組件以組合主頁和 ...的制作方法
- 一種用于瀏覽器的自動清理方法及裝置制造方法
- 一種用于推薦瀏覽器的外觀信息的方法和裝置制造方法
- 用于瀏覽器的語音識別處理方法和瀏覽器的制造方法
- 一種用于配置瀏覽器的導(dǎo)航頁的方法與裝置制造方法