Vue3 - [兼容PC和手机H5] 详细监听浏览器刷新 / 关闭 / 前进后退事件,用户点击关闭和刷新页面前 “拦截“ 操作并弹出提示框(实时监听用户关闭或刷新网页,触发时文字提醒并执行自定义操作)

前言

如果您需要 Vue2 版本,请访问 这篇文章。

本文 实现了在 vue3.js 网站项目中,实时监听浏览器的关闭、刷新、前进后退等,当被点击时阻止默认行为和弹出文字提示框(告知用户),当用户确认离开页面时执行一个函数或一段代码等!

完美兼容所有浏览器,支持电脑 PC 网页、手机移动端 H5 页面,


如下图所示,支持给 “局部(单独页面)” 设置监听,也可以 “全局(全部页面)” 设置,

示例代码干净整洁,无任何乱七八糟的代码

在这里插入图片描述
在这里插入图片描述

局部监听(源码)

您可以仅给 “某个单独的页面” 设置监听,也可以让整个网站全局监听。

随便找个页面,一键复制运行起来。

猜你喜欢

转载自blog.csdn.net/weixin_44198965/article/details/134180009
今日推荐