当前位置: 首页 > news >正文

JS监听浏览器关闭、刷新及切换标签页触发事件

蛮简单的东西,知道就会,不知道就不会,没什么逻辑可言。简单记录一下,只为加深点儿印象。

visibilitychange

visibilitychange可以监听到浏览器的切换标签页。 

直接上代码: 

<script>document.addEventListener('visibilitychange', documentVisibilityChange)function documentVisibilityChange() {if(document.visibilityState === "hidden") {console.log('当前页签隐藏,即打开新页签')}if(document.visibilityState === "visible") {console.log('当前页签显示,即打开当前页签')}}
</script>

beforeunload 

beforeunload可以监听到页面的关闭,页签切换不会触发

  • 关闭浏览器窗口的时候触发
  • 通过点击当前地址栏或收藏夹进入另一个页面时触发(注意不是打开新页签)
  • 刷新浏览器时触发
  • 重新赋值window.location.href的值的时候触发
  • 通过 form input type="submit"按钮提交一个具有指定action的表单的时候触发(原生事件)

可能还有其他情况,大家感兴趣可以再去了解一下,我只是在浏览器刷新时用到了 

<script>window.addEventListener('beforeunload', windowBeforeUnload)function windowBeforeUnload() {console.log('触发beforeunload --->>>')}
</script>

相关文章:

JS监听浏览器关闭、刷新及切换标签页触发事件

蛮简单的东西&#xff0c;知道就会&#xff0c;不知道就不会&#xff0c;没什么逻辑可言。简单记录一下&#xff0c;只为加深点儿印象。 visibilitychange visibilitychange可以监听到浏览器的切换标签页。 直接上代码&#xff1a; <script>document.addEventListe…...

Unity 引擎做残影效果——3、顶点偏移方式

Unity实现残影效果 大家好&#xff0c;我是阿赵。 继续讲Unity引擎的残影做法。这次的残影效果和之前两种不太一样&#xff0c;是通过顶点偏移来实现的。 具体的效果是这样&#xff1a; 与其说是残影&#xff0c;这种效果更像是移动速度很快时造成的速度线&#xff0c;所以在移…...

【Linux】权限

1、shell命令以及运行原理 Linux 严格意义上说的是一个操作系统&#xff0c;我们称之为“核心&#xff08;kernel&#xff09;“ &#xff0c;但我们一般用户&#xff0c;不能直接使用 kernel。而是通过 kernel 的“外壳”程序&#xff0c;也就是所谓的shell&#xff0c;来与 k…...

Excel导入日期格式时自动转为五位数文本

问题描述&#xff1a;Excel导入数据时&#xff0c;当数据是日期可能会存在问题&#xff0c;日期格式转为文本了&#xff0c;例如“2023-07-31”接收时变为“45138”&#xff0c;导致后端解析日期出错&#xff0c;无法导入。 解决方法&#xff1a; 方法一&#xff1a;将Excel日…...

Mac使用brew安装软件报错

在使用brew安装软件时报错Failed to upgrade Homebrew Portable Ruby! brew install --cask --appdir/Applications docker> Downloading https://ghcr.io/v2/homebrew/portable-ruby/portable-ruby/blobs/sha256:0cb1cc7af109437fe0e020c9f3b7b95c3c709b140bde9f991ad2c143…...

Android 实现MQTT客户端,用于门禁消息推送

添加MQTT依赖 implementation ‘org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.2.2’ implementation ‘org.eclipse.paho:org.eclipse.paho.android.service:1.1.1’ 在Manifest清单文件中添加服务 <service android:name"org.eclipse.paho.android.service.Mq…...

跨境电商的广告推广怎么做?7个方法

在跨境电商竞争日趋激烈的市场环境下&#xff0c;跨境电商店铺引流成了制胜关键点。这里给大家分享一套引流推广的方法。 一、搜索引擎营销推广 搜索引擎有两个最大的优点是更灵活、更准确。搜索引擎营销的目标定位更精确&#xff0c;且不受时间和地理位置上的限制&#xff0…...

《Java-SE-第二十八章》之CAS

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水平很有限&…...

git之reflog分析

写在前面 本文一起看下reflog命令。 1&#xff1a;场景描述 在开发的过程中&#xff0c;因为修改错误&#xff0c;想要通过git reset命令恢复到之前的某个版本&#xff0c;但是选择提交ID错误&#xff0c;导致多恢复了一个版本&#xff0c;假定&#xff0c;该版本对应的内容…...

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(18)-Fiddler如何接口测试,妈妈再也不担心我不会接口测试了

