Page Visibility API(页面状态监听)

2021-09-15 16:08 更新

PageVisibility API用于判断页面是否处于浏览器的当前窗口,即是否可见。

使用这个API,可以帮助开发者根据用户行为调整程序。比如,如果页面处于当前窗口,可以让程序每隔15秒向服务器请求数据;如果不处于当前窗口,则让程序每隔几分钟请求一次数据。

属性

这个API部署在document对象上,提供以下两个属性。

  • document.hidden:返回一个布尔值,表示当前是否被隐藏。

  • document.visibilityState:表示页面当前的状态,可以取三个值,分别是visibile(页面可见)、hidden(页面不可见)、prerender(页面正处于渲染之中,不可见)。

这两个属性都带有浏览器前缀。使用的时候,必须进行前缀识别。

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document) 
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

VisibilityChange事件

当页面的可见状态发生变化时,会触发VisibilityChange事件(带有浏览器前缀)。

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

参考链接

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号