移動端監(jiān)聽安卓手機返回鍵

DesGemini 發(fā)布于2019-08-22 16:35 / 3680人閱讀

摘要：場景相信大家用安卓手機使用的過程中，會遇到這樣的一個場景按下手機的返回鍵時，會彈出一個詢問框是否退出該頁面然后點擊了確認鍵才真正退出。主要需求安卓手機用戶按下返回鍵不后退網(wǎng)頁。

【場景】

相信大家用安卓手機使用APP的過程中，會遇到這樣的一個場景：按下手機的返回鍵時，會彈出一個詢問框："是否退出該頁面/APP?",然后點擊了確認鍵才真正退出APP。PC端目前可以通過頁面的轉(zhuǎn)場實現(xiàn)。那這樣的效果在H5/微信瀏覽器/移動端瀏覽器，能否實現(xiàn)呢？

ps:現(xiàn)在好像很少看到彈出框了，而是彈出一個toast,然后需要在有效時間內(nèi)再次點擊才算退出。這個功能其實應該也可以實現(xiàn)。

【主要需求】

1.安卓手機用戶按下返回鍵不后退網(wǎng)頁。彈出詢問框

2.當用戶點擊“確定”按鈕，才算后退

【思路】

以上的需求，按我的理解就是一句話：“監(jiān)聽安卓手機返回鍵”，通過百度/google，雖然發(fā)現(xiàn)此功能仍沒有很好的解決方案，但是看到了兩個與此相關的線索: history pushSate/replaceSate 和 onpopstate 。大家也可以看看張鑫旭大神的文章：傳送門。

這兩個API的作用簡單來說就是前者可以在瀏覽器地址欄上添加/替換一條記錄，當瀏覽器發(fā)生后退動作時，觸發(fā)后者api.

(function(){
                if(window.location.hash==""){
                history.pushState(null,null,"#1")//一訪問頁面即添加一條記錄b.html -> b.html#1
            }
            window.onpopstate = function(event) {//當用戶按下返回鍵，b.html#1 -> b.html，并觸發(fā)該事件
                if(confirm("確定要退出嗎")){
                    history.back()   //執(zhí)行真正的退出
                }else{
                  history.pushState(null,null,"#1") //用戶取消，恢復   b.html -> b.html#1
                }
           };
        }    
        )();

【改進】

一切看上去很美好，看似把功能實現(xiàn)了，但是，細心的用戶就會發(fā)現(xiàn)，當按下返回鍵，彈出詢問框時，我們既不按確認，也不按取消，直接再次按下返回鍵，頁面仍然跳轉(zhuǎn)。因此我們需要改進代碼。

    (function(){
            if(window.location.hash==""){
                history.pushState(null,null,"#1")//一訪問頁面即添加一條記錄b.html -> b.html#1
            }
            
            window.onpopstate = function(event) {//當用戶按下返回鍵，b.html#1 -> b.html，并觸發(fā)該事件
                history.pushState(null,null,"#1")
                if(confirm("確定要退出嗎")){
                    history.go(-2)   //執(zhí)行真正的退出
                }else{
                                 //用戶取消，恢復   b.html -> b.html#1
                }
           };
        }    
        )();

如上，我們每次的后退，都假定用戶都按了取消鍵，這樣問題就解決了。

測試后沒問題。但這仍然不是完美的方案，例如在微信瀏覽器，confirm的次數(shù)一旦超過三次，就要強制退出，無法取消，或者通常我們開發(fā)時都用到第三方的UI庫的彈框而不用原生的彈框.....所以下面給出了用mui的框架實現(xiàn)以上功能。

  if (window.location.hash == "") {
        history.pushState("change", "", "#pageone");
        state = "change"
    } 

    window.onpopstate = function (e) {
      

            if (state == "confirm") {
                history.pushState("change", "", "#pageone");
                state = "change";
                mui.closePopup();
                return;
            }
            history.pushState("confirm", "", "#pageone");
            state = "confirm";
            mui.confirm("是否退出編輯？", "", ["否", "是"], function (e) {
                if (e.index == 0) {
                    history.replaceState("change", "", "#pageone");
                    state = "change";
                 
                }
                else {
                    history.go(-2)
                }

            }, "div");
       
         }

【總結】

由于此api的兼容性極其低，因此不建議大家廣泛使用，學習交流還是可以的哈哈，針對監(jiān)聽返回鍵，大家有更好的解決方案，也可以分享一下。

GPU云服務器云服務器手機端安卓開發(fā) 手機移動端html 安卓手機服務器端安卓手機做云服務器端

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94482.html

使用h5新特性，輕松監(jiān)聽任何App自帶返回鍵

摘要：前言如今新特性新標簽新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新，輕松監(jiān)聽任何自帶的返回鍵，包括安卓機里的物理返回鍵，從而實現(xiàn)項目開發(fā)中進一步的需求。 1、前言如今h5新特性、新標簽、新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。作為前端程序員，我覺得我們還是有必要積...

paney129 2019-08-22 15:22 評論0 收藏0
使用h5新特性，輕松監(jiān)聽任何App自帶返回鍵

摘要：前言如今新特性新標簽新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新，輕松監(jiān)聽任何自帶的返回鍵，包括安卓機里的物理返回鍵，從而實現(xiàn)項目開發(fā)中進一步的需求。 1、前言如今h5新特性、新標簽、新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。作為前端程序員，我覺得我們還是有必要積...

MoAir 2019-08-01 18:41 評論0 收藏0
虛擬鍵盤，移動web開發(fā)的痛

摘要：原生的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。進入正題，怎么才能解決這些問題呢我們可以先從虛擬鍵盤入手，看看是否可以監(jiān)聽到呼出鍵盤收回鍵盤這兩個事件。部分瀏覽器可以通過捕捉事件知道是否呼出收起虛擬鍵盤。原生APP的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。如下圖： showImg(https://segmentfault.com/img/remote...

kbyyd24 2019-08-30 12:49 評論0 收藏0
虛擬鍵盤，移動web開發(fā)的痛

摘要：原生的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。進入正題，怎么才能解決這些問題呢我們可以先從虛擬鍵盤入手，看看是否可以監(jiān)聽到呼出鍵盤收回鍵盤這兩個事件。部分瀏覽器可以通過捕捉事件知道是否呼出收起虛擬鍵盤。原生APP的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。如下圖： showImg(https://segmentfault.com/img/remote...

gotham 2019-08-21 13:32 評論0 收藏0