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..
-
1probleminha 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...– Tony LâmpadaCommented 9/03/2014 às 23:10
3 Respostas
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
-
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
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
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.