1.简介 Fiddler最大的优势在于抓包&#xff0c;我们大部分使用的功能也在抓包的功能上&#xff0c;fiddler做接口测试也是非常方便的。 领导或者开发给你安排接口测试的工作任务&#xff0c;但是没有给你接口文档&#xff08;由于开发周期没有时间出接口文档&#xff09;&…...

Oracle open JDK和 Amazon Corretto JDK的区别

Oracle OpenJDK和Amazon Corretto JDK都是基于Java开放源代码项目的发行版&#xff0c;它们之间有一些区别。 1. 来源&#xff1a;Oracle OpenJDK是由Oracle公司领导和支持的&#xff0c;它是Java的官方参考实现之一。而Amazon Corretto JDK是由亚马逊公司开发和支持的&#xf…...

Spark写PGSQL分区表

这里写目录标题 需求碰到的问题格式问题分区问题&#xff08;重点&#xff09; 解决完整代码效果 需求 spark程序计算后的数据需要往PGSQL中的分区表进行写入。 碰到的问题 格式问题 使用了字符串格式&#xff0c;导致插入报错。 val frame df.withColumn("insert_t…...

Git 命令行登录

有时候登录命令行版本的git会出现这个错误 1remote: Support for password authentication was removed on August 13, 2021. 2remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for …...

性能分析记录

4实例压测TPS浮动在200-300 1.TPS浮动200-300&#xff0c;ART浮动的可能性是10-20ms&#xff0c;链路复杂是可接受的&#xff0c;链路简单则需要分析原因。 1&#xff09;缓存没命中&#xff0c;对某些账号缓存没命中&#xff0c;或缓存失效后导致隔段时间耗时升高。 2&…...

Java反射学习(大综合)

第一天 Java反射及动态代理... 2 一、 Java反射... 2 1、什么是反射&#xff1a;... 2 2、反射的原理... 2 3、反射的优缺点&#xff1a;... 2 4、反射的用途&#xff1a;... 3 5、反射机制常用的类&#xff1a;... 3 1、获得Class&#xff1a;主要有三…...

Vite+Vue3 开发UI组件库并发布到npm

一直对开源UI组件库比较感兴趣&#xff0c;摸索着开发了一套&#xff0c;虽然还只是开始&#xff0c;但是从搭建到发布这套流程基本弄明白了&#xff0c;现在分享给大家&#xff0c;希望对同样感兴趣的同学有所帮助。 目前我的这套名为hasaki-ui的组件库仅有两个组件&#xff0…...

vue- form动态表单验证规则-表单验证

前言 以element官网的form表单的-动态增减表单项为例讲解表单验证规则 动态的功能就是v-model配合push v-for 便利来实现的 我们需要熟知2个知识点prop表单验证需要跟v-model绑定的值是一样的&#xff0c; 如果是一个数组便利的表单&#xff0c;那就需要绑定这个数组每一项…...

FPGA学习—通过数码管实现电子秒表模拟

文章目录 一、数码管简介二、项目分析三、项目源码及分析四、实现效果五、总结 一、数码管简介 请参阅博主以前写过的一篇电子时钟模拟&#xff0c;在此不再赘述。 https://blog.csdn.net/qq_54347584/article/details/130402287 二、项目分析 项目说明&#xff1a;本次项目…...

区块链媒体发稿:区块链媒体宣发常见问题解析

据统计&#xff0c;由于区块链应用和虚拟货币的兴起&#xff0c;越来越多媒体对区块链领域开展报导&#xff0c;特别是世界各国媒体宣发全是热火朝天。但是&#xff0c;随着推卸责任媒体宣发的五花八门&#xff0c;让很多人因而上当受骗&#xff0c;乃至伤害一大笔资产。身为投…...

openGauss学习笔记-28 openGauss 高级数据管理-NULL值

文章目录 openGauss学习笔记-28 openGauss 高级数据管理-NULL值28.1 IS NOT NULL28.2 IS NULL openGauss学习笔记-28 openGauss 高级数据管理-NULL值 NULL值代表未知数据。无法比较NULL和0&#xff0c;因为它们是不等价的。 创建表时&#xff0c;可以指定列可以存放或者不能存…...

Pixel Epic · Wisdom Terminal 构建AI Agent:自主任务规划与执行框架

