javascript - 检测浏览器选项卡是否处于事件状态或用户已切换

Question

如何检测用户是否正在切换到另一个浏览器选项卡？

目前，我有这个:

$(window).on("blur focus", function (e) {

    var prevType = $(this).data("prevType");

    if (prevType != e.type) { //  reduce double fire issues
        switch (e.type) {
            case "blur":
                $('.message').html('<div class="alert alert-error">Oops. You navigated away from the ads <a id="start" class="butt green">Resume</a></div>');

                var myDiv = $("#bar");
                myDiv.clearQueue();
                myDiv.stop();
                clearInterval($timer);
                $timer = null;
                break;
            case "focus":
                // do work
                break;
        }
    }

    $(this).data("prevType", e.type);
});

但这只有在用户最小化事件窗口时才有效。

Answer 1

现在我们可以使用 visibility API .

为了处理不同浏览器特定的语法，我编写了这段小代码:

var vis = (function(){
    var stateKey, eventKey, keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function(c) {
        if (c) document.addEventListener(eventKey, c);
        return !document[stateKey];
    }
})();

用法:

var visible = vis(); // gives current state

vis(aFunction);      // registers a handler for visibility changes

示例:

vis(function(){
  document.title = vis() ? 'Visible' : 'Not visible';
});

Demonstration page