mozilla
您的搜索结果

    使用页面可见性API

    概述

    页面可见性API可以让你知 道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了,切换到显示状态的时候也同样.你可以给该事件注册监听函数,在页面的可见与不可见状态进行切换时,执行对应的操作.

    用处

    该API一个很好的用处就是能够在页面切换到不可见状态时暂停执行一些不必要的操作,以减少资源的浪费.

    用例

    在一个多标签的浏览器中,某个网页所在的标签页很有可能被切换到后台,这时,该网页是用户不可见的. 一些网站很有可能希望在此时做出一些动作. 比如:

    • 某网站有个图像幻灯片页面,自动播放图片.如果该页面被切换到了不可见状态,图片的播放操作应该暂停,直到该页面重新对用户可见时,幻灯片才会继续自动播放.
    • 某web应用程序每隔一段时间会自动访问服务器更新页面内的及时信息.在页面不可见时,应该停止这种请求动作.
    • 某页面想要检测自己是否被预渲染,这样可以获得更准确的页面访问量.

    在过去,开发者使用一些不完善的手段间接的实现上述目的.例如通过使用onblur/onfocus事件,在当前页面失去焦点时得到通知.但这样仍然无法检测到正确的页面可见性(失去焦点并不意味着不可见,等等).如今,页面可见性API可以办到了.

    例子

    查看在线演示(有声视频,页面不可见时,视频自动暂停.恢复可见时,视频自动播放,下面是实现代码):

    // 用来保存视频是否处于暂停状态的变量,由于视频被设置成自动播放,所以这个值默认为"false"
    sessionStorage.isPaused = "false";
    // 找到当前浏览器支持的hidden属性名和visibilitychange事件名
    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }
    var videoElement = document.getElementById("videoElement");
    // 如果页面被隐藏,暂停视频
    // 如果页面被显示,播放视频
    function handleVisibilityChange() {
        if (document[hidden]) {
            videoElement.pause();
        } else if (sessionStorage.isPaused !== "true") {
            videoElement.play();
        }
    }
    // 如果浏览器不支持addEventListener或页面可见性API,发出警告
    if (typeof document.addEventListener === "undefined" || typeof hidden === "undefined") {
        alert("This demo requires a browser such as Google Chrome that supports the Page Visibility API.");
    } else {
        // 注册visibilityChange事件处理函数
        document.addEventListener(visibilityChange, handleVisibilityChange, false);
        // 页面关闭时,还原该页favicon图标,否则会一直显示paused.png
        window.addEventListener("unload", function () {
            favicon.change("/favicon.ico");
        }, false);
        // 当视频暂停时,设置favicon图标为paused.png
        videoElement.addEventListener("pause", function () {
            favicon.change("images/paused.png");
            if (!document[hidden]) {
                // 如果不是因为页面被隐藏而暂停的,则把isPaused设置为"true"
                sessionStorage.isPaused = "true";
            }
        }, false);
        // 当视频播放时,设置favicon图标为playing.png
        videoElement.addEventListener("play", function () {
            sessionStorage.isPaused = "false";
            favicon.change("images/playing.png");
        }, false);
        // 设置当前页面的标题为视频已播放时长
        videoElement.addEventListener("timeupdate", function () {
            document.title = Math.floor(videoElement.currentTime) + " second(s)";
        }, false);
    }

    相关属性

    document.hidden

    如果该页面处于用户不可见的状态,返回true,否则返回false.

    document.visibilityState

    返回一个字符串,表明该页面的可见状态.可能的值有:

    • visible : 页面内容至少部分可见.意味着该页面是一个非最小化窗口的前台标签页.
    • hidden : 页面内容用户不可见.意味着当前浏览器窗口处于最小化模式,或者该页面是一个后台标签页.
    • prerender : 页面内容正在被预渲染,用户不可见(这种情况下document.hidden会返回true). 一个页面只有在初始化时可能为这个值, 一旦变为其他两种值,不可能再变回来.
    • unloaded : 当前文档已经被卸载,用户不可见(这种情况下document.hidden会返回true).
    //startSimulation和pauseSimulation函数定义在其他地方
    function handleVisibilityChange() {
        if (document.hidden) {
    	    pauseSimulation();
        } else  {
           startSimulation();
        }
    }
    document.addEventListener("visibilitychange", handleVisibilityChange, false);
    

    备注

    <iframe>页面的可见性与父页面相同.使用CSS隐藏或显示这个iframe并不会触发它的visibilitychange事件.

    规范

    Specification Status Comment
    W3C Page Visibility API Recommendation  

    浏览器兼容性

    Feature Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 13 webkit 10 (10) moz
    18 (18)
    10 ms 12.10 Not supported
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support Not supported 10.0 (10) moz
    18.0 (18)
    ? 12.10[*] Not supported

    [*] 的意思是该浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.

    相关链接

    文档标签和贡献者

    此页面的贡献者有: ziyunfei
    最后编辑者: ziyunfei,