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>

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

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

相关文章

SpringBoot + minio实现分片上传、秒传、续传

什么是minio MinIO是一个基于Go实现的高性能、兼容S3协议的对象存储。它采用GNU AGPL v3开源协议&#xff0c;项目地址是https://github.com/minio/minio。 引用官网&#xff1a; MinIO是根据GNU Affero通用公共许可证v3.0发布的高性能对象存储。它与Amazon S3云存储服务兼容…

C++设计模式之访问者模式

C访问者设计模式 文章目录 C访问者设计模式什么是设计模式什么是访问者设计模式该模式有什么优缺点优点缺点 如何使用 什么是设计模式 设计模式是一种通用的解决方案&#xff0c;用于解决特定的一类问题。它是一种经过验证的代码组织方式&#xff0c;可以帮助开发人员更快地实…

Linux——平台设备及其驱动

目录 前言 一、平台设备 二、平台驱动 三、平台驱动简单实例 四、 电源管理 五、udev 和驱动的自动加载 六、使用平台设备的LED 驱动 七、自动创建设备节点 前言 要满足 Linux 设备模型&#xff0c;就必须有总线、设备和驱动。但是有的设备并没有对应的物理总线&#x…

互联网被裁的程序员,未来有什么方向呢?

做了一份程序员“失业”后的自救方向汇总&#xff1a; 接下来挨个聊聊。 产品经理 都说产品和技术总是相爱相杀&#xff0c;不过产品和技术的关系也是最近的。 无论是产品转技术&#xff0c;还是技术转产品&#xff0c;相对来说都是比较容易的&#xff0c;很多底层逻辑是互通…

后端通过CorsRegistry对象配置了全局跨域,但是前端仍然报CORS跨域错误

后端通过CorsRegistry配置了全局跨域&#xff0c;但是前端仍然报CORS跨域错误 问题背景 在实现登录功能时&#xff0c;我先是通过CorsRegistry配置了全局跨域&#xff0c;然后配置了一个登录拦截器后前端就报错CORS跨域错误 问题原因 前置知识 首先我们来了解一下什么是跨域错误…

无脑入门pytorch系列(一)—— nn.embedding

本系列教程适用于没有任何pytorch的同学&#xff08;简单的python语法还是要的&#xff09;&#xff0c;从代码的表层出发挖掘代码的深层含义&#xff0c;理解具体的意思和内涵。pytorch的很多函数看着非常简单&#xff0c;但是其中包含了很多内容&#xff0c;不了解其中的意思…

手游联运系统有什么优势?

手游联运系统有许多优势&#xff0c;其中一些重要的优势包括&#xff1a; 1、游戏联运 手游联运系统可以将多款手游整合在一起&#xff0c;形成游戏联运平台&#xff0c;提供给玩家更多游戏选择&#xff0c;增加游戏的多样性和趣味性。 2、推广渠道管理 手游联运系统可以集…

Vuex:Vue.js应用程序的状态管理模式

介绍 在Vue.js应用程序中&#xff0c;随着项目复杂度的增加&#xff0c;组件之间的数据共享和管理变得困难。为了解决这个问题&#xff0c;Vue.js提供了一个名为Vuex的状态管理模式。Vuex可以帮助我们更有效地组织、管理和共享应用程序的状态。 什么是Vuex&#xff1f; Vuex…

网络安全策略应包含哪些?

网络安全策略是保护组织免受网络威胁的关键措施。良好的网络安全策略可以确保数据和系统的保密性、完整性和可用性。以下是一个典型的网络安全策略应包含的几个重要方面&#xff1a; 1. 强化密码策略&#xff1a;采用强密码&#xff0c;要求定期更换密码&#xff0c;并使用多因…

Java类集框架(一)

目录 1.Collection集合接口 2.List 接口 (常用子类 ArrayList ,LinkedList,Vector) 3.Set 集合 接口(常用子类 HashSet LinkedHashSet,TreeSet) 4.集合输出(iterator , Enumeration) 1.Collection集合接口 Collection是集合中最大父接口&#xff0c;在接口中定义了核心的…

