HTML5页面可见性接口应用(Page Visibility API)

HTML5页面可见性接口应用(Page Visibility API) helloweba com 作者:月光光 时间:

HTML5页面可见性接口应用(Page Visibility API)

helloweba.com

作者:月光光

时间: 2016-10-15 11:25

标签:HTML5 

有这样一个需求,需要判断用户是不是与当前页面交互,比如浏览器上打开很多标签页,如果页面最小化或者目标页面被隐藏在其他标签页后,那么目标页面的某些功能可以停下来,等切换到目标页面时再继续某些功能。

查看演示

下载源码

比如,目标页面在播放动画或者视频,当我切换标签页的时候动画或者视频暂停播放,等我切换回来又继续播放动画或视频。那目标页面如何判断切换标签事件呢?

H5之前,我们可以监听 onfocus() 事件。如果当前窗口得到焦点,那么我们可以简单认为用户在与该页面交互,如果失去焦点( onblur() ),那么可以认为用户停止与该页面交互。

// 当前窗口得到焦点

window.onfocus = function() {

// 播放动画或视频

};

// 当前窗口失去焦点

window.onblur = function() {

// 暂停动画或视频

};

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

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

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

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

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

hidden

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

visible

:页面在前台标签页中

prerender

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

unloaded

:页面正在从内存中卸载

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

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

document.addEventListener('visibilitychange', function() {

var isHidden = document.hidden;

if (isHidden) {

// 动画视频暂停

} else {

// 动画视频开始

}

});

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

var hidden, visibilityChange; 

if (typeof document.hidden !== "undefined") {

hidden = "hidden";

visibilityChange = "visibilitychange";

} else if (typeof document.msHidden !== "undefined") {

hidden = "msHidden";

visibilityChange = "msvisibilitychange";

} else if (typeof document.webkitHidden !== "undefined") {

hidden = "webkitHidden";

visibilityChange = "webkitvisibilitychange";

}

var videoElement = document.getElementById("videoElement");

// 如果页面被隐藏,则暂停播放,如果页面恢复,则继续播放

function handleVisibilityChange() {

if (document[hidden]) {

videoElement.pause();

} else {

videoElement.play();

}

}

// 判断浏览器的支持情况

if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {

consol.log("This demo requires a browser, such as Google Chrome or Firefox, that 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);

}

声明:

本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接:http://www.helloweba.com/view-blog-390.html

漂亮的垂直导航样式

未登录用户
全部评论0
到底啦