关键词：
简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。
这个事件可以满足一些用户需求，比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询，还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。
这个事件已经得到现代浏览器广泛的支持，不过一些老版本的浏览器需要加相应的前缀。
| Chrome (Webkit) | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|
| 13前缀webkit 33无需前缀 |
10前缀moz 18无需前缀 |
10前缀ms | 12.10 | 最新的测试已经支持 |
注：Opera 12.10浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.
document的可见性属性
Page Visibility (Second Edition)中定义了2个只读的document属性：hidden和visibilityState。
其中document.hidden是一个布尔值，简单的表示标签页显示或者隐藏。而document.visibilityState属性更为详细，目前有四个可能的值：
visible: 页面内容至少部分可见。这意味着在实际情况中，该网页是一个非最小化窗口的可见标签页。hidden: 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。prerender: 网页内容被预渲染并且用户不可见。unloaded: 如果文档被卸载，那么这个值将被返回。
一般情况下我们使用document.hidden就能满足通常的需求。
document.addEventListevent(‘vibisilitychange‘,function()
document.title = document.hidden ? ‘你快回来，我一个个人承受不来‘ ：‘我在呢‘
);
【vue】利用visibilitychange监听页面显示和隐藏
参考技术AAPP内嵌H5,H5页面可见性改变事件:visibilitychange功能类似小程序的onshow方法。 查看详情
jquery通过visible来判断标签是否显示或隐藏
if($(".spnTotal").is(":visible")==false) { alert(‘隐藏‘); } else { alert(‘显示‘); } 查看详情
h5页面可见性改变(visibilitychange)事件
H5有一个事件叫 visibilitychange ，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息。如下：document.addEventListener("visibilitychange",()=>{if(document.hidden){//页面被挂起}else{//页面呼出}});但是呢，手Q不会... 查看详情
在 tabControl 中隐藏和显示 TabPages
...:55【问题描述】：我正在尝试根据用户的选择显示或隐藏标签页。如果用户选择性别为男性，则应在标签页“男性”中显示男性表单，如果用户选择女性，则应在下一个标签页“女性”中显示类似的下一个表单我尝试过使用tabCon... 查看详情
前端使用js和jquery显示隐藏标签
参考技术A一.使用JQuery使用二.jquery判断元素是否隐藏三.使用JS隐藏和显示a.隐藏后释放占用的页面空间通过设置display属性可以使div隐藏后释放占用的页面空间.style="display:none;"b.隐藏后仍占有页面空间，显示空白div的visibility可以... 查看详情
vue实现图片隐藏判断支付成功后怎么显示图片
参考技术Avue实现图片隐藏判断支付成功后显示图片方法如下。上面img标签src里直接写默认图片的相对路径名是显示不出来的；图片资源，我们要用require请求图片资源再放到src中。 查看详情
idea标签页分布多行，idea打开的标签页多行排列，不隐藏
IDEA点击window->editortabs->configureeditortabs 查看详情
idea标签页分布多行，idea打开的标签页多行排列，不隐藏
IDEA点击window->editortabs->configureeditortabs 查看详情
idea标签页分布多行，idea打开的标签页多行排列，不隐藏
IDEA点击window->editortabs->configureeditortabs 查看详情
怎样判断jquery元素是不是显示与隐藏
判断jQuery元素是否显示与隐藏的方法如下：1、使用CSS属性vardisplay=$('#id').css('display');if(display=='none') alert("被你发现了，我是隐藏的啦！");2、使用jquery内置选择器假设我们页面有这么个标签,<div... 查看详情
jquery元素是不是显示与隐藏的判断
判断方法：1、使用CSS属性vardisplay=$('#id').css('display');if(display=='none') alert("被你发现了，我是隐藏的啦！");2、使用jquery内置选择器假设我们页面有这么个标签,<divid="test"><p>仅... 查看详情
jq元素标签刚开始显示一部分点击展开全部显示完全
最开始给p标签一个固定高度，设置超出隐藏。在jq中判断p元素的css是不是隐藏，隐藏的时候点击让其显示，高度自适应（恢复到原来应有的高度），否则则隐藏，恢复到固定高度 <!DOCTYPEhtml><htmllang="zh"> <head>... 查看详情
js监听浏览器各个标签间的切换
...不知道这个是怎么做的，最近查了一些资料才发现有一个visibilitychange事件就可以搞定，这里将介绍一下页面可见性（PageVisibility）API的简单应用。 visibilitychange事件介绍简单的说，当用户最小化网页或移动到另一个标签时，AP... 查看详情
用jquery怎么实现点击显示，再一次点击隐藏
...先获取a标签的dom并给它加一个click事件，在click的回调中判断div是否为隐藏状态，是的话就隐藏div否则就显示div：3、最后来到编辑器右侧的浏览器，可以看到此时div是显示的：4、点击一下，div就会隐藏了，可以来回点击切换显... 查看详情
为啥我的 React 显示/隐藏标签没有正确更新？
】为啥我的React显示/隐藏标签没有正确更新？【英文标题】：WhyismyReactshow/hidelabelnotupdatingcorrectly?为什么我的React显示/隐藏标签没有正确更新？【发布时间】：2018-03-2002:59:30【问题描述】：标签是可编辑的：当点击标签时，输入... 查看详情
html隐藏显示控件判断是否控件隐藏
判断控件是否隐藏$(‘#select_modelid‘).is(‘:hidden‘)设置隐藏$(‘#select_modelid‘).hide();设置可见$(‘#modelid‘).show();在控件上设置隐藏<inputtype="hidden"id="modelidOld"/> 查看详情
如何显示内容查看标签页的标签
】如何显示内容查看标签页的标签【英文标题】：HowtodisplaycontentViewoverthetabsoftabbedpage【发布时间】：2021-03-1211:08:21【问题描述】：我正在处理一个有4个标签的标签页。在第二个选项卡中，我有一个显示名称列表。我创建了一个... 查看详情
js判断display隐藏显示
//判断是否为隐藏(css)样式 functionisHide(obj) { varret=obj.style.display=== "none" || obj.style.display=== "" || 查看详情