js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn
前言
在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求就会用到我下面要说的这个知识点:
- document.visibilityState
- document.hidden
- visibilitychange
具体用法
浏览器标签页隐藏或者显示时会改变document.visibilityState和document.hidden的值,我们可以通过visibilitychange这个事件去监听他们状态值的变化;
// 我在这里建议大家亲自试试以下代码
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
console.log(document.hidden);
});
上面代码中:
- document.visibilityState有两个值,分别为hidden和visible,hidden表示标签页被隐藏了,visible则反之;
- document.hidden也有两个值,分别为true和false,true表示标签页被隐藏了,false则反之;
我的github资源地址:https://github.com/js基础--浏览器标签页隐藏或显示状态 visibility详解.md
我的个人博客地址:http://www.xiaolongwu.cn
我的博客园地址:http://www.cnblogs.com/wuxiaolong555
我的CSDN博客地址:https://blog.csdn.net/wxl1555
如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。
邮箱:wuxiaolong802@163.com
js基础--浏览器标签页隐藏或显示状态 visibility详解的更多相关文章
- JS监听浏览器标签页的显示与隐藏
/** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...
- 为网站设置icon图标用于显示在浏览器标签页最左侧
icon图标,想必大家对它并不陌生吧,在浏览网页时会看到浏览器标签页的最左侧会有一个小图标,这个正是icon图标.本例为大家介绍下如何为网站设置这个图标 这句话起什么作用 ?复制代码 代码如下: &l ...
- DevExpress navBarControl 和 xtraTabbedMdiManager实现浏览器标签页效果
一:navBarControl 属性设置 工具箱中的Navigation & Layout选项卡下找到NavBarControl,拖到窗体中 工具箱中添加2个imageCollection.分 ...
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- js设置控件的隐藏与显示的两种方法
js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...
- selenium WebDriver 对浏览器标签页的切换
关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...
- Html中 <tr> 标签的隐藏与显示
TR标签的隐藏与显示:block(显示)和none(隐藏) <tr style="display:none"> <tr id="sample" ...
- Vue 使用Spread.js没有层级关系(隐藏与显示)
Vue 使用Spread.js没有层级关系(隐藏与显示) 1.vue会给元素加一个监控属性.去掉 spread.js没有层级关系过半是column中值的问题
- idea标签页多行显示+设置标签页上限
idea标签页多行显示+设置标签页上限 Setting--Editor--General--Editor Tabs
随机推荐
- 你可能不知道的5种 CSS 和 JS 的交互方式
翻译人员: 铁锚 翻译日期: 2014年01月22日 原文日期: 2014年01月20日 原文链接: 5 Ways that CSS and JavaScript Interact That You ...
- 《java入门第一季》之面向对象(代码块一网打尽)
上一篇里面对代码块做出介绍,这里给出一个面试题,加深印象. 如有毁三观的地方,请见谅.拒绝黄赌毒 写程序的执行结果. class Student { static { System.out.print ...
- ERP-非财务人员的财务培训教(三)------公司/部门预算编制与评价
一.预算管理中的行为问题 二.编制预算中的问题 三.经营计划与预算制度 第一节 经营目标 第二节 预算编制的内容及说明 第三节 推行预算制度的组织 第 ...
- myBatis源码学习之SqlSessionFactoryBuilder
SqlSessionFactoryBuilder通过类名就可以看出这个类的主要作用就是创建一个SqlSessionFactory,通过输入mybatis配置文件的字节流或者字符流,生成XMLConfi ...
- Unity的资源管理
本篇文章翻译自Unity的官方文档,原文地址:https://docs.unity3d.com/Manual/BehindtheScenes.html Unity自动导入资源的同时为你管理这些资源产生 ...
- Flask-email 发送邮件的配置,发送附件的方法,以及os.environ.get('MAIL_USERNAME')为None的解决办法
一.发送邮件的配置 在学习flask-mail来发送电子邮件的时候遇到了一些问题,其实都是些小问题,现在记录下来以便于以后查看. 1.首先flask-mail的安装 pip install flask ...
- Numpy快速入门——shape属性,你秒懂了吗
前言 对于学习NumPy(Numeric Python),首先得明确一点是:Numpy 是用来处理矩阵数组的. shape 属性 对于shape函数,官方文档是这么说明: the dimensions ...
- 设置eclipse全局编码格式
window--preference--general--workspace--text file encoding
- 第1章-Struts2 概述 --- Struts2和MVC
(一)Struts2和MVC的关系图: (1)控制器---FilterDispatcher 用户请求首先达到前段控制器(FilterDispatcher).FilterDispatcher负责根据用户 ...
- 第四章:4.2MySQL 权限系统介绍
4.2.1 权限系统简介 MySQL 的权限系统在实现上比较简单,相关权限信息主要存储在几个被称为granttables 的系统表中,即: mysql.User,mysql.db,mysql.Host ...