概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参考,相信对其他人也有用. 具体可以参考:MDN Page Visibility API 示例 立刻把这个API用到了我的博客上面了.怎么查看效果呢? 确保浏览器是最新版本(IE要IE10以上). 打开我的博客,然后点击浏览器的其它标签,就可以看到我的博客网页的标签的标题变成了(●-●)喔哟,崩溃啦!…

这个是今天刚发现的,想起之前那个在页面用video标签视频播放,别人切换页面后仍在继续播放,体验很不好,用这个API就可以很完美的解决. Page Visibility API 可以让你获取到这种状态.在用户使用切换标签的方式来浏览网页时,非常合理的情况是任何在后台页面都不会展示给用户. 当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件visibilitychange.你可以检测该事件然后执行一些活动或是展示不同的效果.比如,如果你的网站app正在播放一个…

在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示,之前没有了解过这块,学习一下. document.visibilityState 主要有以下3个状态: hidden:页面彻底不可见. visible:页面至少一部分可见. prerender:页面即将或正在渲染,处于不可见状态. hidden状态和visible状态是所有浏览器都支持的.prerender状态仅支持预渲染的浏览器 注意:The Page Visibility API define…

起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象.Jeff 在第一次看到的时候就知道这种效果是通过HTML5 的Page Visibility API 实现的(不是吹牛). 直到现在我还没去查看36kr 的源代码看其是如何实现的(也不打算去一个个查看它繁杂的js 文件了),HTML5 的Page Visibility API 以前看过,看到36kr 实现了这个的时候一时兴起,遂去查看文档深入了解之.然后…

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

W3C 文档 https://www.w3.org/TR/page-visibility/ MDN 文档 https://www.w3.org/TR/page-visibility/ // Document.visibilityState 可以监听用户是否离开页面,在返回页面 var t1, {log} = console; document.addEventListener("visibilitychange", function() { if(this.visibilityStat…

H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在了其他标签页后面,那么有些功能是可以停下来的,比如轮询服务器或者某些动画效果.那么如何判断呢? H5 之前,我们可以监听 onfocus() 事件.如果当前窗口得到焦点,那么我们可以简单认为用户在与该页面交互,如果失去焦点(onblur()),那么可以认为用户停止与该页面交互. // 当前窗口得到焦…

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

页面1  HTML代码: <p id="loginInfo"></p> JS代码: (function() {     if (typeof pageVisibility.hidden !== "undefined") {         var eleLoginInfo = document.querySelector("#loginInfo");         var funLoginInfo = function(…

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