Pixel Epic Wisdom Terminal 构建AI Agent&#xff1a;自主任务规划与执行框架 1. 为什么需要自主规划的AI Agent 想象一下&#xff0c;你有一个能听懂复杂指令、自动拆解任务、调用各种工具完成工作的数字助手。它不仅能回答简单问题&#xff0c;还能处理"帮我分析上季…...

Python如何在异步中运行同步代码_使用loop.run_in_executor处理计算

async函数中不可直接调用同步CPU密集型代码&#xff0c;因其会阻塞事件循环导致异步失效&#xff1b;应使用run_in_executor配合线程池或进程池执行&#xff0c;注意参数传递、异常处理与资源清理。为什么不能直接在 async 函数里调用同步 CPU 密集型代码因为 async 函数运行在…...

【DAY37】IMX6ULL:LCD 显示与 SPI 通信入门详解

LCDLCD 全称是 Liquid Crystal Display&#xff0c;也就是液晶显示器分辨率在IMUX6ULL中&#xff0c;屏幕分辨率为&#xff1a;800 * 480LCD 显示器都是由一个一个的像素点组成&#xff0c;像素点就类似一个灯(在 OLED 显示器 中&#xff0c;像素点就是一个小灯)&#xff0c;这…...

前端开发转鸿蒙开发1-父子组件传值差异

1. 页面结构与多组件写法一个 .ets 文件里可以写 多个组件&#xff1a;一个 Entry 页面组件 若干普通子组件。Entry 有且只能有一个&#xff0c;表示页面入口。子组件只加 Component&#xff0c;不加 Entry。2. 响应式状态&#xff1a;State作用&#xff1a;数据改变 → 页面自…...

天融信防火墙双机热备-备防火墙替换 NGFW4000G-UF(TG-56008-YL)

1.拿到空配置备机&#xff0c;PC连接防火墙设备eth0口&#xff08;接口默认地址192.168.1.254/24&#xff09;&#xff0c;PC网口配置和设备同网段地址如192.168.1.253/24 2.PC去ping192.168.1.254地址是否能通&#xff0c;通则下一步。 3.打开浏览器输入https://192.168.1.25…...

PyTorch 2.8通用镜像效果展示:Llama3+Phi-3-Vision图文理解→视频描述生成

PyTorch 2.8通用镜像效果展示&#xff1a;Llama3Phi-3-Vision图文理解→视频描述生成 1. 开箱即用的深度学习环境 PyTorch 2.8通用深度学习镜像为开发者提供了一个即开即用的强大环境。基于RTX 4090D 24GB显卡和CUDA 12.4深度优化&#xff0c;这个镜像让复杂的AI开发变得简单…...

黑客入门3个月实战计划(附每日任务),新手照做就能从0到1

前言 新手学黑客&#xff0c;没有计划很容易“三天打鱼两天晒网”。本文给你制定一份3个月实战计划&#xff0c;分阶段拆解每日任务&#xff0c;从零基础到能独立做基础渗透测试&#xff0c;每天1-2小时&#xff0c;照做就能完成目标。全程合规&#xff0c;只在靶场练习。 一、…...

知识资产沉睡率高达68%?重构AI原生研发知识平台的4步激活法,立即见效

第一章&#xff1a;知识资产沉睡率的现状与AI原生重构必要性 2026奇点智能技术大会(https://ml-summit.org) 企业知识资产正经历一场静默的流失危机。据Gartner 2025年《组织记忆健康度报告》显示&#xff0c;平均47%的内部文档、会议纪要、代码注释、实验日志和领域专家隐性经…...

我的个人AI知识管家:用DeepSeek R1和ChromaDB给本地文档做个“搜索引擎”

我的个人AI知识管家&#xff1a;用DeepSeek R1和ChromaDB给本地文档做个"搜索引擎" 1. 为什么你需要一个私人知识库&#xff1f; 每天我们都在处理海量的信息——工作文档、学习笔记、技术资料、会议记录...这些散落在电脑各处的文件就像一座未经开采的金矿。你是否遇…...

IC670PBI001总线接口单元

IC670PBI001 是 GE Fanuc Field Control 系列中的一款 Profibus 总线接口单元&#xff08;BIU&#xff09;&#xff0c;主要用于连接PLC与远程I/O模块&#xff0c;实现数据通信与系统控制&#xff0c;是分布式I/O系统中的核心组件。1、作为系统核心接口单元&#xff0c;实现PLC…...