FedFun

爱前端,乐分享,前端痴王海庆的博客!

Page Visibility实现焦点丢失提醒

0.前言

HTML5 Page Visibility API是一个非常有用的特性,当页面对用户不可见时,暂停播放页面中的视频、动画、声音、以及其他耗费内存的操作,等用户回来时,再继续这些操作。当然,最好提醒下用户可以继续回到本页面上来,本文研究利用改变页面tab(title)实现提醒。

效果预览

代码解析

实现过程

实现过程非常简单,侦听visibilitychange事件,然后改变页面标题。

var title = document.title,
newTitle = "记得回来哟 " + title;
document.addEventListener("visibilitychange", function() {
    document.title = ((document.hidden) ? newTitle : title);
});

兼容性分析

来自caniuse的数据,Page Visibility在现代浏览器中兼容性不错,如下图所示。
page visibility兼容表

学习资源

  1. Page Visibility参考手册
  2. Page Visibility兼容性表格
  3. Creating Well-Behaved Sites With The Page Visibility API
  4. Page Visibility(页面可见性) API介绍、微拓展
  5. Page Visibility API
  6. Using the Page Visibility API

声明

前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖!
欢迎任何形式的转载,烦请注明装载,保留本段文字。
本文原文链接,http://blog.csdn.net/whqet/article/details/44511735
欢迎大家访问独立博客http://whqet.github.io

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/whqet/article/details/44511735
个人分类: html5 javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