本發(fā)明涉及計(jì)算機(jī)軟件開(kāi)發(fā)，特別是涉及一種移動(dòng)web應(yīng)用的原生返回適配方法、系統(tǒng)及設(shè)備。

背景技術(shù)：

1、在移動(dòng)端html5頁(yè)面中，經(jīng)常會(huì)涉及彈出層或者彈出頁(yè)面的場(chǎng)景。比如，當(dāng)用戶點(diǎn)擊頁(yè)面中的一個(gè)附件條目時(shí)，彈出一個(gè)附件預(yù)覽頁(yè)面，用于放大查看圖片或者顯示word、excel等文檔內(nèi)容。再比如，當(dāng)用戶點(diǎn)擊表單中的日期字段時(shí)，從屏幕下方滑入一個(gè)日期編輯器彈出層，用于對(duì)表單字段的日期值進(jìn)行編輯?；谑褂昧?xí)慣，用戶往往更傾向于直接通過(guò)手勢(shì)返回來(lái)嘗試關(guān)閉這些彈出層，而不是點(diǎn)擊彈出層上的關(guān)閉按鈕。

2、通過(guò)觸屏手機(jī)系統(tǒng)級(jí)別的手勢(shì)返回，用戶可以觸發(fā)移動(dòng)端瀏覽器的原生返回，所以，為了更好地使用體驗(yàn)，移動(dòng)端html5頁(yè)面需要支持用戶通過(guò)觸發(fā)原生返回來(lái)關(guān)閉當(dāng)前頁(yè)面中的彈出層或者彈出頁(yè)面，否則，一旦用戶嘗試通過(guò)手勢(shì)返回關(guān)閉彈出層，將直接導(dǎo)致頁(yè)面返回到上一條歷史記錄，使得用戶在當(dāng)前表單中的編輯全部丟失。

3、在另一種場(chǎng)景中，也需要對(duì)用戶的原生返回操作進(jìn)行處理：在一個(gè)編輯頁(yè)面中，正常的操作流程是用戶填寫表單中的各個(gè)字段，填寫完畢后點(diǎn)擊頁(yè)面下方的“保存”按鈕，在保存成功后，用戶返回到上一級(jí)頁(yè)面。但是，用戶可能忘記保存而直接返回到上一級(jí)頁(yè)面，此時(shí)頁(yè)面最好能夠攔截用戶的返回操作，停留在當(dāng)前頁(yè)面并提示用戶有未保存的修改，詢問(wèn)用戶是否放棄在當(dāng)前頁(yè)面中的修改。如果用戶是通過(guò)點(diǎn)擊頁(yè)面所提供的返回按鈕來(lái)觸發(fā)返回，則頁(yè)面可以輕易實(shí)現(xiàn)上述功能，而如果用戶觸發(fā)原生返回，則頁(yè)面很難攔截返回操作。

4、目前，移動(dòng)端html5頁(yè)面可以通過(guò)以下流程實(shí)現(xiàn)對(duì)原生返回的攔截操作：

5、（1）每當(dāng)打開(kāi)一個(gè)新頁(yè)面時(shí)，通過(guò)history.pushstate方法壓入一條冗余的歷史記錄。

6、（2）當(dāng)用戶觸發(fā)原生返回操作時(shí)，由于頁(yè)面已經(jīng)提前壓入了一條冗余的歷史記錄，頁(yè)面不會(huì)直接返回到上一級(jí)頁(yè)面，而是停留在當(dāng)前并觸發(fā)popstate事件；

7、popstate事件是在瀏覽器歷史記錄條目發(fā)生變化時(shí)被觸發(fā)的。具體來(lái)說(shuō)，當(dāng)用戶點(diǎn)擊瀏覽器的“后退”和“前進(jìn)”按鈕時(shí)，或者使用javascript（javascript是一種即時(shí)編譯型的編程語(yǔ)言）調(diào)用history.pushstate等方法時(shí)，都會(huì)觸發(fā)popstate事件。

8、（3）頁(yè)面監(jiān)聽(tīng)popstate事件，在每次觸發(fā)的popstate事件的回調(diào)方法中，判斷是否需要返回到上一級(jí)頁(yè)面；如果需要返回到上一個(gè)頁(yè)面，則執(zhí)行history.back方法，如果不需要返回到上一個(gè)頁(yè)面，則再次通過(guò)執(zhí)行history.pushstate方法壓入冗余的歷史記錄，實(shí)現(xiàn)對(duì)原生返回的攔截，可以執(zhí)行其它的業(yè)務(wù)代碼，比如關(guān)閉頁(yè)面中打開(kāi)的彈出層或者提示用戶有未保存的修改。

9、但是，由于惡意網(wǎng)頁(yè)可以利用上述方法反復(fù)攔截用戶的返回操作，使得用戶始終無(wú)法回退到更早的頁(yè)面。為了解決該問(wèn)題，瀏覽器推出一系列安全策略，比如：在打開(kāi)一個(gè)新頁(yè)面后，瀏覽器會(huì)忽略用戶與頁(yè)面進(jìn)行第一次交互之前的所有歷史記錄操作。新版的主流瀏覽器基本都實(shí)現(xiàn)了類似的安全策略，而一旦html5頁(yè)面依舊使用這種方法攔截用戶的后退操作，非但不能成功攔截，而且還會(huì)導(dǎo)致單頁(yè)面應(yīng)用本身的路由產(chǎn)生其它的非預(yù)期問(wèn)題。

