javascript - sesion - Detecta si la pestaña del navegador está activa o si el usuario se ha desconectado

evento al salir de la pagina javascript

Question

¿Cómo puedo detectar si un usuario está cambiando a otra pestaña del navegador?

Actualmente, tengo esto:

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

Pero eso solo funciona cuando el usuario está minimizando la ventana activa.

Answer 1

Ahora podemos usar la API de visibilidad .

Para tratar con las diferentes sintaxis específicas del navegador, hice este pequeño código:

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

Uso:

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

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

Ejemplo:

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

Página de demostración