HTML5 Page Visibility
什么是 Page Visibility ?
Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见。当一个网站是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态,当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件vibilitychange。你可以检测该事件然后执行一些活动或是展示不同的效果。这个API在节约资源上是非常有用的,当网页不可见时,这个API通过提供给开发者可以操作不必须的任务的接口。比如,如果你的网站正在播放一个视频,也许当用户浏览其他浏览器时它可以暂停,那么当用户切换回来的时候,就可以继续播放了。用户可以继续观看,不会因为浏览其他的浏览器导致丢失当前视频的进度。
页面可见性(Page Visibility)API可以有哪些用途
- 网站有图片轮播效果,只有在用户观看轮播的时候,才会自动展示下一显示信息。
- 仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
- 页面想要检测是否正在渲染,以便可以准确的计算网页浏览量
- 当设备进入待机模式时,网站想要关闭设备声音(用户按下电源键关闭屏幕)
- 可应用于视频站点,当用户进入页面播放,离开页面暂停。
- 可应用于登录同步
- 可用于计算在线时长。
- 在线聊天离开状态。
- 还有一些切换效果,比方说,每次用户切换到你这个页面上的时候,logo抖一下,或页面一道亮光闪过,或者其他效果
如何使用?
Page Visibility API的规范很简单,只有两个属性:
document.hidden 根据浏览器窗口的状态返回布尔值 true 或 false。
document.visibilityState存储具体的状态字符串。一共有四种状态:
- visible : 页面内容至少是部分可见,非最小化窗口的前景选项卡。
- hidden : 页面内容对用户不可见,可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下。
- prerender : 页面内容正在被预渲染且没有对用户是不可见的
- unloaded : 页面正在从内存中卸载。
下面写一个计算在线时长的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0 : run</title>
</head>
<body>
<h1>你在页面停留的时间为 <span id="time">0</span> s</h1>
<h1>这是你第 <span id="count">0</span> 次离开又回来了。</h1>
<script>
var i = 0,
count = 0,
si = setInterval(function () {
document.querySelector('#time').innerHTML = ++i;
document.title = i + ' : run';
}, 1000);
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
clearInterval(si);
document.title = i + ' : pause';
} else {
document.querySelector('#count').innerHTML = ++count;
si = setInterval(function () {
document.querySelector('#time').innerHTML = ++i;
document.title = i + ' : run';
}, 1000);
}
});
</script>
</body>
</html>
上例代码大意是:当页面可见时,计时停留的时间,当页面不可见时,计时器停止,页面标题与之同步(切换标签页时注意标题)。再次返回页面,继续计时并且显示当前离开又回来的次数。
本文只是个引子,简单介绍基础使用,更为复杂的应用和效果大家自行实现。
HTML5 Page Visibility的更多相关文章
- 妙趣横生的HTML5 Page Visibility API
起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象.Jeff 在第一次看到的时候就知道这种效果是通过HTML ...
- 拥抱HTML5 — Page Visibility(页面可见性) API介绍
H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在 ...
- Page Visibility实现焦点丢失提醒
0.前言 HTML5 Page Visibility API是一个很实用的特性.当页面对用户不可见时,暂停播放页面中的视频.动画.声音.以及其它耗费内存的操作,等用户回来时.再继续这些操作. 当然,最 ...
- Page Visibility(页面可见性) API介绍、微拓展[转]
一.网页君的悲情谁来懂 唉,突然想到了一首悲情诗: 泪湿罗巾梦不成,夜深前殿按歌声.红颜未老恩先断, 斜倚薰笼坐到明. 学生时代学过的一首诗,已还给老师不知所云的诸位可参见下面释义: 诗的主人公是一位 ...
- Page Visibility(网页可见性) API与登录同步引导页实例页面
页面1 HTML代码: <p id="loginInfo"></p> JS代码: (function() { if (typeof pageVis ...
- 页面可见生Page Visibility
Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的 ...
- H5的Page Visibility API
概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参 ...
- H5 之 Page Visibility
这个是今天刚发现的,想起之前那个在页面用video标签视频播放,别人切换页面后仍在继续播放,体验很不好,用这个API就可以很完美的解决. Page Visibility API 可以让你获取到这种状态 ...
- Page Visibility API
在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示,之前没有了解过这块,学习一下. document.visibilityState 主要有以下3个状态 ...
随机推荐
- 基于OpenCV的车辆检测与追踪的实现
最近老师布置了一个作业,是做一个基于视频的车辆检测与追踪,用了大概两周的时间做了一个简单的,效果不是很理想,但抑制不住想把自己的一些认识写下来,这里就把一些网络上的博客整理一下分享给大家,希望帮助到大 ...
- AutoMapper随笔记
平台之大势何人能挡? 带着你的Net飞奔吧! http://www.cnblogs.com/dunitian/p/4822808.html#skill 先看效果:(完整Demo:https://git ...
- 冒泡,setinterval,背景图的div绑定事件,匿名函数问题
1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...
- 自定义搭建PHP开发环境
学习了一段时间php了,因为之前是刚接触php,所以用的是集成安装包(wamp).现在想进一步了解apache.mysql.php之间的关系以及提升自己所以进行自定义搭建PHP开发环境.废话不多说,请 ...
- AJAX实现登录界面
使用php跳转界面和AJAX都可实现登录界面的跳转的登录失败对的提醒.但是,php跳转的方式 需要额外加载其他界面,用户体验差.AJAX可实现当前页面只刷新需要的数据,不对当前网页进行 重新加载或者是 ...
- [笔记]kubernetes 无法启动问题
在启动kubernetes的时候报错误. ERROR: timed out for http://localhost:4001/v2/keys/ 原因是无法启动etcd, etcd 监听4001本地端 ...
- 开发者的利器:Docker 理解与使用
困扰写代码的机器难免会被我们安装上各种各样的开发工具.语言运行环境和引用库等一大堆的东西,长久以来不仅机器乱七八糟,而且有些相同的软件还有可能会安装不同的版本,这样又会导致一个项目正常运行了,却不小心 ...
- .net core和angular2之前端篇—1
2016-10-20更新 今天的这篇文章还是一篇"Hello World",只不过开发环境有所改变--Visual Studio Code+Angular2+Webapck,也算是 ...
- Android之数据存储的五种方法
1.Android数据存储的五种方法 (1)SharedPreferences数据存储 详情介绍:http://www.cnblogs.com/zhangmiao14/p/6201900.html 优 ...
- Toast显示图文界面——Android开发之路1
Toast的多种使用方法 Toast其实是一个功能特别强大的组件,不仅仅可以吐司一个文本内容,还可以吐司图片以及图文混排的界面.具体用法如下: 第一种:简单的纯文本内容的吐司: Toast.makeT ...