JS 捕获浏览器焦点事件

柔光的暖阳◎ 2023-10-08 11:36 8阅读 0赞

## 方法一 ##

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

*  当前窗口得到焦点

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

*  当窗口失去焦点

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

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

## 方法二 ##

### 使用HTML5的`Page Visibility API`来实现 ###

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

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

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>hidden</code></td> 
   <td align="left">页面在后台标签页中或者浏览器最小化</td> 
  </tr> 
  <tr> 
   <td align="left"><code>visible</code></td> 
   <td align="left">页面在前台标签页中</td> 
  </tr> 
  <tr> 
   <td align="left"><code>prerender</code></td> 
   <td align="left">页面在屏幕外执行预渲染处理 document.hidden 的值为 true</td> 
  </tr> 
  <tr> 
   <td align="left"><code>unloaded</code></td> 
   <td align="left">页面正在从内存中卸载</td> 
  </tr> 
 </tbody> 
</table>

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

### 利用`Visibilitychange`事件获取窗口焦点 ###

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