没用过Page Visibility？那就来看看吧

对于Visibility这个词，前端都比较熟悉，没错，是CSS的老相识
而对于Page Visibility呢？ 
如果不熟悉，那我们不妨认识一下。

 

1. 什么是Page Visibility API

visibility在CSS中是一个控制显示隐藏的属性，可以理解为可视与不可视。那在JS中，同样也起到了可视与不可视的区分！

因此Page Visibility API主要的作用就是在于对于页面“可视/不可视”状态的判断提供的原生API。

比如在浏览网页时，有时候我们会打开多个页面标签，然而同一个窗口我们只能一次性浏览一个标签页，因此这个页面是可视的，其他暂时浏览不到的页面是不可视的。

2. Page Visibility API的作用

上述讲了对Page Visibility API的基本理解，以及了解了该原生接口的判断依据。

该API能够区分浏览器打开的页面是否可视，因此能够通过API提供的接口对浏览器页面在不同状态(可视或者不可视)进行不同的处理。 

比如音视频的播放，页面的动效，动画，轮播等 

服务器接口轮询等 因此，该API为我们提供了不同状态下处理资源运行的可能，从而降低一些本可节约的损耗

3. Page Visibility API的属性

[1] document.hidden
　　返回值数据类型为：Boolean
　　作用：判断当前页面是可见或者不可见状态

[2] document.visibilityState 
　　返回值数据类型为：String
　　参数：hidden     　　其作用：表示浏览器不可见， 不可见情况包括 浏览器最小化、切换到桌面、锁屏了等 
　　参数：visible　  　　其作用：表示浏览器可见
　　参数：prerender 　   其作用：只在支持"预渲染"的浏览器(比如谷歌)上才会出现,可以在用户不可见的状态下，预先把页面渲染出来，等到用户要浏览的时候，直接展示渲染好的网页

[3] document.visibilitychange
　   作用： 用于监听浏览器visibilityState的状态是否改变


看着是一个神奇的API，可是浏览器家族太大，Page Visibility又是如何适应的呢？ 自然会存在兼容性的判断
万变不离其宗，既然是浏览器类型，那我们就通过内核来判断，下面我们可以用几句代码在各个浏览器上尝试判断

        // 判断是否支持
        console.log('webkitHidden: ' + document['webkitHidden'])
        console.log('mozHidden: ' + document['mozHidden'])
        console.log('msHidden: ' + document['msHidden'])
        console.log('oHidden: ' + document['oHidden'])
        console.log('hidden: '+ document['hidden'])    

然后我们看下返回的结果：

谷歌可以通过webkitHidden,或者不带内核前缀的hidden进行判断

 

 火狐看着似乎有点矫情，居然不能用mozHidden前缀方式判断，不过依然能通过不带前缀的hidden进行判断

 IE9及以下不支持，IE9以上的版本是可以通过ms前缀已经不带前缀的方式去判断更多浏览器的支持情况，有兴趣的小伙伴可以自行尝试下

可以利用以下函数调用，进行判断兼容性以及visibilityState

 

// 判断是否支持 返回visibilityState状态
var showPageVisibility = function() {
    var prefixSupport, keyWithPrefix = function(prefix, key) {
        if (prefix !== "") {
            // hidden的h大写
            return prefix + key.slice(0,1).toUpperCase() + key.slice(1)   
        }
        return key
    };
    
    var isPageVisibilitySupport = (function() {
        var support = false;
        if (typeof window.screenX === "number") {
            ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
                if (support == false && document[keyWithPrefix(prefix, "hidden")] != undefined) {
                    prefixSupport = prefix
                    support = true  
                }
            })       
        }
        return support;
    })();

    // 返回属性
    var isHidden = function() {
        if (isPageVisibilitySupport) {
            return document[keyWithPrefix(prefixSupport, "hidden")]
        }
        return undefined
    };
    
    var visibilityState = function() {
        if (isPageVisibilitySupport) {
            return document[keyWithPrefix(prefixSupport, "visibilityState")]
        }
        return undefined
    };
    
    return {
        hidden: isHidden(),
        visibilityState: visibilityState(),
        visibilitychange: function(fn, usecapture) {
            usecapture = undefined || false
            if (isPageVisibilitySupport && typeof fn === "function") {
                return document.addEventListener(prefixSupport + "visibilitychange", function(evt) {
                    this.hidden = isHidden()
                    this.visibilityState = visibilityState()
                    fn.call(this, evt)
                }.bind(this), usecapture)
            }
            return undefined;
        }
    }   
}

 

 

接下来我们通过一个简单的audio播放器来初步体验一下Page Visibility能够做的事情

先写一个简单的播放器

<audio id="playMusic" controls="controls" autoplay="true" src="mp3/t.mp3" ></audio>

然后我们监听visibilityChange进行操作

        var player = document.getElementById('playMusic')
        var changeTimes = 0
        // 改变audio
        document.addEventListener('visibilitychange', function () {
            // 用户离开了当前页面
            if (document.visibilityState === 'hidden') {
                changeTimes++;
                console.log('页面第'+ changeTimes +'次隐藏，暂停播放')
                player.pause()
            }

            // 用户打开或回到页面
            if (document.visibilityState === 'visible') {
                console.log('页面显示，继续第'+ changeTimes +'次播放')
                player.play()
            }
        })    

然后我们浏览器打开后，再打开一个新标签，然后我们两者进行多次切换

 然后我们看下控制台，确实执行了我们写的代码，大家也可以听听音乐的播放效果 (博主耳机坏了，没钱买了~~~~) 

 

不好意思，下面才是控制台图片：

 

也可以尝试最小化浏览器，然后再恢复浏览，或者尝试锁定计算机后重新解锁等操作

同样都能够触发visibilityChange

因此，我们只要对PageVisibility的兼容进行判断，再者对visibilityChange进行监听，我们就能够对应处理一些js事件
页面的展示，音视频播放等等~~~ 是不是还挺有用的？ 不妨一试！！！ 

本文参考： http://www.ruanyifeng.com/blog/2018/10/page_visibility_api.html