本發明涉及計算機軟件開發,特別是涉及一種移動web應用的原生返回適配方法、系統及設備。
背景技術:
1、在移動端html5頁面中,經常會涉及彈出層或者彈出頁面的場景。比如,當用戶點擊頁面中的一個附件條目時,彈出一個附件預覽頁面,用于放大查看圖片或者顯示word、excel等文檔內容。再比如,當用戶點擊表單中的日期字段時,從屏幕下方滑入一個日期編輯器彈出層,用于對表單字段的日期值進行編輯。基于使用習慣,用戶往往更傾向于直接通過手勢返回來嘗試關閉這些彈出層,而不是點擊彈出層上的關閉按鈕。
2、通過觸屏手機系統級別的手勢返回,用戶可以觸發移動端瀏覽器的原生返回,所以,為了更好地使用體驗,移動端html5頁面需要支持用戶通過觸發原生返回來關閉當前頁面中的彈出層或者彈出頁面,否則,一旦用戶嘗試通過手勢返回關閉彈出層,將直接導致頁面返回到上一條歷史記錄,使得用戶在當前表單中的編輯全部丟失。
3、在另一種場景中,也需要對用戶的原生返回操作進行處理:在一個編輯頁面中,正常的操作流程是用戶填寫表單中的各個字段,填寫完畢后點擊頁面下方的“保存”按鈕,在保存成功后,用戶返回到上一級頁面。但是,用戶可能忘記保存而直接返回到上一級頁面,此時頁面最好能夠攔截用戶的返回操作,停留在當前頁面并提示用戶有未保存的修改,詢問用戶是否放棄在當前頁面中的修改。如果用戶是通過點擊頁面所提供的返回按鈕來觸發返回,則頁面可以輕易實現上述功能,而如果用戶觸發原生返回,則頁面很難攔截返回操作。
4、目前,移動端html5頁面可以通過以下流程實現對原生返回的攔截操作:
5、(1)每當打開一個新頁面時,通過history.pushstate方法壓入一條冗余的歷史記錄。
6、(2)當用戶觸發原生返回操作時,由于頁面已經提前壓入了一條冗余的歷史記錄,頁面不會直接返回到上一級頁面,而是停留在當前并觸發popstate事件;
7、popstate事件是在瀏覽器歷史記錄條目發生變化時被觸發的。具體來說,當用戶點擊瀏覽器的“后退”和“前進”按鈕時,或者使用javascript(javascript是一種即時編譯型的編程語言)調用history.pushstate等方法時,都會觸發popstate事件。
8、(3)頁面監聽popstate事件,在每次觸發的popstate事件的回調方法中,判斷是否需要返回到上一級頁面;如果需要返回到上一個頁面,則執行history.back方法,如果不需要返回到上一個頁面,則再次通過執行history.pushstate方法壓入冗余的歷史記錄,實現對原生返回的攔截,可以執行其它的業務代碼,比如關閉頁面中打開的彈出層或者提示用戶有未保存的修改。
9、但是,由于惡意網頁可以利用上述方法反復攔截用戶的返回操作,使得用戶始終無法回退到更早的頁面。為了解決該問題,瀏覽器推出一系列安全策略,比如:在打開一個新頁面后,瀏覽器會忽略用戶與頁面進行第一次交互之前的所有歷史記錄操作。新版的主流瀏覽器基本都實現了類似的安全策略,而一旦html5頁面依舊使用這種方法攔截用戶的后退操作,非但不能成功攔截,而且還會導致單頁面應用本身的路由產生其它的非預期問題。
10、由于上述原因,現有的移動端html5頁面往往不支持通過原生返回關閉頁面中的彈出層,也不支持其它對原生返回的處理。
技術實現思路
1、為了解決上述問題,本發明提出了一種移動web應用的原生返回適配方法、系統及設備,在不違反瀏覽器安全策略的情況下,解決現有頁面無法處理用戶原生返回的問題,提高用戶的使用體驗。
2、為了實現上述目的,本發明采用如下技術方案:
3、第一方面,本發明提供一種移動web應用的原生返回適配方法,包括:
4、當監聽到彈出層打開事件時,將彈出層打開事件的彈出層id和對應的彈出層關閉方法封裝為條目存入原生返回棧中,且向歷史記錄棧中存入彈出層冗余歷史記錄;其中,若同時監聽到一次交互對應的至少兩個彈出層時,任意兩次彈出層冗余歷史記錄存入的時間間隔大于設定值;
5、當監聽到后退操作時,調用原生返回棧中的棧頂條目,對棧頂條目中的彈出層id執行對應的彈出層關閉方法,并從原生返回棧中移除當前棧頂條目;
6、當監聽到彈出層關閉事件時,從原生返回棧中移除與彈出層關閉事件的彈出層id對應的條目,并后退到上一條彈出層冗余歷史記錄。
7、作為可選擇的實施方式,在歷史記錄棧中存入彈出層冗余歷史記錄時,添加狀態參數,用于區分冗余歷史記錄的類型。
8、作為可選擇的實施方式,當監聽到彈出層關閉事件時,根據狀態參數,判斷當前冗余歷史記錄是否為彈出層類型的冗余歷史記錄;如果是,則后退到上一條彈出層冗余歷史記錄。
9、作為可選擇的實施方式,監聽到后退操作的過程為:監聽popstate事件,判斷popstate事件是否由后退操作觸發;具體為:
10、在頁面初始化時,調用history.replacestate方法替換history.state對象,在history.state對象中維護position字段,用于記錄當前冗余歷史記錄的位置;
11、當調用history.pushstate方法在歷史記錄棧中存入彈出層冗余歷史記錄時,添加狀態參數,狀態參數中包括position字段,position字段的值等于頁面當前的position字段的值加一;
12、監聽popstate事件時,獲取當前頁面的position字段的值,并作為新值,用新值減去舊值;當得到的popstate差值小于0時,說明popstate事件是由后退操作被觸發的。
13、作為可選擇的實施方式,所述移動web應用的原生返回適配方法還包括:若客戶端app中通過javascript?sdk提供原生返回攔截接口,則在原生返回適配過程中首先判斷當前執行環境是否提供原生返回攔截接口,如果提供原生返回攔截接口,則通過原生返回攔截接口注冊原生返回時的回調方法。
14、作為可選擇的實施方式,回調方法包括:
15、判斷原生返回棧是否為空,如果非空,則調用原生返回棧中的棧頂條目,對棧頂條目中的彈出層id執行對應的彈出層關閉方法,從原生返回棧中移除當前棧頂條目,并拒絕本次后退操作;
16、如果原生返回棧為空,則判斷當前頁面中是否存在未保存的修改;如果存在,則拒絕本次后退操作,并彈出提示框詢問用戶是否放棄修改;如果用戶選擇放棄修改,則執行后退操作;如果用戶選擇取消,則停留在當前頁面;如果不存在未保存的修改,則允許本次后退操作。
17、作為可選擇的實施方式,客戶端app支持原生返回攔截接口時,當監聽到彈出層打開事件時,只將彈出層打開事件存入原生返回棧,不添加彈出層冗余歷史記錄;
18、同時,當監聽到彈出層關閉事件時,只將被關閉彈出層對應的條目從原生返回棧中移除,不執行瀏覽器后退操作。
19、作為可選擇的實施方式,客戶端app支持原生返回攔截接口時,通過原生返回關閉彈出層的流程包括:
20、web應用初始化檢測運行環境,客戶端app返回是否支持原生返回攔截接口,web應用注冊原生返回攔截接口的回調方法;
21、當監聽到彈出層打開事件時,將彈出層打開事件的彈出層id和對應的彈出層關閉方法封裝為條目存入原生返回棧中;
22、當觸發原生返回后,執行回調方法。
23、第二方面,本發明提供一種移動web應用的原生返回適配系統,包括:
24、存儲模塊,被配置為當監聽到彈出層打開事件時,將彈出層打開事件的彈出層id和對應的彈出層關閉方法封裝為條目存入原生返回棧中,且向歷史記錄棧中存入彈出層冗余歷史記錄;其中,若同時監聽到一次交互對應的至少兩個彈出層時,任意兩次彈出層冗余歷史記錄存入的時間間隔大于設定值;
25、后退執行模塊,被配置為當監聽到后退操作時,調用原生返回棧中的棧頂條目,對棧頂條目中的彈出層id執行對應的彈出層關閉方法,并從原生返回棧中移除當前棧頂條目;
26、關閉執行模塊,被配置為當監聽到彈出層關閉事件時,從原生返回棧中移除與彈出層關閉事件的彈出層id對應的條目,并后退到上一條彈出層冗余歷史記錄。
27、第三方面,本發明提供一種電子設備,包括存儲器和處理器以及存儲在存儲器上并在處理器上運行的計算機指令,所述計算機指令被處理器運行時,完成第一方面所述的方法。
28、與現有技術相比,本發明的有益效果為:
29、本發明提出一種移動web應用的原生返回適配方法,支持用戶通過原生返回關閉頁面中的彈出層。當用戶打開彈出層時,向歷史記錄棧壓入一條冗余歷史記錄,該歷史記錄對應被打開的彈出層,同時向原生返回棧中壓入彈出層關閉方法。監聽瀏覽器后退操作,檢查原生返回棧是否為空,如果非空,則彈出一個條目,執行條目中的彈出層關閉方法,關掉對應的彈出層。如果用戶通過點擊彈出層上的關閉按鈕或其它的非原生返回方式關閉彈出層,則需要將彈出層對應的關閉方法從原生返回棧中移除,并通過執行history.back方法消除彈出層的冗余歷史記錄對路由的影響。在不違反瀏覽器安全策略的情況下,解決現有移動html5頁面無法處理用戶原生返回的問題,提高用戶的使用體驗。
30、本發明附加方面的優點將在下面的描述中部分給出,部分將從下面的描述中變得明顯,或通過本發明的實踐了解到。