window对象监听浏览器页签之间的切换状态;前端监听浏览器切换页签的触发时机

news2024/10/8 13:41:42

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') {
    // 当页签处于可见状态,TODO
    console.log("出现")
  } else {
    // 当页签处于不可见状态(hidden),TODO
    console.log("消失")
  }
};
window.document.addEventListener('visibilitychange', handler);

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

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

相关文章

华为手机联系人不见了怎么恢复?3个解决方案

华为手机联系人列表就像是我们精心编织的社交网络之网。然而,有时,这张网可能会因为各种原因而意外破损,联系人信息消失得无影无踪,让我们陷入“人脉孤岛”的困境。华为手机联系人不见了怎么恢复?别担心,我…

3.js - 灯光与阴影 - 聚光灯

// ts-nocheckimport * as THREE from three // 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls // 导入hdr加载器 import { RGBELoader } from three/examples/jsm/loaders/RGBELoader.js // 导入lil.gui import { GUI } from thre…

关于 Qt在国产麒麟系统上设置的setFixedSize、setMinimumFixed、setMaxmumFixed设置无效 的解决方法

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/140242881 长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV…

万物皆可嵌入--embedding在GPU中的实现

摘要 Embedding技术自从谷歌推出word2vec的工作后得到迅速的应用,典型应用之一是在广告推荐场景中,从word2vec演进到item2vec,embedding技术的出现也使深度学习进入广告推荐的场景成为可能。广告推荐模型动辄几十GB甚至TB的模型大小&#xf…

MVC 控制器 中Action 不能同名,参数不一样,路由器寻找不到对应的,要加特性

//1 方法不可能完全相同,参数不同//2 那还需要特性吗?需要的,因为MVC选择方法时,不是按参数选择:http请求发送很多数据,其实没法识别,//因为mvc找方法是通过反射来的,GetMethods(nam…

C#(asp.net)房屋租赁管理系统-计算机毕业设计源码64421

目 录 摘要 1 绪论 1.1 研究背景与意义 1.2开发现状 1.3论文结构与章节安排 2 房屋租赁管理系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 …

vue3+springboot+mybatis+mysql项目实践--简单登录注册功能实现

这里是一次对vue3springbootmybatismysql的项目实现,简单实现前后端分离的登录注册功能,主要工具:idea,navicat 目录 一、创建vue3项目并初始配置 创建vue3项目 2.修改项目结构 1)原始目录结构 2)修改后目录结构 …

5G RedCap调查报告

一、5G RedCap技术背景 5G RedCap(Reduced Capability缩写,轻量化5G),是3GPP标准化组织定义下的5G裁剪版本,是5G面向中高速率连接场景的物联网技术,它的能力介于5G NR(含eMBB和uRLLC)和LPWA(如LTE-M和NR-IoT)之间,如图1所示,是5G-A(5G Advanced)的关键技术之一。…

用网络编程完成windows和linux跨平台之间的通信(服务器)

服务器代码逻辑: 服务器功能 创建 Socket: 服务器首先创建一个 Socket 对象,用于进行网络通信。通常使用 socket() 函数创建。 绑定(Bind): 服务器将 Socket 绑定到一个特定的 IP 地址和端口号上。这是通过…

51单片机STC89C52RC——16.1 五线四相步进电机

目录 目的/效果 一,STC单片机模块 二,步进电机 2.2 什么是步进电机? 2.2.1 步进电机驱动板 静态参数 动态参数 2.2.2 五线四相 单相激励步进 双相激励步进 混合激励驱动 2.3 细分驱动 2.4 通过数字信号控制旋转位置和转速。 2…

JavaScript-map方法

map可以遍历数组处理数据,并返回新的数组 语法: ​const arr[元素1,元素2,元素3] const newarrarr.map(function(数组的元素,数组的索引)){return 新元素 } const arr[blue,red,green]const newarrarr.map(function(ele,index){co…

物业系统自主研发接口测试框架

1、自主研发框架整体设计 1.1、什么是测试框架? 在了解什么是自动化测试框架之前,先了解一下什么叫框架?框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架…

【小白也能看的懂】想要玩转AI大模型,这4招你得知道

前言 对于大部分人来说,能够灵活使用AI工具,并对自己每个常用的AI工具优劣势很清楚,就已经足够了。不过,毕竟AI发展实在太快,多了解一些相关的知识点,以全局的视角去看AI,可以避免管中窥豹&…

用SmartEDA点亮电路教学:传统课堂的革新之道

在数字化浪潮的推动下,教育领域也迎来了前所未有的变革。特别是在电路教学这一专业领域,传统的黑板加课本的教学模式已难以满足现代学生的需求。今天,我们就来探讨一下,如何利用SmartEDA电路仿真软件来补充传统教学,为…

Oracle 23ai 中的重要新特性 VECTOR 数据类型

Oracle 23ai 中的 VECTOR 数据类型是 Oracle 数据库在 AI 领域的一个重要新特性,它允许用户以向量的形式存储数据,并在这些向量的基础上进行高效的搜索和分析。以下是对 Oracle 23ai VECTOR 数据类型的详细解析: 参考官方文档地址 https://d…

Python机器学习推理工程化落地步骤指南

目录 一、引言 二、数据准备 2.1 数据收集 2.2 数据清洗 2.3 特征工程 2.4 数据分割 三、模型训练 3.1 选择算法 3.2 训练模型 3.3 模型评估 3.4 模型调优 四、模型部署 4.1 模型序列化 4.2 构建推理服务 4.3 部署与监控 五、总结 在当今科技飞速发展的时代…

【SVN的使用-通过xCode使用SVN-SVN的目录结构 Objective-C语言】

一、接下来,我们来通过xcode使用SVN啊 1.我先把小明这个目录下,wechat这个文件夹都删了, 我现在小明新入职了,但是呢,我现在不喜欢用命令行,我也不喜欢用Corner Stone,我要用xcode, 作为小明,我入职以后,第一件事儿,要把代码checkout下来, 那首先呢,打开你的xc…

从3D扫描到CAD模型【逆向工程】

有时,你无法访问零件原始生产中的原始设计文档。逆向工程(reverse engineering)使你能够分析物理零件并探索其最初的制造方式,以复制、创建变体或改进设计。目标是最终创建一个用于制造的新 CAD 模型。 虽然逆向工程的概念非常简…

Linux--安装VMware步骤

安装VMware VMware Desktop Hypervisors for Windows, Linux, and Mac 复制链接打开浏览器下载即可 从官网下载软件,完成后为确保后续正常使用,需要检查虚拟网卡是否安装完成 检查虚拟网卡的安装步骤 Windows--设置--高级设置--网络适配器--看是否有显…

录屏软件免费推荐,拥有这4款,不花一分钱

在这个充满创意与活力的数字时代,录屏软件早已成为我们探索世界、分享生活的必备神器。但市面上却存在很多收费的录屏软件,让人望而却步。那么有没有一些录屏软件免费帮助我们轻松开启录影人生,尽情展现创意与才华呢? 本文就将带…