Java设计模式-解释器模式

解释器模式 1.解释器模式 解释器模式&#xff0c;给定一个语言&#xff0c;定义它的文法的一种表示&#xff0c;并定义一个解释器&#xff0c;这个解释器使用该表示来解释语言中的句子。 其实解释器模式很简单的&#xff0c;就是一个翻译的过程&#xff0c;就像翻译软件&…

vue中各种混淆用法汇总

✨在生成、导出、导入、使用 Vue 组件的时候&#xff0c;像我这种新手就会常常被位于不同文件的 new Vue() 、 export default{} 搞得晕头转向。本文对常见用法汇总区分 new Vue() &#x1f4a6;Vue()就是一个构造函数&#xff0c;new Vue()是创建一个 vue 实例。该实例是一个…

Redis - 缓存的双写一致性

概念&#xff1a; 当修改了数据库的数据也要同时更新缓存的数据&#xff0c;缓存和数据库的数据要保持一致 那为什么会有不一致的情况呢&#xff1f; 如果不追求一致性&#xff0c;正常有两种做法 先修改数据库 后删除旧的缓存先删除旧的缓存 再修改数据库 我们以先删除旧的…

html学习9(脚本)

1、<script>标签用于定义客户端脚本&#xff0c;比如JavaScript&#xff0c;既可包含脚本语句&#xff0c;也可通过src属性指向外部文件。 2、JavaScript最常用于图片操作、表单验证及内容动图更新。 3、<noscript>标签用于在浏览器禁用脚本或浏览器不支持脚本&a…

华为数通HCIP-PIM原理与配置

组播网络概念 组播网络由组播源&#xff0c;组播组成员与组播路由器组成。 组播源的主要作用是发送组播数据。 组播组成员的主要作用是接收组播数据&#xff0c;因此需要通过IGMP让组播网络感知组成员位置与加组信息。 组播路由器的主要作用是将数据从组播源发送到组播组成员。…

基于MATLAB长时间序列遥感数据分析(以MODIS数据处理为例)

MATLAB MATLAB是美国MathWorks公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人&#xff0c;控制系统等领域。 [1] MATLAB是matrix&laboratory两个词的组合&#xff0c;意为矩阵工厂&a…

第七篇:k8s集群使用helm3安装Prometheus Operator

安装Prometheus Operator 目前网上主要有两种安装方式&#xff0c;分别为&#xff1a;1. 使用kubectl基于manifest进行安装 2. 基于helm3进行安装。第一种方式比较繁琐&#xff0c;需要手动配置yaml文件&#xff0c;特别是需要配置pvc相关内容时&#xff0c;涉及到的yaml文件太…

Python网站页面开发HTML总结

Python网站页面开发HTML总结 一、HTML基础语法 1.HTML是什么&#xff1f; ●HTML是HyperText Mark-up Language的首字母简写&#xff0c;即超文本标记语言。 ●HTML不是一种编程语言&#xff0c;而是一种标记语言。 ●超文本指的是超链接&#xff0c;标记指的是标签&#xf…

[QT编程系列-38]:数据存储 - SQLite数据库存储与操作

目录 1. SQLite数据库概述 1.1 简介 1.2 SQLite不支持网络连接 1.3 SQLite不需要安装MySQL Server数据库 1.4. SQLite性能 1.5 SQLite支持的数据条目 2. SQLite操作示例 3. QSqlDatabase 4. QSqlQuery 1. SQLite数据库概述 1.1 简介 QT 提供了对 SQLite 数据库的支…

软件测试面试真题 | 什么是PO设计模式?

面试官问&#xff1a;UI自动化测试中有使用过设计模式吗&#xff1f;了解什么是PO设计模式吗&#xff1f; 考察点 《page object 设计模式》&#xff1a;PageObject设计模式的设计思想、设计原则 《web自动化测试实战》&#xff1a;结合PageObject在真实项目中的实践与应用情…