Page Visibility实现焦点丢失提醒

ゞ浴缸里的玫瑰 2022-08-07 06:53 135阅读 0赞

# 0.前言 #

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

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

# [效果预览][Link 1] #

# 代码解析 #

## 实现过程 ##

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

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

## 兼容性分析 ##

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

# 学习资源 #

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

# 声明 #

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

[Link 1]: http://whqet.github.io/demo/html5/pageVisibility.html
[caniuse]: http://caniuse.com/#feat=pagevisibility
[page visibility]: /images/20220805/2f815917775040f08c2439ceb678f65a.png
[Page Visibility]: http://www.w3.org/TR/page-visibility/
[Creating Well-Behaved Sites With The Page Visibility API]: http://www.smashingmagazine.com/2015/01/20/creating-sites-with-the-page-visibility-api/
[Page Visibility_ API]: http://www.zhangxinxu.com/wordpress/2012/11/page-visibility-api-introduction-extend/
[Page Visibility API]: http://davidwalsh.name/page-visibility
[Using the Page Visibility API]: https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
[http_blog.csdn.net_whqet_article_details_44511735]: http://blog.csdn.net/whqet/article/details/44511735
[http_whqet.github.io]: http://whqet.github.io