10

Gostaria de saber uma maneira de checar se o usuário saiu da janela da minha página com Javascript, por exemplo, caso ele troque de aba (para pesquisar algo no Google por exemplo) o script troca o título da janela para outro título que eu definir..

1
  • 1
    probleminha chato esse, já quebrei bastante a cabeça com isso e cheguei a conclusão que não existe uma maneira confiável crossbrowser de resolver. a coisa fica mais chata ainda quando tem iframe na jogada. Quando o usuário interage com o iframe, o browser chama o teu window.blur... Commented 9/03/2014 às 23:10

3 Respostas 3

9

Penso que pode usar o evento blur

Exemplo usando javascript simples:

window.addEventListener('blur', function(){
    // correr codigo aqui
});

No exemplo para além de disparar o evento na mudança de janela, quando faz focus na barra de endereço ele dispara também.

EDIT:

Acrescento mais info depois de uma boa pergunta do @JoãoParaná:

No Safari/IOS o evento blur não dispara. Nesse caso deve ser usado o pagehide. Pode ter de usar-se os dois caso necessário:

window.addEventListener('blur', correrEstaFuncao);
window.addEventListener('pagehide', correrEstaFuncao);

Demo

2
  • Oi @sergio, o exemplo não funcionou no Safari do iPad com iOS 7. Não testei em outras versões. Commented 9/03/2014 às 0:44
  • 1
    @JoãoParaná, boa questão. Juntei mais info à resposta.
    – Sergio
    Commented 9/03/2014 às 8:03
2

A nova api HTML5 Page Visibility API faz justamente o que você está pedindo:

if(document.hidden !== undefined){
    document.addEventListener("visibilityChange", acao, false);   
}

function acao(){
    console.log("O estado da janela mudou!");
}

Exemplo: FIDDLE

1

A algum tempo eu procurei por um script que fazia justamente isso.

Ele adiciona listeners para vários tipos de browsers. Chamando a função functionHidden quando a página perder o "foco". E functionVisible quando a página voltar a ter "foco".

(function () {
    var hidden = "hidden";
    if (hidden in document) document.addEventListener("visibilitychange", onchange);
    else if ((hidden = "mozHidden") in document) document.addEventListener("mozvisibilitychange", onchange);
    else if ((hidden = "webkitHidden") in document) document.addEventListener("webkitvisibilitychange", onchange);
    else if ((hidden = "msHidden") in document) document.addEventListener("msvisibilitychange", onchange);
    else if ('onfocusin' in document) document.onfocusin = document.onfocusout = onchange;
    else window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;

    function onchange(evt) {
        var evtMap = {
            focus: true,
            focusin: true,
            pageshow: true,
            blur: false,
            focusout: false,
            pagehide: false
        };

        evt = evt || window.event;
        if (evt.type in evtMap) evtMap[evt.type] ? functionVisible() : functionHidden();
        else this[hidden] ? functionHidden() : functionVisible();
    }

    function functionVisible() {
        console.log('Visible');
    }

    function functionHidden() {
        console.log('Hidden');
    }
})();

Esse script mapeia os eventos de quase todos os browsers.

Você poderá testa-lo no jsfiddle olhando o console.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .