js基础--如何判断浏览器标签页是隐藏或者显示状态

Kosmos 发布于2019-08-23 14:45 / 936人阅读

摘要：欢迎访问我的个人博客前言在工作中我们可能会遇到这样的需求，当浏览器切换到别的标签页或着最小化时，我们需要暂停页面上正在播放的视频或者音乐，这个需求就会用到我下面要说的这个知识点具体用法浏览器标签页隐藏或者显示时会改变和的值，我们可以通过这个

欢迎访问我的个人博客：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资源地址：js基础--如何判断浏览器标签页是隐藏或者显示状态

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

邮箱：wuxiaolong802@163.com

GPU云服务器云服务器 js判断后台数据显示隐藏 js 如何隐藏标签 js显示隐藏 js 设置隐藏显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101078.html

vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

wqj97 2019-08-21 17:38 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

FingerLiu 2019-08-01 18:01 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

MadPecker 2019-08-29 13:49 评论0 收藏0
Node - 内存管理和垃圾回收

摘要：的内存限制和垃圾回收机制内存限制内存限制一般的后端语言开发中，在基本的内存使用是没有限制的。的内存分代目前没有一种垃圾自动回收算法适用于所有场景，所以的内部采用的其实是两种垃圾回收算法。前言从前端思维转变到后端，有一个很重要的点就是内存管理。以前写前端因为只是在浏览器上运行，所以对于内存管理一般不怎么需要上心，但是在服务器端，则需要斤斤计较内存。 V8的内存限制和垃圾回收机...

joyqi 2019-08-23 17:17 评论0 收藏0
Django 学习小组：博客开发实战第三周教程——文章列表分页和代码语法高亮

摘要：本教程内容已过时，更新版教程请访问博客开发入门教程。当分页较多时，总是显示当前页及其前几页和后几页的页码教程中使用的是两页，其他页码用省略号代替。本教程内容已过时，更新版教程请访问： django 博客开发入门教程。摘要：前两期教程我们实现了博客的 Model 部分，以及 Blog 的首页视图 IndexView，详情页面 DetailView，以及分类页面 CategoryVi...

Luosunce 2019-07-25 10:28 评论0 收藏0