小步伐内嵌H5页面监听小步伐的返回事故

由于业务上有需求，在开发小步伐的时间有些页面要使用web-view组件嵌套H5页面
有个页面内有个表单，在表单内容还为填写完成的时间，监听用户点击左上角返回事故，弹出一个提示框，由于H5页面在小步伐中的层级很高，以是弹出提示框只能在H5页面内完成，因此要在H5页面内检测小步伐的返回事故，着实也就是监听url地址的改变事故
以是在H5页面刚载入的时间，要往window的history对象中到场一条汗青记录，可用以下函数完成

1. const pushHistory = (str = 'title', url = '#') => {
2.     let state = {
3.       title: str,
4.       url: url,
5.     };
6.     window.history.pushState(state, state.title, state.url);
7.   };

复制代码

这个函数可以往history对象中添加一条汗青记录
以是在页面刚载入的时间调用这个函数以添加一条汗青记录

1. pushHistory(document.title, location.href);

复制代码

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

1. window.addEventListener('popstate', async function(e) {
2.     // 为了避免只调用一次，再次调用一次
3.     pushHistory(document.title, location.href);
5.     // 加入业务逻辑
6.     if(xxx) {
7.         // 调用微信的返回事件(前提要引入微信的SDK)
8.         wx.miniProgram.navigateBack();
9.     } else {
10.         // 取消返回，阻止默认返回行为
11.         history.pushState(null, null, location.href);
12.     }
13. })

复制代码

这时间去小步伐模拟器运行一下就完成了。

来源：https://blog.csdn.net/szw2377132528/article/details/129353706
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！