网站首页 » 前端开发 » HTML5 » html5 page visibility api 用法
上一篇:
下一篇:

html5 page visibility api 用法

前言

如今浏览器的多tab 窗口设计已经很普遍,可以说绝大多数的浏览器都已经默认地使用这种方法来打开网页进而提高用户体验。但因此问题也随之而来-资源的浪费,性能的下降。

在我们平时浏览页面时候,都没不经意地打开很多页面。就拿我自己来说,很多时候可能会同时打开7-8面而,由于工作需要甚至同时打开十几二十个页面也是常有的事。即使页面的数量不能少,那么怎么才能让用户使用了浏览器默认的tab窗口后有更好的体验呢?于是乎 HTML5 Page Visibility API 就诞生了。只是来得有点迟,但也没关系,毕竟它还是来了。下面我们就来看看这个 HTML5 Page Visibility API 是何方神圣。

简单介绍

Page Visibility API 可以告知你这个网页何时处于可见状态或者是被激活状态,在tab窗的浏览器中,判断是否是被用户tab掉的页面或者对于用户来说不可见的页面,Page Visibility API 是一个这很不错的解决方案。当用户最小化窗口或者tab掉当前网页切换到其它页面时,Page Visibility API 会发送一个关于页面是否可见的 visibilitychange 事件。你可以监测到这个事件并执行相应代码。例如,webApp 当前页面正在播放视频,当你切换到其它页面时,视频将会自动停止播放,当用户再次回到这个页面时,视频又会继续播放。并且视频是接着继续播放的,而不会重新播放。这个 API 对于资源节省方面特别地有用,开发者可以监测页面是否可见,并停止不必要的任务。

要想跟 HTML5 Page Visibility API 打好交道,你不得不先来了解下 document 的两个新属性document.visibilityState 和 document.hidden。

属性值

document.visibilityState 有四个不同的属性:

visible:浏览器 tab 窗口内容全部或者部分可见时返回visible。也就是说浏览器当前 tab 窗口不是最小化。
hidden:浏览器 tab 窗口内容对于用户来说不可见。也就是说当浏览器最小化、tab 掉当前窗口或者电脑锁屏时 visibilityState 返回 hidden。
prerender:页面内容被预渲染并且对于用户来说不可见是返回 prerender ,document 可以是以这种状态开始的,但其它状态值永远也不可能变成这种状态值。 浏览器选择性的支持这个属性(即不是所有浏览器都把支持此属性)。
unloaded:当文档要被 unload 时返回 unloaded。浏览器选择性的支持这个属性(即不是所有浏览器都把支持此属性)。

属性值都了解完了之后,我们就需要通过event 事件来监听页面 页面的激活状态了。 通过 visibilitychange 事件就可以实现这个功能了。

基本用法

document.addEventListener('visibilitychange', function(event) {
if (!document.hidden) {
// The page is visible.
} else {
// The page is hidden.
}
});

浏览器支持

说到这里我们就得先来看看 page visibility 的浏览器支持情况,因为接下来我们要介绍的就是跨浏览器的实现了。

page visibility 浏览器支持情况

跨浏览器

上面那个例子是最简单,最基本的用法。不过新的东西一般都会遭遇一个尴尬的时期那就是跨浏览器的问题,也就是我们平常所说的浏览器前缀,下面就是完成跨浏览器的整个过程,请耐心看完,虽然代码看起来有点多,但如果你细心分一分,就会无比的清晰明了,祝你好运。

// Get Browser-Specifc Prefix
function getBrowserPrefix() {

// Check for the unprefixed property.
if ('hidden' in document) {
return null;
}

// All the possible prefixes.
var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];

for (var i = 0; i < browserPrefixes.length; i++) {
var prefix = browserPrefixes[i] + 'Hidden';
if (prefix in document) {
return browserPrefixes[i];
}
}

// The API is not supported in browser.
return null;
}

// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
if (prefix) {
return prefix + 'Hidden';
} else {
return 'hidden';
}
}

// Get Browser Specific Visibility State
function visibilityState(prefix) {
if (prefix) {
return prefix + 'VisibilityState';
} else {
return 'visibilityState';
}
}

// Get Browser Specific Event
function visibilityEvent(prefix) {
if (prefix) {
return prefix + 'visibilitychange';
} else {
return 'visibilitychange';
}
}

上面这个方法就是实现跨浏览器的,不要看到代码这么多,其实也就那么两下,根据不同的浏览器给hidden 属性添加对应的前缀。万事俱备,只欠东风。是什么呢?事件监听 addEventListener 。

// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);

document.addEventListener(visibilityEvent, function(event) {
if (!document[hidden]) {
// The page is visible.
} else {
// The page is hidden.
}
});

应用场景

在很多场景下 这个API 都可以派上用场。

1.如果一个页面对于用户来说暂时是不可见的,而这个页面每隔两分钟都会从一些RSS feed 或者 API 中轮询一些数据,这时我们就可以通过这个 HTML5 Page Visibility API 来阻止这个请求。

2.对于图片切换来说也是,当用户 tab 掉这个有图片切换的页面时,图片切换就不执行。

3.用同样的方式,我们就可以实现当页面对于用户来说是不可见(tab 掉)的时候,给用户发出一个通知。

相关资料

火狐MDN:https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

tutsplus:http://code.tutsplus.com/articles/html5-page-visibility-api–cms-22021

w3c:https://www.w3.org/TR/page-visibility/

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/page-visibility-api/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END