JS 监听浏览器各个标签间的切换

这篇文章是别人写的，以为挺实用就搬过来了，跟你们分享一下。

之前看到过一些网页，在标签切换到其它地址时，网页上的标题上会发生变化，一直不知道这个是怎么作的，最近查了一些资料才发现有一个 visibilitychange 事件就能够搞定，这里将介绍一下页面可见性（Page Visibility）API的简单应用。

 

visibilitychange事件介绍

简单的说，当用户最小化网页或移动到另外一个标签时，API会发送 visibilitychange 有关该网页的可见性的事件。你能够检测到该事件并执行一些操做或行为。例如：标签页隐藏的时候中止播放音乐视频、中止一些没必要要的轮询，还有中止一些诸如轮播等循环动画效果等等。这些能够节省服务器和本地的开销。

用例

• 网站有一个图片轮播，不该前进到下一张幻灯片，除非用户正在查看该页面。

• 显示信息仪表板的应用程序不但愿在页面不可见时轮询服务器以进行更新。

• 网页要检测其是否正在进行预渲染，以便其能够准确计算网页浏览量。

之前开发人员每每在客串上注册 onblur 和onfocus 来检测页面是否是活动页面，但它不会告诉您页面对用户是隐藏的。Page Visibility API 解决了这个问题。

浏览器兼容性

这个事件已经获得现代浏览器普遍的支持，不过一些老版本的浏览器须要加相应的前缀。

Chrome (Webkit)	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
13前缀webkit  33无需前缀	10前缀moz 18无需前缀	10前缀ms	12.10	7

 

document的可见性属性

Page Visibility (Second Edition) 中定义了2个只读的 document 属性：hidden 和 visibilityState。

其中 document.hidden 是一个布尔值，简单的表示标签页显示或者隐藏。而 document.visibilityState 属性更为详细，目前有四个可能的值：

visible : 页面内容至少部分可见。这意味着在实际状况中，该网页是一个非最小化窗口的可见标签页。

hidden : 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。

prerender : 网页内容被预渲染而且用户不可见。

unloaded : 若是文档被卸载，那么这个值将被返回。

通常状况下咱们使用 document.hidden 就能知足一般的需求。

为了支持老版本的浏览器，咱们须要对 document.hidden 在作一些前缀处理：

 

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

 

 一样的，咱们能够获取 document.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];
}

 

visibilitychange监听事件

你能够在 document对象上注册一个监听 visibilitychange 事件，根据 document.hidden 或者 document.visibilityState 属性作一些业务逻辑：

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