移动端监听安卓手机返回键

DesGemini 发布于2019-08-22 16:35 / 3509人阅读

摘要：场景相信大家用安卓手机使用的过程中，会遇到这样的一个场景按下手机的返回键时，会弹出一个询问框是否退出该页面然后点击了确认键才真正退出。主要需求安卓手机用户按下返回键不后退网页。

【场景】

相信大家用安卓手机使用APP的过程中，会遇到这样的一个场景：按下手机的返回键时，会弹出一个询问框："是否退出该页面/APP?",然后点击了确认键才真正退出APP。PC端目前可以通过页面的转场实现。那这样的效果在H5/微信浏览器/移动端浏览器，能否实现呢？

ps:现在好像很少看到弹出框了，而是弹出一个toast,然后需要在有效时间内再次点击才算退出。这个功能其实应该也可以实现。

【主要需求】

1.安卓手机用户按下返回键不后退网页。弹出询问框

2.当用户点击“确定”按钮，才算后退

【思路】

以上的需求，按我的理解就是一句话：“监听安卓手机返回键”，通过百度/google，虽然发现此功能仍没有很好的解决方案，但是看到了两个与此相关的线索: history pushSate/replaceSate 和 onpopstate 。大家也可以看看张鑫旭大神的文章：传送门。

这两个API的作用简单来说就是前者可以在浏览器地址栏上添加/替换一条记录，当浏览器发生后退动作时，触发后者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，并触发该事件
                if(confirm("确定要退出吗")){
                    history.back()   //执行真正的退出
                }else{
                  history.pushState(null,null,"#1") //用户取消，恢复   b.html -> b.html#1
                }
           };
        }    
        )();

【改进】

一切看上去很美好，看似把功能实现了，但是，细心的用户就会发现，当按下返回键，弹出询问框时，我们既不按确认，也不按取消，直接再次按下返回键，页面仍然跳转。因此我们需要改进代码。

    (function(){
            if(window.location.hash==""){
                history.pushState(null,null,"#1")//一访问页面即添加一条记录b.html -> b.html#1
            }
            
            window.onpopstate = function(event) {//当用户按下返回键，b.html#1 -> b.html，并触发该事件
                history.pushState(null,null,"#1")
                if(confirm("确定要退出吗")){
                    history.go(-2)   //执行真正的退出
                }else{
                                 //用户取消，恢复   b.html -> b.html#1
                }
           };
        }    
        )();

如上，我们每次的后退，都假定用户都按了取消键，这样问题就解决了。

测试后没问题。但这仍然不是完美的方案，例如在微信浏览器，confirm的次数一旦超过三次，就要强制退出，无法取消，或者通常我们开发时都用到第三方的UI库的弹框而不用原生的弹框.....所以下面给出了用mui的框架实现以上功能。

  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的兼容性极其低，因此不建议大家广泛使用，学习交流还是可以的哈哈，针对监听返回键，大家有更好的解决方案，也可以分享一下。

专线服务私有云手机端安卓开发手机移动端html 安卓手机服务器端安卓手机做云服务器端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94482.html

使用h5新特性，轻松监听任何App自带返回键

摘要：前言如今新特性新标签新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。接下来我将和各位分享一个特别好用的新特性目前也不是特别新，轻松监听任何自带的返回键，包括安卓机里的物理返回键，从而实现项目开发中进一步的需求。 1、前言如今h5新特性、新标签、新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。作为前端程序员，我觉得我们还是有必要积...

paney129 2019-08-22 15:22 评论0 收藏0
使用h5新特性，轻松监听任何App自带返回键

摘要：前言如今新特性新标签新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。接下来我将和各位分享一个特别好用的新特性目前也不是特别新，轻松监听任何自带的返回键，包括安卓机里的物理返回键，从而实现项目开发中进一步的需求。 1、前言如今h5新特性、新标签、新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。作为前端程序员，我觉得我们还是有必要积...

MoAir 2019-08-01 18:41 评论0 收藏0
使用h5新特性，轻松监听任何App自带返回键

摘要：前言如今新特性新标签新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。接下来我将和各位分享一个特别好用的新特性目前也不是特别新，轻松监听任何自带的返回键，包括安卓机里的物理返回键，从而实现项目开发中进一步的需求。 1、前言如今h5新特性、新标签、新规范等有很多，而且正在不断完善中，各大浏览器商对它们的支持，也是相当给力。作为前端程序员，我觉得我们还是有必要积...

fizz 2019-08-05 18:03 评论0 收藏0
虚拟键盘，移动web开发的痛

摘要：原生的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。进入正题，怎么才能解决这些问题呢我们可以先从虚拟键盘入手，看看是否可以监听到呼出键盘收回键盘这两个事件。部分浏览器可以通过捕捉事件知道是否呼出收起虚拟键盘。原生APP的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。如下图： showImg(https://segmentfault.com/img/remote...

kbyyd24 2019-08-30 12:49 评论0 收藏0
虚拟键盘，移动web开发的痛

摘要：原生的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。进入正题，怎么才能解决这些问题呢我们可以先从虚拟键盘入手，看看是否可以监听到呼出键盘收回键盘这两个事件。部分浏览器可以通过捕捉事件知道是否呼出收起虚拟键盘。原生APP的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。如下图： showImg(https://segmentfault.com/img/remote...

gotham 2019-08-21 13:32 评论0 收藏0