JavaScript 监听页面显示状态
JavaScript状态 显示 页面 监听
2023-09-11 14:22:55 时间
一、visibilitychange
浏览器的标签页被隐藏或显示的时候都会触发 visibilitychange 这个事件。
通过 visibilitychange 这个事件,我们可以在标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询、还可以停止一些诸如轮播等循环的动画效果等等。这些可以节省服务器和本地的开销。
document 中定义了两个只读的属性 hidden 和 visibilityState 用来标识浏览器的当前状态。
- document.hidden 是一个布尔值,用来标识页面是否处于隐藏状态
- document.visibilityState属性更为详细,有4个状态
- visible 页面内容至少部分可见。这意味该页面必须是一个非最小化的前置选项卡(即使全部被遮挡依然是visible,当前选项卡处于前置状态)
- hidden 页面内容不可见
- prerender 网页内容被预渲染并且用户不可见。
- unloaded 如果文档被卸载,那么这个值将被返回。
二、focus & blur
html 页面中,诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作。同样整个页面也有所谓的焦点,它就挂载在 document 元素下。
注意:该方法有个缺陷,就是首次进入页面必须点击一次让元素获取焦点,然后响应事件才能生效。
document.onfocus
和 document.onblur
用来弥补 visibilitychange
事件不能监听到页面被部分遮挡的情况。
相关文章
- 原生JavaScript事件详解
- 第七节:语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等) 图片放大镜 JavaScript-基础 用javascript写原生ajax(笔记) 初遇 Asp.net MVC 数据库依赖缓存那些事儿 前端JS 与 后台C# 之间JSON序列化与反序列化(笔记)
- 【学习笔记43】JavaScript的事件
- 26dwr - DWR中的JavaScript(创造一个与 Java 对象匹配的 Javascript 对象)
- 【JavaScript】重温Javascript继承机制
- 【JavaScript】理解与使用Javascript中的回调函数
- 前端学习之路-CSS介绍,Html介绍,JavaScript介绍
- Sending forms through JavaScript
- 《JavaScript面向对象编程指南》——2.3 基本数据类型
- 《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.2 创建站点
- TypeScript 与 JavaScript 的区别(TypeScript万字基础入门,了解TS,看这一篇就够了)
- 用Javascript获取页面元素的位置
- JavaScript身份证正则表达式,querySelector通过name获取元素,php正则表达式
- javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)
- Javascript中的高阶函数介绍
- JavaScript里面向对象的继承:构造函数"继承"的六种方法
- 华为OD机试 - 异常的打卡记录(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- 华为OD机试 - GPU调度(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- 全栈JavaScript之路( 二十 )HTML5 插入 html标记 ( 二 )insertAdjacentHTML
- 【javascript】Javascript中"||"的妙用
- 深入理解JavaScript系列(43):设计模式之状态模式
- 深入理解JavaScript系列(39):设计模式之适配器模式
- javascript精髓篇之原型链维护和继承.