README
H5 页面监听 Android 物理返回键
Fork from: https://github.com/HuJiaoHJ/h5_android_back
移动端 H5 页面是监听不了 Android 物理返回键的点击事件,一般 webview 的默认行为同 window.history.go(-1)
,但是在实际需求场景下,简单的页面回退并不能满足需求,所以需要 H5 页面监听 Android 物理返回键从而自定义处理方法。
原理分析:https://github.com/HuJiaoHJ/blog/issues/16
使用
两种方式:
1、将对象挂在 window 上,支持任意页面接入,使用如下:
index.js
// 监听Android物理返回键,自定义处理方法
window.AndroidBack.listen(() => {
console.log('back');
});
// 新增Android物理返回键监听事件,使用场景,比如:页面内弹出浮层,点击Android物理返回键,不是回退页面,而是关闭浮层
window.AndroidBack.push('close_modal', () => {
// 关闭弹窗
console.log('close_modal');
});
2、封装了 React 高阶组件,支持 React 项目接入,使用如下:
index_react.js
import * as React from 'react';
import AndroidBack from 'h5_android_back/index_react.js';
class App extends React.Component {
// ...
openModal = () => {
// 新增Android物理返回键监听事件,使用场景,比如:页面内弹出浮层,点击Android物理返回键,不是回退页面,而是关闭浮层
this.props._android_back_push('close_modal', () => {
// 关闭弹窗
console.log('close_modal');
});
}
}
// 监听Android物理返回键,自定义处理方法
export default AndroidBack(App, () => {
console.log('back');
})