0


小程序内嵌H5页面监听小程序的返回事件

因为业务上有需求,在开发小程序的时候有些页面要使用web-view组件嵌套H5页面

有个页面内有个表单,在表单内容还为填写完成的时候,监听用户点击左上角返回事件,弹出一个提示框,因为H5页面在小程序中的层级很高,所以弹出提示框只能在H5页面内完成,因此要在H5页面内检测小程序的返回事件,其实也就是监听url地址的改变事件

所以在H5页面刚载入的时候,要往window的history对象中加入一条历史记录,可用以下函数完成

const pushHistory = (str = 'title', url = '#') => {
    let state = {
      title: str,
      url: url,
    };
    window.history.pushState(state, state.title, state.url);
  };

这个函数可以往history对象中添加一条历史记录

所以在页面刚载入的时候调用这个函数以添加一条历史记录

pushHistory(document.title, location.href);

并且在页面刚载入的时候要给window添加一个popstate页面url改变事件

window.addEventListener('popstate', async function(e) {
    // 为了避免只调用一次,再次调用一次
    pushHistory(document.title, location.href);

    // 加入业务逻辑
    if(xxx) {
        // 调用微信的返回事件(前提要引入微信的SDK)
        wx.miniProgram.navigateBack();
    } else {
        // 取消返回,阻止默认返回行为
        history.pushState(null, null, location.href);
    }
})

这时候去小程序模拟器运行一下就完成了。


本文转载自: https://blog.csdn.net/szw2377132528/article/details/129353706
版权归原作者 孙大大啊 所有, 如有侵权,请联系我们删除。

“小程序内嵌H5页面监听小程序的返回事件”的评论:

还没有评论