vue实现监听切出当前页面visibilitychange事件

最新推荐文章于 2024-06-27 16:37:42 发布
最新推荐文章于 2024-06-27 16:37:42 发布
阅读量1.7k 收藏 4
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68683769/article/details/125167309
版权
本文介绍如何在Vue项目中使用visibilitychange事件监听页面是否处于激活状态。当浏览器窗口被最小化、切换标签页或从后台应用切换回来时，此事件会被触发。文章详细讲解了事件的四个相关值，并提供了JS和Vue的实现示例。
摘要由CSDN通过智能技术生成

visibilitychange是浏览器新添加的一个事件，当浏览器当前页面被最小化，或者切换到浏览器的其他标签页，或者从其他页面或应用返回到当前标签页，都会触发这个事件

document.visibilityState 共有四个值：

值 解释
hidden 文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于’锁屏状态‘
visible 只要页面可见，哪怕只露出了一个角，document.visibilityState 也会返回 visible
prerender 页面在屏幕外执行预渲染处理 document.hidden 的值为 true
unloaded(废弃) 表示页面即将卸载

ps：当 document.visibilityState 属性返回 visible 时，document.hidden 属性返回 false；其他情况下，都返回 true

JS

document.</
最低0.47元/天 解锁文章
Luckyflowers
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue监听浏览器进入页面_解决vue单页面多个组件嵌套监听浏览器窗口变化问题
weixin_39526238的博客
12-20 1132
需求最近公司有个大屏展示项目(如下图)页面的元素需要做响应式监听，图表需要跟着窗口响应变化问题每一个图表都被我写成了一个组件，然后就在每一个组件里写了一串代码，监听浏览器变化结果只有父组件的代码生效mounted(){window.onresize = () => { //当窗口发生改变时触发//};}原因经简单测试后发现，同一个路由页面只能注册一次浏览器窗口监听事件，第二次注册的会覆盖第一...
Vue如何实现监听组件原生事件
10-15
本篇文章将深入探讨如何在Vue中实现监听组件的原生事件，以及如何在实际案例中应用这些技术。 首先，Vue的`.native`修饰符允许我们在组件上监听其根元素的原生DOM事件。这是解决组件间通信和事件处理的一种简洁方式...
vue实现监听切出当前页面显示隐藏方法visibilityChange
weixin_43923808的博客
03-23 1695
【代码】vue实现监听切出当前页面显示隐藏方法visibilityChange。
Vue利用visibilitychange监听页面显示和隐藏
第二世界
12-04 8269
mounted() { document.addEventListener('visibilitychange', _this.handleVisiable) }, destroyed() { document.removeEventListener('visibilitychange', _this.handleVisiable) }, methods: { handleVisiable(e) { if (e.target.visibilityState
vue监听页面刷新和离开事件
最新发布
qq_25239049的博客
06-27 352
【代码】vue监听页面刷新和离开事件。
vue中使用visibilitychange事件来获取页面当前可见性
宁静致远
12-08 3782
通过document 原生API visibilitychange 来获取页面当前可见性的状态
vue 页面切换监听事件
wr1067145458的博客
11-06 4244
这篇文章主要介绍了关于vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下 可以用 beforeRouteLeave 和 updated 来判断 name: 'supplier', components:{cmtWrap,cmtContent}, props: [], beforeRo...
通过监听webkitvisibilitychange事件，使用js动态修改title
jakenlian的专栏
08-02 1521
<html> <head> <title>Title change...</title> </head> <body onload="load()"> Title change... </audio> <script> function onVisibilityChanged(event) { v...
vue监听滚动事件实现滚动监听
11-26
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
10-14
在Vue框架中，实现监听窗口关闭事件并在关闭前发送请求的功能，对于需要在用户离开页面之前进行某些清理或保存数据的操作尤为重要。本文将详细介绍如何在Vue项目中实现这一功能，并提供相应的代码示例。 ### 监听...
vue 实现移动端键盘搜索事件监听
12-13
2、监听keypress事件 （1）KeyDown、KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。（要解释 ANSI 字符，应使用 KeyPress 事件。） （2）KeyPress 事件 此事件当...
Vue 监听浏览器各个标签间的切换
s18911896943的博客
07-13 807
监听浏览器各个标签间的切换
vue路由监听一进页面就执行
agua001的博客
12-11 4981
在某个组件监听是从哪页面（哪个路由）进来的，此时用路由监听 watch:{ $route: { handler(val){ this.beforeRouter = val.path }, // 深度观察监听 deep: true } }, 但是没有效果，根本没触发，一进页面就触发需要添加一个属性 watch:{ $route: { handler(val){ this.beforeRouter = val.path },
vue 监测切换浏览器tab
Sasori_puppet的博客
05-24 968
vue 监测切换浏览器tab mounted(){ document.addEventListener('visibilitychange',() => { //浏览器tab标签切换事件 if(document.visibilityState == 'hidden' ) { //页面切换或者最小化 //当页面切换或者最小化时，在此做其他方法操作， 如切换页面时发出警告 } } } ...
visibilitychange => 获取页面的可见性
aisiqi5873的博客
11-25 134
今天在写一个轮播时，一切功能都完好，但就是切换页面或者是最小化窗口之后一段时间再次打开页面时，发现轮播图一片空白。 心想着大概是浏览器的处理方式的问题，在搜索资料过后得到了处理方法。 通过为document添加visibilityChange事件即可获取页面的可见性。 可通过可见性不同执行一些操作或行为。 例如：标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询，还有停止一些...
利用visibilitychange事件来处理页面可见性变
qq_45585640的博客
06-11 456
使用场景：可以利用`visibilitychange`事件来处理页面可见性变化，例如在页面不可见时暂停视频播放、更新页面数据等。
vue在浏览器监听切出当前页面（或切屏）,触发警告
web_wp的博客
03-24 2996
visibilitychange
visibilitychange - 指定标签页可见时，刷新页面数据
yumihe
08-08 1169
三个知识点： 一通过监听浏览器页面可见性改变（visibilitychange）事件，来判断标签页是否可见 二配置路由的meta，来判断是否是指定的标签页 三调用其它模块的actions，刷新数据 router.js routes: [ { path: "/", redirect: "index" }, { path: "/ind...
vue3 解决全局事件监听屏幕大小未生效问题
前端小陈的成长记录
09-14 536
vue3 解决全局事件监听屏幕大小未生效问题
vue3监听页面退出事件
06-03
在 Vue 3 中，我们可以使用 `onBeforeUnmount` 钩子函数来监听页面退出事件。 使用方法如下： ```javascript import { onBeforeUnmount } from 'vue'; export default { setup() { // 监听页面退出事件 onBeforeUnmount(() => { // 执行相关清理操作 console.log('页面即将退出'); }); }, }; ``` 在上述代码中，我们使用 `onBeforeUnmount` 钩子函数来监听页面退出事件。在页面即将退出时，会执行回调函数中的相关清理操作。 需要注意的是，`onBeforeUnmount` 钩子函数只能在 `setup` 函数中使用，不能在组件选项中使用。同时，该钩子函数只会在组件被销毁前执行一次。如果需要监听多个页面退出事件，可以在根组件中使用该钩子函数。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值