如何使用html5的Page Visibility API来实现获取焦点js事件

当前窗口获得 焦点 js事件，ht ML 5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点

//当前窗口得到焦点 
window.onfocus = function() { 
  //播放动画或视频 
}; 
 
//当前窗口失去焦点 
window.onblur = function() { 
  // 暂停 动画或视频 
};

这个方法可以实现切换标签暂停动画视频，但是会带来一个问题，由于是判断焦点，如果是在当前页面上铺上一个小窗口，那当前页面就暂停了动画，试想，如果你一边看片，一边开个聊天窗口与MM聊天，当你操作聊天窗口的时候，视频暂停了，这并不是你想要的效果。

现在我们来看看HTML5是怎么解决的。H5 提供了很多 简单 实用的 API，Page Visibil IT y API 就是其中之一。 Page Visibility API能有效的帮助我们完成这样的判断。

使用html5的Page Visibility API来实现

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

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

document.visibility stat e：表示下面 4 个可能状态的值

hidden：页面在后台标签页中或者浏览器最小化

visible：页面在前台标签页中

PR erender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true

unloaded：页面正在从内存中卸载

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

这样，我们可以监听 Visibilitychange 事件，当该事件触发时，获取 document.hidden 的值，根据该值进行页面一些事件的处理。

document.addEventListener(& # 39;visibilitychange', function() { 
   VAR  isHidden = document.hidden; 
  if (isHidden) { 
    // 动画视频暂停 
  } else { 
    // 动画视频 开始  
  } 
});

结合demo中的实例，切换标签或者最小化的时候，demo中的视频会暂停，恢复当前页面时，demo中的视频会继续播放。完整的代码如下：

var videoElement = document.getElementById("videoElement"); 
 
// 如果页面被隐藏，则暂停播放，如果页面恢复，则继续播放 
function handleVisibilityChange() { 
  if (document[hidden]) { 
    videoElement.pause(); 
  } else { 
    videoElement. play (); 
  } 
} 
 
// 判断浏览器的支持情况 
if (ty PE of document.addEventListener  ===  "un define d" || typeof document[hidden]  == = "undefined") { 
  consol. LOG ("This demo requires a  br owser, such as @R_ 304 _1001@ Ch rom e or Firefox, t hat  supports the Page Visibility API."); 
} else { 
  // 监听visibilityChange事件    
  document.addEventListener(visibilityChange, handleVisibilityChange, false); 
     
  // 当播放器暂停的时候，将页面标题设置为：Paused. 
  videoElement.addEventListener("pause", function(){ 
    document.title = 'Paused'; 
  }, false); 
     
  // 当播放器 正常 播放时，将页面标题设置为：Playing. 
  videoElement.addEventListener("play", function(){ 
    document.title = 'Playing';  
  }, false); 
}

以上就是如何使用html5的Page Visibility API来实现获取焦点js事件的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 如何使用html5的Page Visibility API来实现获取焦点js事件 全部内容，希望文章能够帮你解决 如何使用html5的Page Visibility API来实现获取焦点js事件 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于如何使用html5的Page Visibility API来实现获取焦点js事件的详细内容...