混合开发中，H5页面如何监听Android手机返回键

1. 前言

混合开发中，如果当前操作的页面是H5写的。那么这个时候点击Android手机返回键，默认是返回到上一个页面，跟浏览器的回退功能是一样的，都是返回到历史记录中的前一个记录。看着好像没啥问题，但是当H5页面当前有一个弹窗，按照正常的交互，这会儿点击手机返回键，应该是关闭弹窗的，但是实际上却不是这样子，不仅仅关闭了弹窗，而且返回到了上一个页面。那我们该如何处理这种情况呢？

2. 解决方案

不是很复杂，就是让Android原生重写方法onKeyDown()，并且H5页面增加一个JS方法phoneBackButtonListener()。当点击了手机返回键，onKeyDown()就会被调用，同时也让Android原生主动调用H5页面的phoneBackButtonListener()。具体代码如下：

Android：

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {if (mWebView != null) {if (keyCode == KeyEvent.KEYCODE_BACK) {mWebView.evaluateJavascript("javascript:phoneBackButtonListener()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {// value的值为"true"时，H5页面屏蔽手机返回键// value的值为"false"或"null"时，H5页面不屏蔽手机返回键// phoneBackButtonListener()未定义或没有返回任何数据，则value的值为"null"if ("false".equals(value) || "null".equals(value)) {// 执行原生的处理逻辑}}});return true;}}return super.onKeyDown(keyCode, event);
}

H5：

/* 监听手机的返回键，如果H5页面要拦截，则返回true；如果不拦截，则返回false */
function phoneBackButtonListener() {// 执行H5的处理逻辑return true;
}

完整的demo可以查看 AndroidWebView。

如果想进一步交流和学习的同学，可以加一下QQ群哦！

混合开发中，H5页面如何监听Android手机返回键相关推荐

移动端监听安卓手机返回键
[场景] 相信大家用安卓手机使用APP的过程中,会遇到这样的一个场景:按下手机的返回键时,会弹出一个询问框:"是否退出该页面/APP?",然后点击了确认键才真正退出APP.PC端目 ...
移动端监听安卓手机返回键 1
[场景] 相信大家用安卓手机使用APP的过程中,会遇到这样的一个场景:按下手机的返回键时,会弹出一个询问框:"是否退出该页面/APP?",然后点击了确认键才真正退出APP.PC端目 ...
android 监听物理返回键,Android应用开发之react-native 监听Android物理返回键
本文将带你了解Android应用开发之react-native 监听Android物理返回键,希望本文对大家学Android有所帮助. 1. componentWillMount(){ ...
mui+vue监听安卓手机返回键
1.引入mui之后,在index.html中初始化mui,可以不设置keyEventBind,默认监听back,menu键 <script src=&qu ...
JS监听安卓手机返回键
window.addEventListener("popstate", function(e) {alert('你点了返回键')}, false); 亲测可用
js监听移动端返回键，从内页返回首页
js监听移动端返回键,从内页返回首页直接上代码. $(document).ready(function () {window.history.pushState("", &quo ...
Android 开发中的View事件监听机制
在开发过程中,我们常常根据实际的需要绘制自己的应用组件,那么定制自己的监听事件,及相应的处理方法是必要的.我们都知道Android中,事件的监听是基于回调机制的,比如常用的OnClick事件,你了解它 ...
如何监听安卓机返回键和苹果机微信的返回键事件
应用场景:开发众筹系统的时候,点击捐款按钮弹出金额选择及输入的部分,最新的需求是按微信(ios)返回键和安卓机的返回键,若点开了捐款的选择金额部分,不能返回到上一页,只能隐藏该模块. 延伸:图片插件, ...
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生（安卓）交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发原生APP开发优缺点: 可以访问手机 ...

混合开发中，H5页面如何监听Android手机返回键

1. 前言

2. 解决方案

混合开发中，H5页面如何监听Android手机返回键相关推荐

最新文章

热门文章