我们在很多地方都需要判断用户是不是在当前页面,如果离开了当前页面我们需要捕捉到并进行一些操作.

例如:当视频处于播放状态时,我们需要判断用户是不是在当前页面以继续播放,如果离开了我们需要暂停播放。

有两种方法:

  1. document.hidden
  2. document.visibilityState

visibilitychange

选项卡可见或隐藏的时候将触发visibilitychange事件

document.hidden

这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false。

这里我们用选型卡隐藏或显示来改变title当例子

document.addEventListener('visibilitychange', function() {
if (document.hidden) {
document.title = '(つェ⊂)我藏好了哦~ ';
}
else {
document.title = '(*´∇`*) 被你发现啦~ '
}
});

document.visibilityState

visibilityState的值要么是visible (表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden (页面不是当前激活tab页面,或者窗口最小化了。),或者prerender (页面在重新生成,对用户不可见。)

document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
document.title = '(つェ⊂)我藏好了哦~ ';
} else {
document.title = '(*´∇`*) 被你发现啦~ '
}
});

到这就结束了这篇文章,很有意思的小功能

页面的隐藏或显示:hidden与visibilityState的更多相关文章

  1. 前台技术--div的隐藏与显示

    怎样使用页面元素隐藏或显示. HTML为我们提供了两个变量visibility和display visibility:隐藏要元素可是元素所暂用的空间不予释放.也就是说元素隐藏了,可是页面上会流出一片空 ...

  2. 承载地图的div如果隐藏再显示,则定位时会定位到页面左上角

    承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.

  3. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  4. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  5. HTML元素隐藏和显示

    在web前端开发过程中,经常会用到隐藏和显示元素的方法 总结:1.通过JS或Jquery控制          2.通过CSS样式控制 一.Js或jquery (jquery为例) 1.隐藏元素 使用 ...

  6. 隐藏与显示:display/visibility/visible区别

    说到标签的隐藏,你们会用到什么呢?display?visibility?还是服务器控件的visible? 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div ...

  7. 如何通过jquery隐藏和显示元素

    以下几种方式可以隐藏一个元素:1,CSS display的值是none.2,type="hidden"的表单元素.3,宽度和高度都显式设置为0.4,一个祖先元素是隐藏的,该元素是不 ...

  8. 页面可见性判断:document.hidden与visibilitychange事件

    我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放.页面的展示的状态的判断就需要用到html5新增的一个api:document. ...

  9. 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

随机推荐

  1. Java Socket 爬虫

    # 地址 https://github.com/mofadeyunduo/crawler # 前言 1.代码不断优化更新. 2.有建议请留言. # 介绍 1.多线程,基于 ExcutorServcie ...

  2. 【msdn wpf forum翻译】获取当前窗口焦点所在的元素

    原文:[msdn wpf forum翻译]获取当前窗口焦点所在的元素 原文地址: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/6b ...

  3. WPF属性(二)附加属性

    原文:WPF属性(二)附加属性 附加属性是说一个属性本来不属于某个对象,但由于某种需求而被后来附加上,也就是把对象放入一个特定环境后对象才具有的属性就称为附加属性,附加属性的作用就是将属性与数据类型解 ...

  4. Win8Metro(C#)数字图像处理--2.12Sobel边缘检测

    原文:Win8Metro(C#)数字图像处理--2.12Sobel边缘检测  [函数名称] 图像Sobel边缘检测函数SobelEdgeProcess(WriteableBitmap src) [ ...

  5. Android零基础入门第14节:使用高速Genymotion,跨入火箭时代

    原文:Android零基础入门第14节:使用高速Genymotion,跨入火箭时代 无论是使用Eclipse,还是Android Studio,使用自带的Android模拟器,不仅很费电脑内存,模拟器 ...

  6. 十个 Web 开发者熟悉的经典开源项目和工具

    摘要: 一个都不知道的算我输! 这篇文章主要列出了曾经乃至现在都十分受 Web 开发者欢迎的开源工具,相信使用开源工具的 Web 开发者会对它们感兴趣的,它们中有的甚至诞生十多年了,但仍然在发光发热. ...

  7. vmstat命令浅析

    vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...

  8. VS2008 环境中完美搭建 Qt 4.7.4 静态编译的调试与发布(很不错,有六张插图说明,修改qmake.conf里的MD参数等)good

    为什么要在VS2008中使用QT静态编译呢?很简单,因为VS2008编译器编译出来的文件比mingw编译的要几乎小一半. 好了现在我们来做些准备工作,VS2008自然要安装的,然后打上SP1的补丁.然 ...

  9. delphi如何输出当前堆栈

    想实现,输出当前运行的堆栈,有会的吗?给点思路 方法很多,参考: https://bitbucket.org/shadow_cs/delphi-leakcheck/ 的 https://bitbuck ...

  10. Spring中如何获取request的方法汇总及其线程安全性分析

    前言 本文将介绍在Spring MVC开发的web系统中,获取request对象的几种方法,并讨论其线程安全性.下面话不多说了,来一起看看详细的介绍吧. 概述 在使用Spring MVC开发Web系统 ...