欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > 在前端项目中监听浏览器事件,关闭,刷新,后退事件

在前端项目中监听浏览器事件,关闭,刷新,后退事件

2024/11/30 20:37:59 来源:https://blog.csdn.net/weixin_42284453/article/details/144117484  浏览:    关键词:在前端项目中监听浏览器事件,关闭,刷新,后退事件

需求:从页面A 跳到详情页面C,页面A需要保持跳转之前的状态,但是页面A跳转页面B 的时候,需要清空缓存,我主要用react-activation 来实现,在页面A 的路由配置页加 keep-alive ,此时,页面A跳详情C,再返回页面A 的时候,不需要任何处理~但是页面A跳到页面B 的时候,就需要用react-activation 的useAliveController 的clear 方法 来实现~

<span onClick="go('1')">页面A</span><span onClick="go('2')">页面B</span>
<script>const go = (key) => {if(clear){clear()}}
</script>

此时已完全满足上面的需求,但是突然发现从A跳到C,在跳到B , 如果点击浏览器上面的后退按钮到B 页面,在从B返回A 的时候,A页面无法输入~~主要是因为A页面没有clear 掉。所以此时需要加一个浏览器后退的监听

 const clearFun = () => {if(clear){clear()}}
useEffect(() => {window.addEventListener('popstate', clearFun);return () =>{window.removeEventListener('popstate', clearFun);}})

扩展一下浏览器的事件

beforeunload beforeunload事件是在页面即将卸载时触发的,这通常发生在用户关闭或刷新页面之前。我们可以利用这个事件来提示用户确认是否真的需要离开当前页面。
unload 当文档被完全卸载后,unload事件会被触发。该事件可以用来执行一些清理操作,比如清除cookies,记录日志等。
popstate。 浏览器后退按钮触发的是popstate事件,它通常与HTML5的历史API结合使用

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com