持HTML5的情況,對綁定事件以實現(xiàn)對導航操作(前進、后退操作以顯示不同的歷史頁面)的監(jiān)聽,能夠?qū)δ壳暗牟煌愋汀⒉煌姹镜臑g覽器客戶端實現(xiàn)兼容;并且,利用狀態(tài)對象列表記錄歷史頁面發(fā)生跳轉(zhuǎn)時的現(xiàn)場數(shù)據(jù),從而在進行歷史頁面的前進或后退操作時能夠恢復歷史頁面的顯示現(xiàn)場(例如顯示歷史頁面發(fā)生跳轉(zhuǎn)時所對應的頁面滾動位置,對于用戶來說,無需在歷史頁面中尋找發(fā)生歷史頁面發(fā)生頁面跳轉(zhuǎn)的歷史頁面的滾動位置,節(jié)省了用戶的操作時間,提升了用戶體驗。
【附圖說明】
[0047]圖1a是本發(fā)明實施例中信息處理方法的實現(xiàn)流程圖一;
[0048]圖1b是本發(fā)明實施例中頁面顯示的場景示意圖一;
[0049]圖1c是本發(fā)明實施例中頁面顯示的場景示意圖二 ;
[0050]圖2a是本發(fā)明實施例中瀏覽器客戶端的結(jié)構(gòu)示意圖一;
[0051]圖2b是本發(fā)明實施例中瀏覽器客戶端的結(jié)構(gòu)示意圖二 ;
[0052]圖2c是本發(fā)明實施例中瀏覽器客戶端的結(jié)構(gòu)示意圖三;
[0053]圖3是本發(fā)明實施例中信息處理方法的實現(xiàn)流程圖二 ;
[0054]圖4是本發(fā)明實施例中信息處理方法的實現(xiàn)流程圖三;
[0055]圖5是本發(fā)明實施例中信息處理方法的實現(xiàn)流程圖四;
[0056]圖6是本發(fā)明實施例中信息處理方法的實現(xiàn)流程圖五。
【具體實施方式】
[0057]以下結(jié)合附圖及實施例,對本發(fā)明進行進一步詳細說明,應當理解,此處所描述的具體實施例僅僅用以解釋本發(fā)明,并不用于限定本發(fā)明。
[0058]發(fā)明人在實施本發(fā)明的過程中發(fā)現(xiàn),由于終端中的瀏覽器客戶端的種類多樣,即使同一瀏覽器客戶端也存在諸多版本,導致瀏覽器客戶端運行單頁面應用時,出現(xiàn)以下問題:
[0059]I)無法實現(xiàn)當前頁面瀏覽的后退、前進
[0060]由于單頁面應用瀏覽器客戶端的前端只有一個地址(所有的內(nèi)容均在唯一的頁面中加載),當用戶在頁面內(nèi)觸發(fā)鏈接時,雖然頁面(頁面內(nèi)容)發(fā)生了變換,但由于未進行頁面的重新加載或跳轉(zhuǎn),瀏覽器客戶端基于頁面的唯一地址將所有的變換內(nèi)容后的頁面均識別為同一個頁面;這就導致瀏覽器客戶端無法基于瀏覽頁面地址的歷史記錄來實現(xiàn)頁面的后退(顯示歷史頁面)或前進(顯示歷史頁面再顯示當前歷史頁面之前的頁面);雖然相關(guān)技術(shù)如HTML5提出了解決方案,但是仍然難以兼容所有種類及版本的瀏覽器客戶端實現(xiàn)頁面的前進、后退;
[0061]2)無法實現(xiàn)歷史頁面的現(xiàn)場保護
[0062]相關(guān)技術(shù)中瀏覽器客戶端運行單頁面應用實現(xiàn)頁面后退(也即顯示一個歷史頁面,這里的歷史頁面是指顯示當前歷史頁面之前所顯示的頁面)時,總是會顯示歷史頁面的起始區(qū)域(例如頁面的最頂部),用戶還需要在歷史頁面中手動查找在歷史頁面中觸發(fā)更新當前頁面內(nèi)容的位置(例如,用戶可能在該位置觸發(fā)鏈接,從而觸發(fā)瀏覽器客戶端更新了當前頁面也即當前頁面內(nèi)容,但頁面的地址保持不變),操作效率低下,影響了用戶體驗。
[0063]針對上述問題,本發(fā)明實施例記載一種信息處理方法,可以應用于瀏覽器客戶端運行單頁面呈現(xiàn)頁面時的處理;如圖1a所示,包括以下步驟:
[0064]步驟101,檢測瀏覽器客戶端是否支持HTML5,綁定與所得到的檢測結(jié)果對應的事件。
[0065]檢測結(jié)果表征支持HTML5時,綁定彈出狀態(tài)(popState)事件和哈希值變更(hashChange)事件;檢測結(jié)果表征不支持HTML5時,綁定hashChange事件;HTML5具有對popState事件和hashChange事件的原生支持,而目前的瀏覽器客戶端均支持hashChange事件,在單頁面應用中,對顯示不同的內(nèi)容的頁面使用唯一的頁面地址與不同的哈希(hash)值結(jié)合的方式進行區(qū)分,當瀏覽器被觸發(fā)顯示與當前頁面不同頁面(不可之前未顯示的新頁面或已經(jīng)顯示過的歷史頁面),均會觸發(fā)hashChange事件。
[0066]步驟102,監(jiān)聽綁定的事件中被觸發(fā)的事件,基于監(jiān)聽結(jié)果確定針對當前頁面的導航操作的類型。
[0067]其中,當前頁面為基于加載從網(wǎng)絡(luò)服務(wù)器獲取的頁面數(shù)據(jù)在瀏覽器客戶端呈現(xiàn)。
[0068]下面針對瀏覽器客戶端支持HTML5和不支持HTML5兩種情況進行說明。
[0069]I)檢測結(jié)果表征瀏覽器客戶端支持HTML5
[0070]被觸發(fā)的popState事件指向的狀態(tài)對象攜帶空值Null時,確定導航操作的類型表征觸發(fā)在瀏覽器客戶端呈現(xiàn)新頁面;實際應用中對應以下場景:用戶在瀏覽器客戶端呈現(xiàn)的頁面中點擊一個鏈接,這就將觸發(fā)popState事件,popState事件對象的狀態(tài)(state)屬性會包含相應的狀態(tài)對象(state object)的拷貝,且當操作為觸發(fā)顯示新頁面(也即瀏覽器客戶端之前未顯示過的頁面)的操作時,state object中的值為空值Null。
[0071]被觸發(fā)的popState事件指向的狀態(tài)對象攜帶非空值時,確定導航操作的類型表征觸發(fā)在瀏覽器客戶端呈現(xiàn)歷史頁面,此時的導航操作為頁面瀏覽的后退操作或前進操作(也即在瀏覽器已經(jīng)顯示過歷史頁面中進行切換)。
[0072]其中,當檢測結(jié)果表征支持HTML5、且導航操作的類型表征觸發(fā)在瀏覽器客戶端呈現(xiàn)新頁面時,還在狀態(tài)對象列表中插入新的狀態(tài)對象,新的狀態(tài)對象包括當前頁面在瀏覽器客戶端中的顯示現(xiàn)場數(shù)據(jù)(例如頁面的滾動位置),從而,后續(xù)從其他頁面觸發(fā)顯示當前頁面時,可以基于當前頁面的顯示現(xiàn)場數(shù)據(jù)恢復當前頁面的顯示現(xiàn)場,例如,在當前頁面(設(shè)為頁面I)的第10行的鏈接被觸發(fā)從而使瀏覽器顯示其他頁面(設(shè)為頁面2)時,后續(xù)如果被觸發(fā)顯示頁面1,則可以基于頁面I的顯示現(xiàn)場數(shù)據(jù)(第10行)在瀏覽器客戶端中顯示頁面I的第10行的位置。
[0073]2)檢測結(jié)果表征不支持HTML5
[0074]被觸發(fā)的hashChange事件指向的頁面地址未攜帶時間戳,或,被觸發(fā)的hashChange事件指向的頁面地址攜帶的時間戳未與狀態(tài)對象列表中的狀態(tài)對象具有的時間戳匹配時,確定導航操作的類型表征觸發(fā)在瀏覽器客戶端呈現(xiàn)新頁面(這里的新頁面是指顯示瀏覽器客戶端之前未顯示的頁面);
[0075]被觸發(fā)的hashChange事件指向的頁面地址攜帶的時間戳與狀態(tài)對象列表中的狀態(tài)對象具有的時間戳匹配時,確定導航操作的類型表征觸發(fā)在瀏覽器客戶端呈現(xiàn)歷史頁面(此時的導航操作為頁面的前進操作或后退操作,也即在歷史頁面中進行切換的操作)。
[0076]其中,當檢測結(jié)果表征不支持HTML5、且確定導航操作的類型表征觸發(fā)在瀏覽器客戶端呈現(xiàn)新頁面時,還可以在狀態(tài)對象列表中插入新的狀態(tài)對象,新的狀態(tài)對象包括當前頁面在瀏覽器客戶端中的顯示現(xiàn)場數(shù)據(jù)(例如頁面所滾動的位置);將當前頁面歷史數(shù)據(jù)中對應當前頁面的頁面地址的哈希值與時間戳拼裝得到新的頁面地址,利用所得到的新的頁面地址替換頁面歷史數(shù)據(jù)中對應當前頁面的頁面地址;也就是在頁面歷史記錄中將當前頁面被觸發(fā)跳轉(zhuǎn)顯示新頁面(也即這里的新頁面是指具有與之前顯示的頁面不同內(nèi)容的頁面)時,均在頁面歷史數(shù)據(jù)中記錄當前頁面對的顯示現(xiàn)場數(shù)據(jù)。
[0077]步驟103,確定導航操作的類型表征在瀏覽器客戶端呈現(xiàn)歷史頁面時,基于歷史頁面的時間戳,確定狀態(tài)對象列表中具有歷史頁面的時間戳的狀態(tài)對象,從所確定的狀態(tài)對象中提取顯示現(xiàn)場數(shù)據(jù)。
[0078]其中,歷史頁面的地址攜帶的哈希值與當前頁面的地址攜帶的哈希值不同;由于瀏覽器客戶端運行單頁面應用呈現(xiàn)頁面,因此單頁面應用面向瀏覽器客戶端的前端只有一個頁面地址(也就是說雖然頁面內(nèi)容發(fā)生了變化但是頁面的地址保持不變),瀏覽器客戶端可以將唯一的頁面地址之后添加哈希(hash)值來區(qū)分顯示不同內(nèi)容的頁面,添加哈希值的頁面地址的一個示例中可以采用以下的表達形式:URL = http://www.example.com#there-1s_hash,其中#之后的為hash值,在單頁面應用中,顯示有不同內(nèi)容的頁面面向瀏覽器只有一個地址http:1l www.example.com0
[0079]步驟104,獲取歷史頁面對應的頁面數(shù)據(jù),基于頁面數(shù)據(jù)、以及顯示現(xiàn)場數(shù)據(jù)在瀏覽器客戶端中恢復歷史頁面的顯示現(xiàn)場。
[0080]一個示例如圖1b所示,終端中的瀏覽器客戶端運行單頁面應用顯示頁面I時,如果用戶觸發(fā)第7行的鏈接,使當前頁面的內(nèi)容發(fā)生了變化,瀏覽器客戶端可以使用Ajax (異步JavaScript和XML)從網(wǎng)絡(luò)服務(wù)器獲取更新的內(nèi)容數(shù)據(jù)并呈現(xiàn)頁面2 (頁面I和頁面2面向瀏覽器客戶端為同一地址,因此瀏覽器端可以使用Hash值區(qū)分顯示有不同內(nèi)容的頁面);當用戶在頁面2觸發(fā)后退按鈕時,基于上述的步驟,可以從頁面歷史數(shù)據(jù)中提取出頁面I對應的顯示現(xiàn)場數(shù)據(jù)(第7行),將頁面I滾動至第7行顯示;
[0081]另一個示例如圖1c所示,終端中的瀏覽器客戶端運行單頁面應用顯示頁面I時,如果用戶觸發(fā)第7行的鏈接,使當前頁面的內(nèi)容發(fā)生了變化,瀏覽器客戶端可以使用Ajax (異步JavaScript和XML)從網(wǎng)絡(luò)服務(wù)器獲取更新的內(nèi)容數(shù)據(jù)并呈現(xiàn)頁面2 (頁面I和頁面2面向瀏覽器客戶端為同一地址,因此瀏覽器端可以使用Hash值區(qū)分顯示有不同