js监测页面可见性

监测切换页面

  • 检测页面的可见性状态
    • document.visibilityState:
    • document.hidden
    • visibilitychange 事件
  • js 检测页面切换至别的应用

检测页面的可见性状态

在JavaScript中,你可以使用Page Visibility API来检测页面的可见性状态。这个API提供了一组接口,允许你获取页面的可见性状态,并监听其变化。(在手机端好用,PC端切换浏览器标签页/窗口时也好用,但是切换应用不行)

document.visibilityState:

这个属性返回一个字符串,表示文档的可见性状态。可能的值有:

  1. visible : 页面是可见的;
  2. hidden : 页面是不可见的;
  3. “prerender”:页面正在被预渲染(这个状态在某些浏览器中可能不受支持)。

document.hidden

这是一个布尔值,true 表示页面不可见,false 表示页面可见。它是 document.visibilityState 的一个简便属性,只检查页面是否可见或不可见。

visibilitychange 事件

你可以监听这个事件来检测页面可见性状态的变化。

// 获取初始的可见性状态
function handleVisibilityChange() {if (document.hidden) {console.log("页面现在是不可见的");// 在这里执行页面不可见时的操作,比如暂停视频播放、减少资源消耗等} else {console.log("页面现在是可见的");// 在这里执行页面可见时的操作,比如恢复视频播放、更新内容等}
}// 在页面加载时检查一次可见性状态
handleVisibilityChange();// 添加一个事件监听器来监听可见性状态的变化
document.addEventListener("visibilitychange", handleVisibilityChange, false);

js 检测页面切换至别的应用

在JavaScript中,检测用户是否将页面切换至别的应用(即页面失去焦点或浏览器标签页/窗口失去焦点)通常可以通过监听 blur 事件来实现。blur 事件会在元素(在这种情况下是 window 对象)失去焦点时触发。对于开发者来说,在页面切换到控制台时也会触发失焦,反之也会触发focus

// 当页面失去焦点时执行的函数
function onBlur() {console.log("页面已失去焦点");// 在这里可以添加你想要执行的代码,比如暂停视频播放、保存草稿等
}// 当页面获得焦点时执行的函数(可选)
function onFocus() {console.log("页面已获得焦点");// 在这里可以添加你想要执行的代码,比如恢复视频播放等
}// 为 window 对象添加 blur 和 focus 事件监听器
window.addEventListener('blur', onBlur);
window.addEventListener('focus', onFocus);

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

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

相关文章

微信小程序开发设置支持scss文件

在微信小程序开发中,默认是不支持scss文件的,创建文件的时候,css文件默认创建的是wxss后缀结尾的,但是用习惯了scss的怎么办呢? 首先找到project.config.json文件,打开文件在setting下设置useCompilerPlug…

Matlab Steger提取条纹中心(非极大值抑制)

文章目录 一、简介二、实现代码三、实现效果一、简介 由于在确定条纹的ROI区域之后,会计算出多个条纹中心坐标,因此这里就需要对其进行则优选择,毕竟条纹只有一条,这最简单的方式就是使用非极大值抑制,即选择每一行/列最好的条纹中心。 二、实现代码 Hessian2D.m function…

Apache Hadoop YARN框架概述

一、YARN产生和发展简史 1.1背景 数据、程序、运算资源(内存、CPU)三者组在一起,才能完成数据的计算处理过程。在单机环境下,三者之间协调配合不是太大问题。为了应对海量数据的处理场景,Hadoop软件出现并提供了分布…

计网C1C2C3答案自用

Chapter 1 Computer Network and the Internet Review Questions Solution R1. What is the difference between a host and end system? List several different types of end system. Is a Web server an end system? There is no difference between a host and an end …

江科大STM32入门——UART通信笔记总结

wx:嵌入式工程师成长日记 1、简介 简单双向串口通信有两根通信线(发送端TX和接收端RX)TX与RX要交叉连接当只需单向的数据传输时,可以只接一根通信线当电平标准不一致时,需要加电平转换芯片 传输模式:全双工;时钟&…

KG-CoT:基于知识图谱的大语言模型问答的思维链提示

一些符号定义 知识图谱实体数量: n n n 知识图谱中关系类型数量: m m m 三元组矩阵: M ∈ { 0 , 1 } n n m \textbf{M} \in \{0, 1\}^{n \times n \times m} M∈{0,1}nnm, M i j k 1 M_{ij}^k 1 Mijk​1则说明实体 i i i和实…

面试加分项:Android Framework PMS 全面概述和知识要点

在Android面试时,懂得越多越深android framework的知识,越为自己加分。 目录 第一章:PMS 基础知识 1.1 PMS 定义与工作原理 1.2 PMS 的主要任务 1.3 PMS 与相关组件的交互 第二章:PMS 的核心功能 2.1 应用安装与卸载机制 2.2 应用更新与版本管理 2.3 组件管理 第…

【简单了解一下深度学习】

深度学习是机器学习的一个子领域,它主要利用多层神经网络来学习数据的高层特征和抽象表示。以下是关于深度学习的一些基础知识和概念: 基本概念 神经网络:深度学习的核心是神经网络,它由多个层次的神经元组成。每个神经元接收输…

超完整Docker学习记录,Docker常用命令详解

前言 关于国内拉取不到docker镜像的问题,可以利用Github Action将需要的镜像转存到阿里云私有仓库,然后再通过阿里云私有仓库去拉取就可以了。 参考项目地址:使用Github Action将国外的Docker镜像转存到阿里云私有仓库 一、Docker简介 Do…

AIGC 新浪潮|Story CN meetups 将于 1 月 10-14 日举办!

随着 Web3 行业发展进入全新阶段,与生成式人工智能(AIGC)技术融合正在创造潜力新星项目。也是目前的互联网生态下,任何普通民众都有权利创作高质量的音乐、艺术、散文和视频内容,带来了用户生成内容(UGC&am…

Python基于YOLOv8和OpenCV实现车道线和车辆检测

使用YOLOv8(You Only Look Once)和OpenCV实现车道线和车辆检测,目标是创建一个可以检测道路上的车道并识别车辆的系统,并估计它们与摄像头的距离。该项目结合了计算机视觉技术和深度学习物体检测。 1、系统主要功能 车道检测&am…

设计模式学习笔记——结构型模式

文章目录 适配器模式 Adapter适用场景UML 桥接模式 Bridge适用场景UML 组合模式 Composite装饰模式 Decorator外观模式 Facade享元模式 Flyweight代理模式 Proxy 适配器模式 Adapter 适用场景 希望使用某个类, 但是其接口与其他代码不兼容时, 可以使用…

rust如何在类中保存一个闭包,它可以捕获类自己?

首先这个为什么在 Rust 中这么难实现? 我们得承认一个残酷的现实:Rust 不是 C。在 C 中,可以随心所欲地使用引用,编译器不会过多干涉。但在 Rust 中,编译器会像严厉的监管者一样盯着我们的每一个动作,生怕…

黑马跟学.苍穹外卖.Day04

黑马跟学.苍穹外卖.Day04 苍穹外卖-day04课程内容1. Redis入门1.1 Redis简介1.2 Redis下载与安装1.2.1 Redis下载1.2.2 Redis安装 1.3 Redis服务启动与停止1.3.1 服务启动命令1.3.2 客户端连接命令1.3.3 修改Redis配置文件1.3.4 Redis客户端图形工具 2. Redis数据类型2.1 五种常…

SOLID原则学习,开闭原则

文章目录 1. 定义2. 开闭原则的详细解释3. 实现开闭原则的方法4. 总结 1. 定义 开闭原则(Open-Closed Principle,OCP)是面向对象设计中的五大原则(SOLID)之一,由Bertrand Meyer提出。开闭原则的核心思想是…

filebeat、kafka

elk的架构 es数据库:非关系型数据库,json格式 logstash:收集日志 kibana:图形化的工具 ↓ 以上三种结合起来即为日志收集系统 filebeat 作用:filebeat是一款轻量级的日志收集工具,不依赖java环境&…

Qt重写webrtc的demo peerconnection

整个demo为: 可以选择多个编码方式: cmake_minimum_required(VERSION 3.5)project(untitled LANGUAGES CXX) set(CMAKE_CXX_STANDARD 20) set(CMAKE_INCLUDE_CURRENT_DIR ON)set(CMAKE_AUTOUIC ON) set(CMAKE_AUTOMOC ON) set(CMAKE_AUTORCC ON)set(CMA…

【Notepad++】Notepad++如何删除包含某个字符串所在的行

Notepad如何删除包含某个字符串所在的行 一,简介二,操作方法三,总结 一,简介 在使用beyoundcompare软件进行对比的时候,常常会出现一些无关紧要的地方,且所在行的内容是变化的,不方便进行比较&…

python无需验证码免登录12306抢票 --selenium(2)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 [TOC](python无需验证码免登录12306抢票 --selenium(2)) 前言 提示:这里可以添加本文要记录的大概内容: 就在刚刚我抢的票:2025年1月8日…

CSS 盒模型

盒模型 CSS盒模型是网页布局的核心概念之一,它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范,每个HTML元素都被视为一个矩形盒子,这个盒子由以下四个部分组成: 内容区(Content area&#xff…