[前端]在 M7 框架中的利用 window.onpopstate 监听浏览器返回/前进记录

问题现象

在某个业务需求中，我们在容器或者浏览器中进行了前进/后退操作，比如我需要图片预览，点击图片预览后，点击返回按钮却返回到了上级页面而不是关闭图片预览

问题原因

因为图片预览并不是打开一个新的浏览器记录，这是在当前页面进行显示隐藏 element

解决方案

利用onpopstate方法监听，我们可以更好的处理浏览器记录监听事件

1. 定义监听按钮返回（ejs 容器）

ejs.navigator.hookBackBtn({
    success: function (result) {
        window.history.go(-1);
    },
    error: function (error) {}
});

2. 初始页面添加 pop 操作，添加浏览器历史记录并且添加 hash 值，当做首页 hash 值

var state = {
    title: 'title',
    url: '#home'
};
window.history.pushState(state, 'title', '#home');

3.当点击预览图片时候，添加图片 hash 值，新增一条浏览记录

var state = {
    title: 'preview',
    url: '#preivew'
};
window.history.pushState(state, 'preview', '#preivew');

4.点击按钮返回上一个浏览器记录，触发onpopstate函数

window.onpopstate = function (event) {
    // 如果不存在，则是关闭当前页面
    if (!event.state) {
        ejs.ui.confirm({
            title: '温馨提示',
            message: '是否确认退出事件上报页面?',
            buttonLabels: ['取消', '确定'],
            cancelable: 1,
            h5UI: false, // 是否强制使用H5-UI效果，默认false
            success: function (result) {
                let rowguid = '';
                if (result.which == 1) {
                    ejs.page.close(
                        JSON.stringify({
                            rowguid: rowguid
                        })
                    );
                } else {
                }
                var state = {
                    title: 'title',
                    url: '#home'
                };
                // 添加当前预览，以防止没有真的关闭页面
                window.history.pushState(state, 'title', '#home');
            }
        });
    } else if (event.state.url && event.state.url === '#home') {
        // 如果已经跳转到了home，说明需要关闭当前预览
        preview.close(true);
    }
};