10、由于上述原因，現(xiàn)有的移動(dòng)端html5頁(yè)面往往不支持通過(guò)原生返回關(guān)閉頁(yè)面中的彈出層，也不支持其它對(duì)原生返回的處理。

技術(shù)實(shí)現(xiàn)思路

1、為了解決上述問(wèn)題，本發(fā)明提出了一種移動(dòng)web應(yīng)用的原生返回適配方法、系統(tǒng)及設(shè)備，在不違反瀏覽器安全策略的情況下，解決現(xiàn)有頁(yè)面無(wú)法處理用戶原生返回的問(wèn)題，提高用戶的使用體驗(yàn)。

2、為了實(shí)現(xiàn)上述目的，本發(fā)明采用如下技術(shù)方案：

3、第一方面，本發(fā)明提供一種移動(dòng)web應(yīng)用的原生返回適配方法，包括：

4、當(dāng)監(jiān)聽(tīng)到彈出層打開(kāi)事件時(shí)，將彈出層打開(kāi)事件的彈出層id和對(duì)應(yīng)的彈出層關(guān)閉方法封裝為條目存入原生返回棧中，且向歷史記錄棧中存入彈出層冗余歷史記錄；其中，若同時(shí)監(jiān)聽(tīng)到一次交互對(duì)應(yīng)的至少兩個(gè)彈出層時(shí)，任意兩次彈出層冗余歷史記錄存入的時(shí)間間隔大于設(shè)定值；

5、當(dāng)監(jiān)聽(tīng)到后退操作時(shí)，調(diào)用原生返回棧中的棧頂條目，對(duì)棧頂條目中的彈出層id執(zhí)行對(duì)應(yīng)的彈出層關(guān)閉方法，并從原生返回棧中移除當(dāng)前棧頂條目；

6、當(dāng)監(jiān)聽(tīng)到彈出層關(guān)閉事件時(shí)，從原生返回棧中移除與彈出層關(guān)閉事件的彈出層id對(duì)應(yīng)的條目，并后退到上一條彈出層冗余歷史記錄。

7、作為可選擇的實(shí)施方式，在歷史記錄棧中存入彈出層冗余歷史記錄時(shí)，添加狀態(tài)參數(shù)，用于區(qū)分冗余歷史記錄的類型。

8、作為可選擇的實(shí)施方式，當(dāng)監(jiān)聽(tīng)到彈出層關(guān)閉事件時(shí)，根據(jù)狀態(tài)參數(shù)，判斷當(dāng)前冗余歷史記錄是否為彈出層類型的冗余歷史記錄；如果是，則后退到上一條彈出層冗余歷史記錄。

9、作為可選擇的實(shí)施方式，監(jiān)聽(tīng)到后退操作的過(guò)程為：監(jiān)聽(tīng)popstate事件，判斷popstate事件是否由后退操作觸發(fā)；具體為：

10、在頁(yè)面初始化時(shí)，調(diào)用history.replacestate方法替換history.state對(duì)象，在history.state對(duì)象中維護(hù)position字段，用于記錄當(dāng)前冗余歷史記錄的位置；

11、當(dāng)調(diào)用history.pushstate方法在歷史記錄棧中存入彈出層冗余歷史記錄時(shí)，添加狀態(tài)參數(shù)，狀態(tài)參數(shù)中包括position字段，position字段的值等于頁(yè)面當(dāng)前的position字段的值加一；

12、監(jiān)聽(tīng)popstate事件時(shí)，獲取當(dāng)前頁(yè)面的position字段的值，并作為新值，用新值減去舊值；當(dāng)?shù)玫降膒opstate差值小于0時(shí)，說(shuō)明popstate事件是由后退操作被觸發(fā)的。

13、作為可選擇的實(shí)施方式，所述移動(dòng)web應(yīng)用的原生返回適配方法還包括：若客戶端app中通過(guò)javascript?sdk提供原生返回?cái)r截接口，則在原生返回適配過(guò)程中首先判斷當(dāng)前執(zhí)行環(huán)境是否提供原生返回?cái)r截接口，如果提供原生返回?cái)r截接口，則通過(guò)原生返回?cái)r截接口注冊(cè)原生返回時(shí)的回調(diào)方法。

14、作為可選擇的實(shí)施方式，回調(diào)方法包括：

15、判斷原生返回棧是否為空，如果非空，則調(diào)用原生返回棧中的棧頂條目，對(duì)棧頂條目中的彈出層id執(zhí)行對(duì)應(yīng)的彈出層關(guān)閉方法，從原生返回棧中移除當(dāng)前棧頂條目，并拒絕本次后退操作；

