Обнаружение, если вкладка браузера активна или пользователь отключился

Как определить, переключается ли пользователь на другую вкладку браузера?

В настоящее время у меня есть следующее:

$(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);
});

Но это работает только тогда, когда пользователь минимизирует активное окно.

Ответы

Ответ 1

Теперь мы можем использовать 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';
});

Страница демонстрации