判断标签页显示隐藏（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。

//获取当前所在浏览器，给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);
    }

标签：return,标签,prefixes,visibilitychange,var,浏览器,hidden,document,隐藏
来源： https://blog.csdn.net/dyl_csdn/article/details/110533804