H5 之 Page Visibility

这个是今天刚发现的，想起之前那个在页面用video标签视频播放，别人切换页面后仍在继续播放，体验很不好，用这个API就可以很完美的解决。

Page Visibility API 可以让你获取到这种状态。在用户使用切换标签的方式来浏览网页时,非常合理的情况是任何在后台页面都不会展示给用户。当用户最小化网页或者浏览到其他标签的网页时，API将发送一个关于当前页面的可见信息的事件visibilitychange。你可以检测该事件然后执行一些活动或是展示不同的效果。比如，如果你的网站app正在播放一个视频，也许当用户浏览其他浏览器时它可以暂停，那么当用户切换回来的时候，就可以继续播放了。用户可以继续观看，不会因为浏览其他的浏览器导致丢失当前视频的进度。

1、document.hidden

为布尔值，页面隐藏状态时返回true，否则返回false

2、document.visibilityState

顾名思义就是状态：

visible : 页面内容至少是部分可见。在实际中，这意味着页面是非最小化窗口的前景选项卡；

hidden : 页面内容对用户不可见。在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下；

prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。注释：浏览器支持是可选的；

unloaded : 页面正在从内存中卸载。注释：浏览器支持是可选的。

一般我们主要也就用到前两个

举一个非常简单的例子

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

        console.log(document.hidden)

    })

在游览器标签切换一下我们会发现是产生效果的

这样我们就可以根据不同的状态进行相对应的操作。

接下来就是非常重要的兼容性,测试了一下在IE9及一下是不可以的，这也在意料之中，别的游览器只测试了我电脑上版本都是支持的只是有的需要前缀。扔一段检测及兼容主要游览器的代码如下（来自张鑫旭博客）

var pageVisibility = (function() {

    var prefixSupport, keyWithPrefix = function(prefix, key) {

        if (prefix !== "") {

            return prefix + key.slice(,).toUpperCase() + key.slice();

        }

        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;

        }

    };

})(undefined);

如果不支持会返回undefined.

巴特西

H5 之 Page Visibility

1、document.hidden

2、document.visibilityState

最新文章

热门文章