因为业务上有需求,在开发小程序的时候有些页面要使用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改变事件文章来源:https://www.toymoban.com/news/detail-509664.html
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://www.toymoban.com/news/detail-509664.html
到了这里,关于小程序内嵌H5页面监听小程序的返回事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!