Javascript — Detectando quando uma janela esta em foco

Olá Pessoal!

Em muitos casos precisamos detectar quando uma janela esta em foco ou se não esta em foco.

Imagine o cenário:

Quando a janela estiver em foco quero exibir um alerta na janela, mas quando não estiver em foco quero reproduir um audio para o cliente identificar que existe um alerta

Isto é feito utilizando o evento “visibilitychange” no “document” de uma página.

Porem, esta função não possui ampla compatibilidade, então existem alternativas para ampliar sua compatibilidade.

Para isto, temos uma função para nos ajudar:

var hidden; 
var visibilityChange; 
var state; 

if (typeof document.hidden !== "undefined") {

    hidden              = "hidden";
    visibilityChange    = "visibilitychange";
    state               = "visibilityState";

} else if (typeof document.mozHidden !== "undefined") {

    hidden              = "mozHidden";
    visibilityChange    = "mozvisibilitychange";
    state               = "mozVisibilityState";

} else if (typeof document.msHidden !== "undefined") {

    hidden              = "msHidden";
    visibilityChange    = "msvisibilitychange";
    state               = "msVisibilityState";

} else if (typeof document.webkitHidden !== "undefined") {

    hidden              = "webkitHidden";
    visibilityChange    = "webkitvisibilitychange";
    state               = "webkitVisibilityState";

}

document.addEventListener(visibilityChange, function() {

    if( document[state] == "hidden" ){

        console.log("Oculto");

    }else if( document[state] == "visible" ){

        console.log("Visivel");

    }

}, false);

Nesta função, quando a janela estiver em foco será exibido “Visivel” no console, e quando não estiver em foco será exibido “Oculto”.

E assim terminamos, pessoal! 👩‍💼

Até a próxima! 👋