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://xiahunao.cn/news/2807760.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

PyPDF2:项目实战源码分享(PDF裁剪)

目录📑 1. 背景📑2. 源码模块解析📑2.1 读取PDF页数2.2 获取指定页的宽高尺寸2.3 裁剪单页PDF2.4 批量裁剪PDF 总结📑 1. 背景📑 接PyPDF2模块推荐博文中提到的实际需求(将银行网站下载来的多页且单页多张…

10s了解 共享动画

1. 目的: 界面切换,两控件变化关联,看起来更丝滑流程 2.怎么配置 为关联两控件加上相同transitionName 3.在Navigation开启共享动画 跳转到的界面 接收共享动画 4.在Activity中开启共享动画 同3 ,在共享动画两个View加上相同的t…

政安晨【示例演绎虚拟世界开发】(一):Cocos Creator 的 Hello World

政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: AI虚拟世界大讲堂 希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在评论区提出指正。 前言 Cocos Creator是一款非常强大的游戏开发引擎,它有着优秀…

[HTML]Web前端开发技术29(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的…

centos7部署单机项目和自启动

centos7部署单机项目和服务器自启动 1.安装jdk和tomact1.1上传jdk、tomcat安装包1.2解压两个工具包1.3.配置并且测试jdk安装1.4.启动tomcat1.5.防火墙设置1.6配置tomcat自启动 2.安装mysql2.1卸载mariadb,否则安装MySql会出现冲突(先查看后删除再查看)2.2在线下载My…

Linux学习笔记9——adduser,passwd用户创建

Linux是一个多用户的操作系统,允许多用户访问,对系统进行一些操作,其中根用户为root拥有系统一切权限 其中,useradd是新建用户,passwd是给新建用户添加密码,su新建用户名,是切换到该用户对系统进…

雪地奔驰高级版/SnowRunner【带修改器】(全DLCs)

包含DLC • SnowRunner – Sabertooth Livery • SnowRunner – Navistar 5000-MV Tractor • SnowRunner – High Roller Pack • SnowRunner – Loaded Dice Vinyl Wrap • SnowRunner – Scorched Vinyl Wrap • SnowRunner – True Colors Vinyl Wrap • SnowRunner…

企业网站建设需要多少钱?定制开发费用报价在3000-4000元

建立一个网站需要多少钱? 网站建设的价格划分也有很多。 这里首先要提的是市面上常见的一种低成本建站方式——模板网站,就是那种直接制作网站原型就可以无限复制的网站。 或者可以在几分钟内建立一个由软件生成的网站。 成本低得惊人,从500元…

【Java程序设计】【C00300】基于Springboot的足球社区管理系统(有论文)

基于Springboot的足球社区管理系统(有论文) 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的足球社区管理系统,本系统有管理员以及教练角色权限; 管理员设置的功能有:添加并管理各种类型…

nacos注册中心之服务注册

微服务是一种经过良好架构设计的分布式架构方案,特征: 1、单一职责:微服务拆分粒度更小,每一个服务都对应唯一的业务能力,做到单一职责,避免重复业务开发。 2、面向服务:微服务对外暴露业务接口…

常用芯片学习——YC688语音芯片

YC688 广州语创公司语音芯片 使用说明 YC688是一款工业级的MP3语音芯片 ,完美的集成了MP3、WAV的硬解码。支持SPI-Flash、TF卡、U盘三种存储设备。可通过电脑直接更新SPI-Flash的内容,无需上位机软件。通过简单的串口指令即可完成三种存储设备的音频插…

Linux配置jdk、tomcat、mysql离线安装与启动

目录 1.jdk安装 2.tomcat的安装(开机自启动) 3.MySQL的安装 4.连接项目 1.jdk安装 上传jdk安装包 jdk-8u151-linux-x64.tar.gz 进入opt目录,将安装包拖进去 解压安装包 这里需要解压到usr/local目录下,在这里我新建一个文件夹…

Javaweb之SpringBootWeb案例之配置优先级的详细解析

1. 配置优先级 在我们前面的课程当中,我们已经讲解了SpringBoot项目当中支持的三类配置文件: application.properties application.yml application.yaml 在SpringBoot项目当中,我们要想配置一个属性,可以通过这三种方式当中…

21.scala泛型结合隐式转换使用

目录 概述实践代码执行 结束 概述 scala泛型结合隐式转换使用 实践 代码 package com.fun.scala/*** 视图界定*/ object Genericity04 {def main(args: Array[String]): Unit {val s1 new Stu("test", 33)val s2 new Stu("test2", 32)println(new M…

Apache Doris 发展历程、技术特性及云原生时代的未来规划

文章目录 每日一句正能量前言作者介绍Apache Doris 特性极简架构高效自运维高并发场景支持MPP 执行引擎明细与聚合模型的统一便捷数据接入Apache Doris 极速 1.0 时代极速列式内存布局向量化的计算框架Cache 亲和度虚函数调用SIMD 指令集 稳定多源基于云原生向量数据库Milvus 的…

云尚办公-0.0.1

1. 核心技术 基础框架:SpringBoot数据缓存:Redis数据库:MySQL权限控制:SpringSecurity工作流引擎:Activiti前端技术:vue-admin-template Node.js Npm Vue ElementUI Axios微信公众号:公众…

Mac OS 下载安装与破解Typora

文章目录 下载Typora破解Typora1. 进入安装目录2. 找到并打开Lincense文件3. 修改激活状态4. 重新打开Typora 下载Typora 官网地址:typora官网 下载最新Mac版,正常安装即可 破解Typora 打开typora,可以看到由于未激活,提示使用期限还剩下15…

【Linux】--- 详解Linux软件包管理器yum和编辑器vim

目录 一、Linux软件包管理器 - yum1.1 yum和软件包是什么1.2 Linux系统(Centos)的生态1.3 yum相关操作1.4 yum本地配置 二、Linux编辑器 - vim使用2.1 vim的基本概念2.2 vim命令模式命令集2.3 vim末行模式命令集2.4 关于vim的几个相关问题 一、Linux软件包管理器 - yum 1.1 yu…

hbuilder 发布为微信小程序

发布为微信小程序: 申请微信小程序AppID,参考:微信教程。在HBuilderX中顶部菜单依次点击 "发行" > "小程序-微信",输入小程序名称和appid点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项…

Debezium发布历史149

原文地址: https://debezium.io/blog/2023/06/21/debezium-2-3-final-released/ 欢迎关注留言,我是收集整理小能手,工具翻译,仅供参考,笔芯笔芯. Debezium 2.3.0.Final Released June 21, 2023 by Chris Cranford re…