最近有个小H5项目 是通过微信小程序进的 因流程较长所以想在最后的订单详情页面点返回按钮时 回到首页
本打算页面跳转都用location.replace 但中间有几步操作希望能用返回返到上个页面 因此无法使用replace
此外想着能不能在最后一个页面能否清掉浏览器历史记录 发现没有相关方法
最后发现可以监听返回事件 最后用了这个方式
mdn 相关介绍
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event
假设想要点击返回的页面是/xxx/detail.html
使用发现 想要注册的popstate回调函数起作用 需要历史记录是通过pushstate推进去的
因此需要先向history中推入一条记录 并监听popstate事件
window.history.pushState({ url:‘index.html‘ }, "index", ‘0‘);
window.addEventListener("popstate", function (e) {
console.log(e.state,‘e.state‘)
});
此时会发现浏览器的url栏 变成了/xxx/0 但是页面并没有发生跳转
应该是只在浏览器历史栈中push了一条0的记录 但是不会触发页面跳转之类
此时控制台调用history.back() 发现打印的不是预期的{ url:‘index.html‘ } 这个传的state 说明popstate传入的e应该是要返回的那个页面的state
新增的0页面的上个页面是/xxx/detail.html 此页面是无history.state值的
要想获取到state值 我这边是再次新增一条记录
window.history.pushState({ url:‘‘, flag:‘1‘ }, "index", ‘1‘);
此时发现 页面返回可以打印出{ url:‘index.html‘ } 这个history.state 就可以进行想要的效果了
最终代码
// 向history推一条记录 为了用 {url:‘index.html?needClose=1‘ }这个state
window.history.pushState({ url:‘index.html?needClose=1‘ }, "index", ‘‘);
window.history.pushState({ url:‘‘ }, "index", ‘‘);
// 定时器 刚进页面浏览器会自动push一条本页面历史记录 防止冲突
setTimeout( () => {
window.addEventListener("popstate", function (e) {
// state有值则跳转
if (e.state != null && e.state.url != ‘‘) {
location.href = e.state.url
}
});
},300 )
此时在手机detail页面点返回便可以返回到首页了
但是这时首页点返回就返回到detail页面了。。
所以首页也要改下。
获取query中参数
if( needClose ){
setTimeout( () => {
// 向history推一条记录 不然popstate事件无法触发
window.history.pushState({ url:‘‘, }, "index", ‘‘);
window.addEventListener("popstate", function (e) {
// 调用小程序api 关闭所有页面 并跳到小程序首页
wx.miniProgram.reLaunch({url: ‘/xxxxxx/xxxx})
});
},800 )
}