H5頁面監聽Android物理返回鍵

時間 2019-11-05

原文原文鏈接

Android物理返回鍵的點擊事件，通常webview的默認行爲是 window.history.go(-1) ，可是在實際需求場景下，簡單的頁面回退並不能知足需求，因此須要H5頁面監聽Android物理返回鍵從而自定義處理方法。react

本方案的代碼都在 h5_android_back 倉庫中android

原理

主要是運用 HTML5 History API 實現。因此，首先簡單介紹下 HTML5 History APIgit

HTML5 History API

history 屬性

history.length

history.state
複製代碼

history 方法

history.back()

history.forward()

history.go()
複製代碼

HTML5 新API

history.pushState(state, title, url); 添加一條歷史記錄，不刷新頁面

history.replaceState(state, title, url); 替換一條歷史記錄，不刷新頁面

事件

popState事件：歷史記錄發生變化時觸發，調用`history.pushState()`或`history.replaceState()`不會觸發此事件

window.addEventListener('popstate', handlePopstate);
複製代碼

hashchange事件：頁面`hash`值發生改變時觸發

window.addEventListener('hashchange', handleHashChange);
複製代碼

監聽Android物理返回鍵實現

// index.js
(function (pkg) {
    var STATE = '_android_back';
    // 維護處理方法的棧
    var _android_back_handles = [];
    // 觸發一次popstate方法，則調用最新處理方法
    var handlePopstate = function () {
        var handle = _android_back_handles.pop();
        handle && handle();
    };
    // 經過調用listen方法添加處理方法
    var listen = function (handle) {
        _android_back_handles.push(handle);
    };
    // 經過調用push方法，新增一條歷史記錄，並添加對應處理方法
    var push = function (state, handle) {
        if (handle) {
            history.pushState(state, null, location.href);
            handle && _android_back_handles.push(handle);
        }
    };
    const init = function () {
        // 經過調用 history.pushState() 方法添加一條歷史記錄
        history.pushState(STATE, null, location.href);
        // 監聽 popstate 事件，當點擊Android物理返回鍵時，會觸發該事件
        window.addEventListener('popstate', handlePopstate);
        this.listen = listen;
        this.push = push;
    };

    init.call(window[pkg] = window[pkg] || {});
})('AndroidBack');
複製代碼

此實現參考了 github.com/iazrael/xba… ，在此基礎上，根據須要修改和添加了一部分代碼github

此外，封裝了一個React高階組件，方便React項目使用，代碼以下：web

import * as React from 'react';

export default (Target, handleBack) => {
    return class AndroidBack extends React.Component {
        _handles = []
        back = () => {
            window.history.go(-1);
        }
        componentDidMount () {
            // 經過調用 history.pushState() 方法添加一條歷史記錄
            history.pushState('_android_back', null, location.href);
            // 監聽 popstate 事件，當點擊Android物理返回鍵時，會觸發該事件
            window.addEventListener('popstate', this.handlePopstate);
            if (handleBack) {
                // 添加自定義處理方法
                this._handles.push(handleBack);
            } else {
                // 若是沒有自定義處理方法，默認調用 window.history.go(-1);
                this._handles.push(this.back);
            }
        }
        componentWillUnmount () {
            window.removeEventListener('popstate', this.handlePopstate);
        }
        // 觸發一次popstate方法，則調用最新處理方法
        handlePopstate = () => {
            const handle = this._handles.pop();
            handle && handle();
        }
        // 經過調用push方法，新增一條歷史記錄，並添加對應處理方法
        push = (state, handle) => {
            if (handle) {
                history.pushState(state, null, location.href);
                this._handles.push(handle);
            }
        }
        render () {
            return (
                <Target {...this.props} _android_back_push={this.push}/> ); } }; }; 複製代碼

實現原理基本在註釋中註明，在這就不詳細敘述了，全部代碼在 h5_android_back 倉庫中瀏覽器

使用

兩種方式：ui

一、將對象掛在window上，支持任意頁面接入，使用以下：this

index.jsurl

// 監聽Android物理返回鍵，自定義處理方法
window.AndroidBack.listen(() => {
    console.log('back');
});
// 新增Android物理返回鍵監聽事件，使用場景，好比：頁面內彈出浮層，點擊Android物理返回鍵，不是回退頁面，而是關閉浮層
window.AndroidBack.push('close_modal', () => {
    // 關閉彈窗
    console.log('close_modal');
});
複製代碼

二、封裝了React高階組件，支持React項目接入，使用以下：spa

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');
})
複製代碼