页面隐藏的黑科技-visibilitychange

最新推荐文章于 2024-07-16 16:17:48 发布

firstBlood丶TT

最新推荐文章于 2024-07-16 16:17:48 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_29483555/article/details/74518768

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用visibilitychange事件监测页面是否处于活动状态的示例。通过JavaScript代码，该示例可以检测用户是否正在查看当前页面，并据此改变页面标题。

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

**<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用 visibilitychange 事件判断页面可见性 DEMO页面</title>
</head>
<body>
<h1>用 visibilitychange 事件判断页面可见性 DEMO页面</h1>
<a href="http://www.css88.com/archives/6103">返回文章页面</a>
<p>打开页面后，切换浏览器标签页，观察这个页面的标题。</p>
<p>下面还有个广告：</p>
<div class="bd-guanggao" style="padding: 0px 0px 10px; width: 960px; margin: 20px 0">

    <script type="text/javascript">
        /*tool大-顶部*/
        var cpro_id = "u1542382";
    </script>
    <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>

</div>
<script>
    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;
    }
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];
    }

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

    // Set the initial value
    document.title = document[getVisibilityState()]+"状态";
</script>
</body>
</html>**