判断标签页显示隐藏(visibilitychange事件)

通过document.hidden属性,可判断页面是否可见。 如果不可见,则document.hidden为true.如果可见,则为false。
但是, 如果该页面只是被其它窗口挡住, 而非最小化该页面。则document.hidden仍然是false. 而不是不可见。

//visibilitychange事件,不同浏览器需要增加不同的前缀
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;
    }

使用visibilityState,获取元素可见状态,不同浏览器下,改属性需要增加不同的前缀。作用类似hidden。
判断标签页显示隐藏(visibilitychange事件)

//获取当前所在浏览器,给visibilityState增加前缀。
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];
    }

判断标签页显示隐藏的实例代码

  var visProp = getHiddenProp();
  //该浏览器是否支持获取标签页的状态
    if (visProp) 
    {
        //绑定标签页显示/隐藏状态变更事件
        var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
        document.addEventListener(evtname, function () {
            console.log("浏览器tab" + JSON.stringify(isHidden()));
        }, false);
    }
上一篇:javascript – 将JSON对象成员字符串值连接在一起


下一篇:页面可见性改变事件 : visibilitychange 详解