使用Page Visibility监听网页是否处于激活（可见）状态

最新推荐文章于 2024-05-06 15:03:20 发布

justforuse

最新推荐文章于 2024-05-06 15:03:20 发布

阅读量3.2k

点赞数 1

分类专栏： html/css 文章标签：网页激活

本文链接：https://blog.csdn.net/u014291497/article/details/53495192

版权

html/css 专栏收录该内容

75 篇文章

订阅专栏

本文介绍了如何利用Page Visibility API来监测网页是否处于激活（可见）状态，以实现如离开页面时自动暂停视频等功能。通过这个API，可以更准确地判断用户是否可见网页，区别于传统的focus和blur事件，后者只关注窗口焦点变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在饿了么点外卖的时候你会发现，如果你离开此页的话他的网页title会改变：
这里写图片描述

在这里虽然显得没那么重要，但是如果当前你在播放视频，离开此页的话我们可以实现自动暂停功能，还是挺方便的。

实现这个功能主要用到了Page Visibility API 这个功能。参考地址：https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

比如我们写一个简单的示例，当我们切换到其他页面的时候改变该页面的title。

<script>
(function() {
    var hidden = "hidden";

    //各个浏览器属性兼容
    if (hidden in document)
        document.addEventListener("visibilitychange", onchange);
    else if ((hidden = "mozHidden") in document)
        document.addEventListener("mozvisibilitychange", onchange);
    else if ((hidden = "webkitHidden") in document)
        document.addEventListener("webkitvisibilitychange", onchange);
    else if ((hidden = "msHidden") in document)
        document.addEventListener("msvisibilitychange", onchange);

    else if ("onfocusin" in document)
        document.onfocusin = document.onfocusout = onchange;

    else
        window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;

    //主要功能代码
    //网页状态改变事件
    function onchange(evt) {
        if(document[hidden]){
            document.title = "false";
        }else{
            document.title = "true";
        }
    }


    if (document[hidden] !== undefined)
        onchange({
            type: document[hidden] ? "blur" : "focus"
        });
})();
</script>

效果：
这里写图片描述

在上面的链接中有说道以前我们可以监听window对象的focus和blur事件，从而实现上述功能，但是这个方式存在问题，因为他判断的是网页“是否获取到焦点”，而不是对用户“可不可见”。

window.addEventListener("blur", onBlur);
window.addEventListener("focus", onFocus);

function onBlur(){
    document.title = false;
}
function onFocus(){
    document.title = true;
}