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

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

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

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

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

页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面:隐藏的页面,就是我们没有看的页面. 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前,其他页面就是隐藏的,还有一种就是,把浏览器最小化,所有的页面就都不可见了. 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…

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

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

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