visibility API

这是一篇简短的小博文,介绍检测页面是否可见的API。

参考 https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

document.hidden:如果页面可见返回true,否则返回false

document.visibilityState:返回状态字符串,可见visible,不可见hidden。文档上还写了prerender和unloaded。

visibilitychange事件在页面可见性变化时触发。切换标签、最小化窗口会触发,但是如果打开网页状态下开启其他应用不会触发。

下面是兼容代码:

var hidden,visibilityChange
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
	console.log(document.visibilityState)
	if (document[hidden]) {
		hiddenFun() //这里是要执行的函数
	}else {
		visibleFun() //这里是要执行的函数
	}
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);

  

原文地址:https://www.cnblogs.com/lymvv/p/8400660.html

时间: 2024-08-12 20:29:25

visibility API的相关文章

通过HTML5 Visibility API检测页面活动状态

几年前,我们浏览网页的时候是没有选项卡浏览模式的,每一个网页都会是一个浏览器窗口,如果我没有记错,Win7之前我们都是这样浏览网页的.作为一个程序员,我们经常会同时打开10-15个网页,多的时候超过20个也不足为奇. 为什么要使用这个API? 早期我们没有办法确定哪些选项卡是活动状态的,但是现在通过HTML Visibility API,我们可以检测访客是否正在浏览我们的界面. 在这个教程中我们会介绍如何使用HTML5 Visibility API,同时我们也为你准备了一个简单的demo来查看页

Page Visibility API(页面可见性)

页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面:隐藏的页面,就是我们没有看的页面. 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前,其他页面就是隐藏的,还有一种就是,把浏览器最小化,所有的页面就都不可见了. API 很简单,document.hidden 就返回一个布尔值,如果是true, 表示页面可见,false 则表示,页面隐藏.  不同页面之间来回切换,触发visibilitychange事件. 还有一个document

Page Visibility(页面可见性) API介绍、微拓展[转]

一.网页君的悲情谁来懂 唉,突然想到了一首悲情诗: 泪湿罗巾梦不成,夜深前殿按歌声.红颜未老恩先断, 斜倚薰笼坐到明. 学生时代学过的一首诗,已还给老师不知所云的诸位可参见下面释义: 诗的主人公是一位不幸的宫女.她一心盼望君王的临幸而终未盼得,时已深夜,只好上床,已是一层怨怅.宠幸不可得,退而求之好梦:辗转反侧,竟连梦也难成,见出两层怨怅.梦既不成,索性揽衣推枕,挣扎坐起.正当她愁苦难忍,泪湿罗巾之时,前殿又传来阵阵笙歌,原来君王正在那边寻欢作乐,这就有了三层怨怅.倘使人老珠黄,犹可解说:偏偏她

[转载]你可能不知道的5个功能强大的 HTML5 API —— html5系列

HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section.article.header 和 nav 等则是用来丰富网页内容.另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇文章可以了解一下. Fullscreen API 这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全

25. javacript高级程序设计-新兴的API

1. 新兴的API requestAnimationFrame():是一个着眼于优化js动画的api,能够在动画运行期间发出信号.通过这种机制,浏览器就能够自动优化屏幕重绘操作 Page Visibility API:让开发人员知道用户什么时候正在看着页面,而什么时候页面是隐藏. Geolocation API:在得到用户许可的情况下,可以确定用户的位置 File API:可以读取文件内容,用户显示.处理和上传 Web Timing:给出了页面加载和渲染过程的很多信息,对性能优化非常有价值 We

HTML5 Page Visibility

什么是 Page Visibility ?Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态,当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件vibilitychange.你可以检测该事件然后执行一些活动或是展示不同的效果.这个API在节约资源上是非常有用的,当网页不可见时,这个API通过提供给开发者

Page Visibility实现焦点丢失提醒

0.前言 HTML5 Page Visibility API是一个非常有用的特性,当页面对用户不可见时,暂停播放页面中的视频.动画.声音.以及其他耗费内存的操作,等用户回来时,再继续这些操作.当然,最好提醒下用户可以继续回到本页面上来,本文研究利用改变页面tab(title)实现提醒. 前言 效果预览 代码解析 实现过程 兼容性分析 学习资源 声明 效果预览 代码解析 实现过程 实现过程非常简单,侦听visibilitychange事件,然后改变页面标题. var title = documen

javascript 新兴的API

javascript 新兴的API 分类: javascript2012-12-31 16:02 215人阅读 评论(0) 收藏 举报 很多的API都有着特定的前缀,例如微软的ms,谷歌和safari的webkit.这些新兴的API去掉前面的前缀后,剩下的部分是一样的. requestAnimationFrame() 用于动画重绘的API,它可以告诉浏览器,动画开始,浏览器就可以确定重绘的最佳方式. 早期的动画的典型方式是使用setInterval()方法来控制所有的动画.下面是早期动画的基本方

杂谈:HTML 5页面可视性API

译文来源:http://www.ido321.com/1126.html 原文:HTML5 Page Visibility API 译文:HTML 5的页面可视性API 译者:dwqs 在早期.浏览器并没有提供选项卡,可是如今基本全部浏览器都提供了这个功能. 作为一个程序猿,我通常会同一时候打开10到15个选项卡,甚至有些时候会在25到30. 为什么介绍Page Visibility API呢? 之前,是不可能确定哪个选项卡是激活的,哪个没有激活.可是在HTML 5 Visibility API