Page Visibility实现焦点丢失提醒

0.前言

HTML5 Page Visibility API是一个很实用的特性。当页面对用户不可见时，暂停播放页面中的视频、动画、声音、以及其它耗费内存的操作，等用户回来时。再继续这些操作。

当然，最好提醒下用户能够继续回到本页面上来，本文研究利用改变页面tab（title）实现提醒。

• 前言
• 效果预览
• 代码解析
  • 实现过程
  • 兼容性分析
• 学习资源
• 声明

效果预览

代码解析

实现过程

实现过程很easy，侦听visibilitychange事件，然后改变页面标题。

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

newTitle : title);
});

兼容性分析

来自caniuse的数据，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