JS监视浏览器选项卡之间的切换

我以前看过一些网页. 当标签切换到另一个地址时，网页上的标题将更改. 我从来不知道这是怎么做的. 最近，我检查了一些信息，发现有一个可见性更改事件. ，这里将介绍页面可见性（Page Visibility）API的简单应用.

可见性更改事件简介

简而言之，当用户最小化网页或移至另一个选项卡时，API将发送有关网页可见性的可见性更改事件. 您可以检测到该事件并执行某些操作. 例如: 隐藏选项卡时停止播放音乐视频，停止一些不必要的轮询，并停止一些循环效果，例如轮播. 这些可以节省服务器和本地费用.

用例

过去，开发人员曾经在ono上注册onblur和onfocus来检测页面是否为活动页面，但它不会告诉您该页面对用户是隐藏的. Page Visibility API解决了此问题.

浏览器兼容性

此事件已得到现代浏览器的广泛支持，但是某些旧的浏览器需要相应地添加前缀.

Chrome（Webkit）

Firefox（Gecko）

Internet Explorer

歌剧

Safari（WebKit）

13个前缀Webkit

33不需要前缀

10个前缀moz

18不需要前缀

10个前缀毫秒

12.10

7

文档的可见性属性

页面可见性（第二版）定义了两个只读文档属性: hidden和visibleState.

document.hidden是一个布尔值，仅表示显示或隐藏选项卡页. document.visibilityState属性更加详细，当前具有四个可能的值:

visible: 页面的内容至少部分可见. 这意味着实际上，网页是带有未最小化窗口的可见标签页.

隐藏的: 页面的内容对用户不可见. 实际上，这意味着文档是背景选项卡或最小化窗口的一部分，或者是系统锁定时的状态.

呈现者: 网页的内容是预呈现的，并且对用户不可见.

已卸载: 如果文档已卸载，则将返回此值.

在通常情况下，我们可以使用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.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);
}

上面的代码将在页面可见性更改时修改document.title的值.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-306614-1.html