Interesting:页面可见性Page Visibility API 的一个用法

原创 18672293959 随笔 js 189阅读 2018-04-08 20:25:34 举报

很早之前在《JavaScript高级编程》中的一节讲HTML5新API的时候,看到过Page Visibility API,其主要功能是判断用户是不是在与页面进行交互,比如页面最小化或者隐藏后,页面中的视频或者动画就可以停止下来。当时看到这个,并没有深究,只是写了一个demo,切换浏览器的选项卡,试一下这个API的几个用法:
1.document.hidden:页面是否隐藏,隐藏为true
2.document.visibilityState:visible/hidden/prerender/unloaded
3.visibilitychange事件,当页面的可见性变化时候触发
至此一直没有找到合适的应用场景来使用这个API。直到十天前,同事遇到一个很难搞的需求:
1.在微信公众号内嵌页面中里面,拉一个接口判断用户是否关注了公众号(用户可能是直接粘贴网址或者扫码进入)
2.如果没有关注,则弹出一个含有公众号二维码的弹窗,用户长按以后,就跳到关注公众号的页面,此时关注二维码
3.再按返回键 一层层返回到刚才的内嵌页面,此时需要重新刷一下页面(已经关注了公众号就不需要这个弹窗了)
难点就在于,如何在按物理返回键的时候,再次进入该页面就进行页面刷新,查了很久的微信API,也没有找到合适的;有同事建议用history.pushState来做(因为进入了识别二维码以后就进到微信APP里了,脱离了webview浏览器环境,导致不能奏效)。此时有一个帅哥同事灵光一闪,xxx,记得之前说的那个 页面可见性API么,来试一试。遂大喜,兴奋一下,上代码:

就是这么简短的一句代码,就奏效了,内心充满了喜悦。
后来一想,为什么能够奏效呢?与是对document.visibilitychange进行拓展。这是一个document方法,其是否触发在于:

  • *当前document是否发生了可见性的变化,此时的变化的对象一定指代的是当前 绑定了事件的 document
  • *
  • *当识别了二维码 跳到 微信App 里面的时候,一定让之前绑定了visibilitychange事件的document的页面可见性发生了变化,事件触发,由于是 关注了公众号再去的之前的页面,所有代码里面加上document.hidden
  • *
    至此,页面可见性 Page Visibility API 在这里巧妙地实现了一个看似难以下手的需求。
    前端路漫漫。
    ps:前几天第四届CSS大会在厦门召开,未能成行,实属遗憾。很多耳熟能详的大神:大漠、张鑫旭、顾轶灵、贺师俊等等都出现在大会上。安利一个公众号:前端圈,里面有这次大会的详细记录(PPT、视频等等)。
    加油。
评论 ( 1 )
最新评论
hugeannex 2018-04-09 16:39:25 1F

很早以前就知道了。更早以前还用了focus。。。