当前页面是否可见
时间:2022-07-23
本文章向大家介绍当前页面是否可见,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
判断当前页面是否可见。
使用Document.hidden
属性判断当前页面是否可见。
const isBrowserTabFocused = () => !document.hidden;
例子
// true
isBrowserTabFocused();
扩展阅读
Document.hidden
属性来自于浏览器Page Visibility API
。
该API
的设计目的是为了方便开发者监听页面的可见性的变化,包括如下组成部分:
Document.hidden
为一个只读布尔值,表示当前页面是否被可见。
document.visibilityState
为一个只读字符串,表示页面当前的可见性状态,共有三个可选值:
- hidden:页面不可见
- visible:页面部分可见
- prerender:页面即将或正在渲染,处于不可见状态
当满足如下条件之一,为hidden
:
- 浏览器窗口最小化
- 当前浏览器
Tab
未处于激活状态 - 浏览器将要卸载(unload)页面
- 移动端设备触发触发锁屏
除此之外,页面露出任何部分都属于visible
。
prerender
存在于支持预渲染
的浏览器。可以在用户不可见的状态下,预先把页面渲染出来,等到用户要浏览的时候,直接展示渲染好的网页。
visibilitychange事件
当document.visibilityState
属性发生变化会触发visibilitychange
事件。
document.addEventListener('visibilitychange', function () {
if (document.visibilityState === 'hidden') {
console.log('当前页面不可见');
}
if (document.visibilityState === 'visible') {
console.log('当前页面可见');
}
});
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Ceph RGW配置Nginx代理出现S3Error: 403 (Forbidden)
- OmniDiskSweeper清理系统文件
- 【Kubernetes】通过ConfigMap修改容器的DNS
- 【Tensorflow 2.x】检验MKL
- kubernetes dashboard insecure配置
- seqtk抽取reads
- Version of Delve is too old for this version of Go【Goland Debug】报错
- python之turtle模块-黄金螺线
- python之turtle模块-生化危机
- Python之turtle模块-饼状图
- python之turtle模块-弧线
- Python之turtle模块-画圈圈
- Python之turtle模块-正多边形
- synchronized 锁的原理
- Centos: 添加一个IP地址