javascript监听浏览器离开、进入行为

            document.addEventListener('visibilitychange', () => {if (document.visibilityState == 'hidden') {alert('离开')}if (document.visibilityState == 'visible') {alert('进入')}})

visibilitychange是浏览器新添加的一个事件,当其选项卡的内容变得可见或被隐藏时,会在文档上触发visibilitychange(能见度更改)事件。这个事件主要在用户切换浏览器标签页时触发,例如,当用户将浏览器标签页切换到后台,或者从后台切换到前台时,就会触发visibilitychange事件。

visibilitychange事件有两个常用的可选值:hidden和visible。当页面内容对用户不可见时,例如页面最小化,或者用户切换到其他网页时,visibilityState的值就会变为hidden;而当页面内容可见时,visibilityState的值就会变为visible。

visibilitychange事件的主要应用场景包括但不限于:防止当页面正在渲染时加载资源,或者当页面在背景中或窗口最小化时禁止某些活动。此外,对于采用HTML5开发的游戏来说,visibilitychange事件也非常有用。例如,当用户正在玩游戏时,如果突然切换到后台去发一条短信或打一个电话,再切换到游戏,开发者就可以通过捕捉visibilitychange事件来处理这种突发情形,当游戏切换到后台时就暂停游戏,从后台切换回来时,又能允许用户继续游戏。

在JavaScript中,可以使用document.addEventListener方法来监听visibilitychange事件,然后根据事件的target.visibilityState属性来判断页面是可见还是隐藏,从而执行相应的操作。例如,当应用程序或浏览器标签页切换到后台时就停止播放音乐,从后台切换回来时又开始播放音乐。

总的来说,visibilitychange事件提供了一种有效的方式来处理用户在浏览器中的行为,特别是当用户切换浏览器标签页时,可以帮助开发者更好地管理页面资源和用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/491365.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一. demo

1. 舞台-场景-控件 import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.Pane; import javafx.scene.layout.VBox; import javafx.stage.Stage;import java.util.Arrays;public class Main e…

m估计及其c++简单实现

文章目录 什么是m估计怎么求解m估计呢?Huber函数时的线性m估计 什么是m估计 自20世纪60年代稳健统计建立以来,在国内外众多学者的研究之下,诞生了一系列稳健统计重要理论和成果。其中最主要且广泛使用的稳健统计有以下三类: L-e…

【数据集】世界水评估方案指标:灌溉面积/灌溉用水等

世界水评估方案指标 概述(Overview)数据下载(Data Download)案例1:F. Irrigated lands案例2:G. Irrigated water use参考World Water Development Report II-Indicators for World Water Assessment Programme 概述(Overview) 在关于全球环境变化和可持续发展的辩论…

搭建非maven spring boot项目 并且idea进行打包

1.所需jar包 2.搭建web项目 3 import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; SpringBootApplication public class SpringBootTemplateApplications { public static void main(String\[\] ar…

利用缓冲区模拟进度条加载

界面呢非常简洁,代码也非常简单,非常适合有用来练手或者消遣。 以下就是进度条的样子咯,感兴趣的朋友可以自己去“美化”一下hh ProgressBar.c文件 用来定义ProcBar函数,该函数就是实现进度条的主核心代码,用“#”表示…

05 EXTI外部中断

一、中断系统 中断系统:管理和执行中断的逻辑结构。中断:在主程序运行过程中,出现了特定的中断触发条件——中断源,使得CPU暂停当前正在运行的程序,转而去处理中断程序,处理完成后又返回原来被暂停的位置继…

Java/Python/Go不同开发语言基础数据结构和相关操作总结-GC篇

Java/Python/Go不同开发语言基础数据结构和相关操作总结 1. 常见gc方式1.1 gc判断对象是否存活1.2 引用计数法1.2 标记-清除算法1.3 复制算法1.4 标记-压缩算法1.5 分代收集算法 2. java的gc方式以及垃圾回收器2.1 gc方式2.1 gc回收器2.1.1 Serial收集器2.1.2 ParNew收集器2.1.…

UE引擎, 在create blueprint from selection中, 点击select卡死问题处理

1. bug场景 在创建子类时点击select, ue会直接冻结无法点击 2. 解决方案 点击“Edit” -> “Edit Preference” 选择Asset Editor Open Location的选项从默认改为“Main Window”即可解决问题 3. 问题产生的原因 原因是UE的弹窗在拓展显示器或者笔记本显示…

2024年环境安全科学、材料工程与制造国际学术会议(ESSMEM2024)

【EI检索】2024年环境安全科学、材料工程与制造国际学术会议(ESSMEM2024) 会议简介 我们很高兴邀请您参加将在三亚举行的2024年环境安全科学、材料工程和制造国际学术会议(ESSMEM 2024)。 ESSMEM2024将汇集世界各国和地区的研究人员&…

微信小程序的医院体检预约管理系统springboot+uniapp+python

本系统设计的目的是建立一个简化信息管理工作、便于操作的体检导引平台。共有以下四个模块: uni-app框架:使用Vue.js开发跨平台应用的前端框架,编写一套代码,可编译到Android、小程序等平台。 语言:pythonjavanode.js…

Jenkins自动化部署构建说明(8)

Jenkins构建说明 - 20211012 什么是Jenkins? Jenkins 是一款流行的开源持续集成(Continuous Integration)工具,广泛用于项目开发,具有自动化构建、测试和部署等功能。它是一个自动化的周期性的集成测试过程,从检出代…

【C++进阶】STL容器--list底层剖析(迭代器封装)

目录 前言 list的结构与框架 list迭代器 list的插入和删除 insert erase list析构函数和拷贝构造 析构函数 拷贝构造 赋值重载 迭代器拷贝构造、析构函数实现问题 const迭代器 思考 总结 前言 前边我们了解了list的一些使用及其注意事项,今天我们进一步深入…