用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API

这里了将介绍一下 页面可见性(PageVisibility)API的简单应用。

visibilitychange事件介绍

简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

这个事件可以满足一些用户需求,比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。

这个事件已经得到现代浏览器广泛的支持,不过一些老版本的浏览器需要加相应的前缀。

Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
13前缀webkit
33无需前缀
10前缀moz
18无需前缀
10前缀ms 12.10 最新的测试已经支持

注:Opera 12.10浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.

document的可见性属性

Page Visibility (Second Edition)中定义了2个只读的document属性:hiddenvisibilityState。

其中document.hidden是一个布尔值,简单的表示标签页显示或者隐藏。而document.visibilityState属性更为详细,目前有四个可能的值:

  • visible : 页面内容至少部分可见。这意味着在实际情况中,该网页是一个非最小化窗口的可见标签页。
  • hidden : 页面内容是对用户不可见。实际上,这意味着该文档是后台标签页或最小化窗口的一部分,或者系统锁屏是时的状态。
  • prerender : 网页内容被预渲染并且用户不可见。
  • unloaded : 如果文档被卸载,那么这个值将被返回。

一般情况下我们使用document.hidden就能满足通常的需求。

为了支持老版本的浏览器,我们需要对document.hidden在做一些前缀处理:

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;
}

同样的,我们可以获取document.visibilityState属性:

function getVisibilityState() {
    var prefixes = ['webkit', 'moz', 'ms', 'o'];
    if ('visibilityState' in document) return 'visibilityState';
    for (var i = 0; i < prefixes.length; i++) {
        if ((prefixes[i] + 'VisibilityState') in document)
            return prefixes[i] + 'VisibilityState';
    }
    // otherwise it's not supported
    return null;
}

这样我们可以写一个跨浏览器的函数,检查文档是否可见。

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;
    
    return document[prop];
}

visibilitychange监听事件

你可以在document对象上注册一个监听visibilitychange事件,根据document.hidden或者document.visibilityState属性做一些业务逻辑:

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
    var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
    document.addEventListener(evtname, function () {
        document.title = document[getVisibilityState()]+"状态";
    },false);
}

上面的代码会在页面可见性发生变化时修改document.title的值。

demo:https://www.css88.com/demo/visibilitychange-event/

参考阅读:

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

http://www.html5rocks.com/en/tutorials/pagevisibility/intro/?redirect_from_locale=zh

赞(1) 打赏
未经允许不得转载:WEB前端开发 » 用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这样多简单,replace(/hidden/i, ‘visibilitychange’)

    figo2年前 (2017-06-20)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