window对象监听浏览器页签之间的切换状态;前端监听浏览器切换页签的触发时机
window对象监听浏览器页签之间的切换状态
记录两种办法
第一种:会将任何鼠标点进或点出浏览器的操作监听;同页面也会触发
// 窗口获得焦点时的回调函数
function onWindowFocus() {console.log('窗口获得焦点');querySubmit()
}
// 窗口失去焦点时的回调函数
function onWindowBlur() {console.log('窗口失去焦点');
}
// 添加事件监听器
window.addEventListener('focus', onWindowFocus);
window.addEventListener('blur', onWindowBlur);
第二种:此方法只在切屏或切换页签触发
const handler = () => {// 也可以通过document.hidden属性(布尔类型)来判断// window.document.hidden (True/False)// document.visibilityState拥有两种字符串枚举值('visible' 和 'hidden')if (window.document.visibilityState === 'visible') {// 当页签处于可见状态,TODOconsole.log("出现")} else {// 当页签处于不可见状态(hidden),TODOconsole.log("消失")}
};
window.document.addEventListener('visibilitychange', handler);
相关文章:
window对象监听浏览器页签之间的切换状态;前端监听浏览器切换页签的触发时机
window对象监听浏览器页签之间的切换状态 记录两种办法 第一种:会将任何鼠标点进或点出浏览器的操作监听;同页面也会触发 // 窗口获得焦点时的回调函数 function onWindowFocus() {console.log(窗口获得焦点);querySubmit() } // 窗口失去焦点时的回调函…...
MySQL 条件函数/加密函数/转换函数
条件函数 IF(): 如果条件为真,返回一个值,否则返回另一个值。 -- 示例:根据员工的薪水返回薪水等级 SELECT name, salary, IF(salary < 3000, Low, IF(salary BETWEEN 3000 AND 7000, Medium, High)) AS salary_level FROM employ…...
初学SpringMVC之接收请求参数及数据回显
pom.xml 文件导入 lombok 的依赖 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.34</version></dependency> Controller 表示这是一个控制器 RequestParam 表示从前端接收…...
Java链表LinkedList经典题目
一.LinkedList的方法 首先先看一下链表的方法: 方法解释boolean add(E e)尾插void add(int index, E element)将 e 插入到 index 位置boolean addAll(Collection c)尾插 c 中的元素E remove(int index)删除 index 位置元素boolean remove(Object o)删除遇到的第一…...
【cocos creator】2.x,伪3d拖拽,45度视角,60度视角,房屋装扮
伪3d拖拽,45度视角,60度视角 工程下载:(待审核) https://download.csdn.net/download/K86338236/89530812 dragItem2.t s import mapCreat2 from "./mapCreat2";const {ccclass, property } = cc._decorator; /*** 拖拽类,挂在要拖拽的节点上*/ @ccclass export…...
【thingsbord源码编译】 显示node内存不足
编译thingsbord显示报错 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory问题原因分析 重新安装java版本 编译通过...
内存巨头SK海力士正深化与TSMC/NVIDIA合作关系,开发下一代HBM
据BusinessKorea报道,内存巨头SK海力士正深化与台积电(TSMC)及英伟达(NVIDIA)的合作关系,并计划在9月的台湾半导体展(Semicon Taiwan)上宣布更紧密的伙伴关系。 SK海力士与台积电的合作历史已久。2022年,台积电在其北美技术研讨会上宣布成立O…...
基于Pinia的WebSocket管理与优化实践(实现心跳重连机制,异步发送)
WebSocket作为一种全双工通信协议,允许服务器和客户端之间建立持久的连接,提供了比传统HTTP请求更为高效的数据交换方式。本文将探讨如何使用Pinia状态管理库在Vue应用中优雅地管理和优化WebSocket连接,以实现稳定、高效的实时数据传输。 环境…...
Perl词法作用域:自定义编程环境的构建术
🎭 Perl词法作用域:自定义编程环境的构建术 在Perl编程中,词法作用域(lexical scoping)是一种控制变量可见性的方式,它允许变量在特定的作用域内可见,从而避免变量名的冲突。Perl提供了灵活的机…...
vscode使用ssh连接远程服务器
开工啦 vscode连接远程服务器(傻瓜式教学) 正常根据上面文章的步骤就可以连接了 报错可以尝试的文章: VScode通过remote ssh连接虚拟机 & 报错过程试图写入的管道不存在(已解决) vscode remote ssh linux[血泪…...
linux 常用和不那么常用命令记录02 磁盘占用
常用的磁盘相关命令 du 有的时候我们想要查询一个文件所占用的磁盘空间大小,可以使用du命令来查看 命令 配置 参数 du [options] [files or directories]-h:以人类可读的格式显示输出(例如 KB、MB、GB)。 -s…...
mybatis日志记录方案
首先对指定表进行监控 对表进行监控,那么就要使用的是statementInterceptor 拦截器 使用拦截器那么就要写intercepts写拦截条件进行拦截 监控只对与增删改 查询不进行监控 对于字段的监控,是谁修改了字段,那么就进行报警,或者提醒 消息提醒使用钉钉机器人进行消息提醒 P…...
【LeetCode】最长连续序列
目录 一、题目二、解法完整代码 一、题目 给定一个未排序的整数数组 nums ,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1: 输入:nu…...
Windows下终端Kafka指令常用操作
1、创建Topic kafka-topics.bat --create --bootstrap-server localhost:9092 --replication-factor 1 --partitions 1 --topic test 2、查看Topic列表 kafka-topics.bat --list --bootstrap-server localhost:9092 3、设置Topic最大消息大小 kafka-topics.bat --bootstrap-s…...
QT---lineEdit相关信号
1.returnPressed信号 connect(ui.lineEdit_passWord, &QLineEdit::returnPressed, []() { // 输入密码回车后,调用校验密码接口ui.lineEdit_passWord->clearFocus(); //失去焦点on_param_confirmBtn_clicked();});2.输入后失去焦点才获取编辑框内新信息 参…...
基于vue的地图特效(飞线和标注)
这段代码的主要功能是在页面加载完成后,初始化一个 echarts 地图图表,并配置了相关的地理数据、散点数据、线条数据以及样式效果,最后在指定的 div 元素中进行展示。 需要再vue中的框架实现,不能单独直接运行。 标注 type: effe…...
生物环保技术有哪些缺点或者局限性呢
生物环保技术,作为一种利用生物学原理和技术来处理环境污染的方法,虽然具有绿色环保、高效节能等优点,但也存在一些缺点和局限性。以下是对这些缺点和局限性的详细分析: 一、受环境因素影响大 生物环保技术的效果往往受到环境因…...
我被手机所伤,竟如此憔悴。
临睡前,刚刷完小视频,感觉好无聊。一阵阵空虚感袭来。看看时间,哦,原来我下班后一直从6点刷视频到11点。 哎,太空虚了,又马上要睡觉了,为什么会这么难受呢?明明我大学,高中&#x…...
【深度学习】第3章实验——回归模型
根据相关数据集进行回归分析 1. import statsmodels.api as sm # df.loc[:, ...] 表示选择所有行。 # df.columns ! mpg 创建一个布尔数组,指示哪些列不等于 mpg。 # df.loc[:, df.columns ! mpg] 选择 df 中所有行和列名不等于 mpg 的所有列。 x df.loc[:,df.col…...
MYSQL 四、mysql进阶 8(索引优化与查询优化)
都有哪些维度可以进行数据库调优?简言之: 索引失效、没有充分利用到索引——建立索引关联查询太多JOIN(设计缺陷或不得已的需求)——SQL优化服务器调优及各个参数设置(缓冲、线程数等)——调整my.cnf数据过…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