16、如果原生返回棧為空，則判斷當(dāng)前頁(yè)面中是否存在未保存的修改；如果存在，則拒絕本次后退操作，并彈出提示框詢問(wèn)用戶是否放棄修改；如果用戶選擇放棄修改，則執(zhí)行后退操作；如果用戶選擇取消，則停留在當(dāng)前頁(yè)面；如果不存在未保存的修改，則允許本次后退操作。

17、作為可選擇的實(shí)施方式，客戶端app支持原生返回?cái)r截接口時(shí)，當(dāng)監(jiān)聽(tīng)到彈出層打開(kāi)事件時(shí)，只將彈出層打開(kāi)事件存入原生返回棧，不添加彈出層冗余歷史記錄；

18、同時(shí)，當(dāng)監(jiān)聽(tīng)到彈出層關(guān)閉事件時(shí)，只將被關(guān)閉彈出層對(duì)應(yīng)的條目從原生返回棧中移除，不執(zhí)行瀏覽器后退操作。

19、作為可選擇的實(shí)施方式，客戶端app支持原生返回?cái)r截接口時(shí)，通過(guò)原生返回關(guān)閉彈出層的流程包括：

20、web應(yīng)用初始化檢測(cè)運(yùn)行環(huán)境，客戶端app返回是否支持原生返回?cái)r截接口，web應(yīng)用注冊(cè)原生返回?cái)r截接口的回調(diào)方法；

21、當(dāng)監(jiān)聽(tīng)到彈出層打開(kāi)事件時(shí)，將彈出層打開(kāi)事件的彈出層id和對(duì)應(yīng)的彈出層關(guān)閉方法封裝為條目存入原生返回棧中；

22、當(dāng)觸發(fā)原生返回后，執(zhí)行回調(diào)方法。

23、第二方面，本發(fā)明提供一種移動(dòng)web應(yīng)用的原生返回適配系統(tǒng)，包括：

24、存儲(chǔ)模塊，被配置為當(dāng)監(jiān)聽(tīng)到彈出層打開(kāi)事件時(shí)，將彈出層打開(kāi)事件的彈出層id和對(duì)應(yīng)的彈出層關(guān)閉方法封裝為條目存入原生返回棧中，且向歷史記錄棧中存入彈出層冗余歷史記錄；其中，若同時(shí)監(jiān)聽(tīng)到一次交互對(duì)應(yīng)的至少兩個(gè)彈出層時(shí)，任意兩次彈出層冗余歷史記錄存入的時(shí)間間隔大于設(shè)定值；

25、后退執(zhí)行模塊，被配置為當(dāng)監(jiān)聽(tīng)到后退操作時(shí)，調(diào)用原生返回棧中的棧頂條目，對(duì)棧頂條目中的彈出層id執(zhí)行對(duì)應(yīng)的彈出層關(guān)閉方法，并從原生返回棧中移除當(dāng)前棧頂條目；

26、關(guān)閉執(zhí)行模塊，被配置為當(dāng)監(jiān)聽(tīng)到彈出層關(guān)閉事件時(shí)，從原生返回棧中移除與彈出層關(guān)閉事件的彈出層id對(duì)應(yīng)的條目，并后退到上一條彈出層冗余歷史記錄。

27、第三方面，本發(fā)明提供一種電子設(shè)備，包括存儲(chǔ)器和處理器以及存儲(chǔ)在存儲(chǔ)器上并在處理器上運(yùn)行的計(jì)算機(jī)指令，所述計(jì)算機(jī)指令被處理器運(yùn)行時(shí)，完成第一方面所述的方法。

28、與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果為：

29、本發(fā)明提出一種移動(dòng)web應(yīng)用的原生返回適配方法，支持用戶通過(guò)原生返回關(guān)閉頁(yè)面中的彈出層。當(dāng)用戶打開(kāi)彈出層時(shí)，向歷史記錄棧壓入一條冗余歷史記錄，該歷史記錄對(duì)應(yīng)被打開(kāi)的彈出層，同時(shí)向原生返回棧中壓入彈出層關(guān)閉方法。監(jiān)聽(tīng)瀏覽器后退操作，檢查原生返回棧是否為空，如果非空，則彈出一個(gè)條目，執(zhí)行條目中的彈出層關(guān)閉方法，關(guān)掉對(duì)應(yīng)的彈出層。如果用戶通過(guò)點(diǎn)擊彈出層上的關(guān)閉按鈕或其它的非原生返回方式關(guān)閉彈出層，則需要將彈出層對(duì)應(yīng)的關(guān)閉方法從原生返回棧中移除，并通過(guò)執(zhí)行history.back方法消除彈出層的冗余歷史記錄對(duì)路由的影響。在不違反瀏覽器安全策略的情況下，解決現(xiàn)有移動(dòng)html5頁(yè)面無(wú)法處理用戶原生返回的問(wèn)題，提高用戶的使用體驗(yàn)。

30、本發(fā)明附加方面的優(yōu)點(diǎn)將在下面的描述中部分給出，部分將從下面的描述中變得明顯，或通過(guò)本發(fā)明的實(shí)踐了解到。