HTML5技术

HTML5 Page Visibility - PeakLeo

字号+ 作者:H5之家 来源:H5之家 2017-01-01 09:02 我要评论( )

什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见。当一个网站是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态,当用户最小化网页或者浏览到其他标签的网页时,API将发送一个

什么是 Page Visibility ?
Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见。当一个网站是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态,当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件vibilitychange。你可以检测该事件然后执行一些活动或是展示不同的效果。这个API在节约资源上是非常有用的,当网页不可见时,这个API通过提供给开发者可以操作不必须的任务的接口。比如,如果你的网站正在播放一个视频,也许当用户浏览其他浏览器时它可以暂停,那么当用户切换回来的时候,就可以继续播放了。用户可以继续观看,不会因为浏览其他的浏览器导致丢失当前视频的进度。

页面可见性(Page Visibility)API可以有哪些用途

如何使用?

Page Visibility API的规范很简单,只有两个属性:

document.hidden 根据浏览器窗口的状态返回布尔值 true 或 false。

document.visibilityState存储具体的状态字符串。一共有四种状态:

下面写一个计算在线时长的例子:

0 : run你在页面停留的时间为 0s这是你第 0次离开又回来了。, count = 0, si () { document.querySelector(i; document.title ; }, 1000); document.addEventListener( () { if (document.hidden) { clearInterval(si); document.title ; } else { document.querySelector(count; si () { document.querySelector(i; document.title ; }, 1000); } });

上例代码大意是:当页面可见时,计时停留的时间,当页面不可见时,计时器停止,页面标题与之同步(切换标签页时注意标题)。再次返回页面,继续计时并且显示当前离开又回来的次数。

本文只是个引子,简单介绍基础使用,更为复杂的应用和效果大家自行实现。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5笔记2——HTML5音/视频标签详解 - 邹琼俊

    HTML5笔记2——HTML5音/视频标签详解 - 邹琼俊

    2016-12-29 15:01

  • HTML5笔记1——HTML5的发展史及标签的改变 - 邹琼俊

    HTML5笔记1——HTML5的发展史及标签的改变 - 邹琼俊

    2016-12-29 13:00

  • Html5 简单选择排序演示 - 飞翔的月亮

    Html5 简单选择排序演示 - 飞翔的月亮

    2016-12-27 10:00

  • HTML5 表单及其他新增和改良元素 - 喵喵喵---

    HTML5 表单及其他新增和改良元素 - 喵喵喵---

    2016-12-20 10:03

网友点评