JS 捕获浏览器焦点事件

方法一

监听 window.onfocus() 和window.onblur()事件实现

• 当前窗口得到焦点

window.onfocus = function() { 
  // 开始计时或者播放
};

• 当窗口失去焦点

window.onblur = function() { 
  //停止计时或者播放
};

• 缺点
  由于是判断焦点，如果是在当前页面上铺上一个小窗口，那当前页面就暂停了动画，试想，如果你一边看片，一边开个聊天窗口与MM聊天，当你操作聊天窗口的时候，视频暂停了，这并不是你想要的效果。

方法二

使用HTML5的Page Visibility API来实现

这个 API 本身非常简单，由以下三部分组成。

• document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。

• document.visibilityState：表示下面 4 个可能状态的值

名称	描述
hidden	页面在后台标签页中或者浏览器最小化
visible	页面在前台标签页中
prerender	页面在屏幕外执行预渲染处理 document.hidden 的值为 true
unloaded	页面正在从内存中卸载

• Visibilitychange事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。

利用Visibilitychange事件获取窗口焦点

window.addEventListener('visibilitychange', function() {
    if (document[hidden]){
       	// 失去焦点
    } else {
        // 获取焦点
    }
});