码迷,mamicode.com
首页 > 其他好文 > 详细

Page Visibility实现焦点丢失提醒

时间:2015-03-21 07:31:41      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:page-visib   html5   页面可见性   

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在现代浏览器中兼容性不错,如下图所示。
技术分享

学习资源

  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

Page Visibility实现焦点丢失提醒

标签:page-visib   html5   页面可见性   

原文地址:http://blog.csdn.net/whqet/article/details/44511735

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!