vue3实现H5监听浏览器回退并阻止回退

当你的移动端页面有弹窗的组件并且这个组件不是来自于某些知名的组件库，你是否有这样的需求？当用户唤起弹窗之后又按下了手机自带的回退键，弹窗之前的页面也被关掉了，而用户本身的意愿是关掉弹窗而已。如果你也有这样的诉求，这篇文章帮你解决！

1.给history增加一条记录

手机自带的回退键默认是回到上一个页面，所以我们用watch监听，在弹窗弹起的时候我们给history添加一条记录保证在按下回退键后能保持在当前页（用到的是vue3的监听），我这个页面有三个弹窗，同时监听三个变量，当为true时弹窗唤起，记得引入watch组件，代码如下：

2.监听页面的回退事件

第二步就是要监听浏览器自带的回退事件，并在回调函数中处理你的逻辑，我这里是关闭弹窗，代码如下：

3.非后退键关闭弹窗的处理

如果弹窗是由点击弹窗中的内容或者弹窗中的关闭按钮而非手机自带后退键关闭的，我们需要后退一下，否则，在页面有多个弹窗的时候，history中的记录会非常多，出现用户想退出本页面时，按下手机后退键一直无法退出的情况，vue3中记得引入路由组件并注册，具体代码如下：

这样就大功告成啦，你还有什么更好的方法，欢迎评论区留言~

vue3实现H5监听浏览器回退并阻止回退相关推荐

h5监听浏览器返回，关闭浏览器
需求监听浏览器返回,点击返回时,显示弹窗,弹窗中有两个按钮,a按钮:关闭当前浏览器,b按钮:关闭弹窗 mounted(){// 向历史记录中插入了当前页,//为了ios首次进入页面出现底部返回按钮i ...
移动端h5监听浏览器返回操作（目前在react项目中用到）
前言 1.主要是返回是默认的浏览器返回事件是返回上一个页面. 2.处理页面各种弹窗,点击物理返回应该隐藏这些弹窗而不是直接返回页面. 3.总结下问题,h5应该希望能监听到返回事件并且做一些处理. 相关 ...
h5 监听浏览器被切换到后台或者手机锁屏再次唤起事件
H5有一个事件叫 visibilitychange ,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,代码如下: document.addEventListener("v ...
H5 监听手机浏览器后台唤醒激活
var reLoadLeftTime = false ; //监听浏览器当前页面是否被激活的事件 var hiddenProperty = 'hidden' in document ? 'hidden ...
popState 监听浏览器切换路由
浏览器内 popState 监听器使用在前端开发过程中,在一些业务场景中可能会遇到监听浏览器前进/后退.控制路由等情况.我们可以使用Web API提供的popState事件来处理这些情况,提到pop ...
【webview】微信和PC监听浏览器关闭和刷新(亲测可用)
监听浏览器关闭和刷新前言 PC端微信端前言最近做的项目里有一个新的需求,在不同的浏览器内打开的网页,监听用户的操作,比如关闭浏览器,刷新浏览器等等. 这就涉及到了几个平台:PC端浏览器,移动端 ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
javaScript如何监听浏览器关闭事件
转载链接:http://www.cnblogs.com/Tim_Liu/archive/2010/11/09/1872596.html 最近写东西的时候发现需要对浏览器的关闭进行监听, 当用户关闭的时 ...

vue3实现H5监听浏览器回退并阻止回退

1.给history增加一条记录

2.监听页面的回退事件

3.非后退键关闭弹窗的处理

vue3实现H5监听浏览器回退并阻止回退相关推荐

最新文章

热门文章