@gzmpken/androidback

H5监听安卓返回键

Usage no npm install needed!

<script type="module">
  import gzmpkenAndroidback from 'https://cdn.skypack.dev/@gzmpken/androidback';
</script>

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');
})