JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

Trocar titulo da página ao sair da página!

4 participantes

Ir para baixo  Mensagem [Página 1 de 1]

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Olá pessoal, hoje trago um tutorial de como trocar o título da página ao sair da página.

Utilizamos o seguinte código Javascript
Código:
var titleAtual = document.title;
window.addEventListener('blur', function(){
   document.title = "Não esqueça de alterar seu texto aqui!!";
});
window.addEventListener('focus', function(){
   document.title = titleAtual;
});

Coloque o investimento em todas as páginas.. E pronto, é só trocar pelo texto que você quiser..

Explicando o código:
Código:
//salvamos o valor do título atual
var titleAtual = document.title;
//adicionamos um evento a página (blur) que ao tirar o foco do elemento ele irá executar uma função para nós..
window.addEventListener('blur', function(){
//função a ser excutada
   document.title = "Volte aqui :(";
});
//adicionamos outro evento para quando o usuário voltar a página
window.addEventListener('focus', function(){
//então pegamos o valor salvo na nossa variável 'titleAtual' e inserimos novamente no título do fórum
   document.title = titleAtual;
});

Resultado:
Experimente trocar de aba neste fórum..
http://punbbteste.forumeiros.com

Imagem do resultado:
Usuário na página
Trocar titulo da página ao sair da página! LYrGpXn

Usuário em outra aba
Trocar titulo da página ao sair da página! Kg2zt2Q


É isso ai, espero que gostem!



Última edição por Wagner em Dom 09 Mar 2014, 2:32 pm, editado 2 vez(es) (Motivo da edição : Adição de imagens do resultado)

http://wagneraugusto.com.br/

JScript

JScript
Administradores
Administradores

Olá amigo!

Eu não entendi muito bem e não vi o efeito, poderia mostrar com imagens?

JS

http://autoitbrasil.com

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

É bem simples.. Veja:
Aqui o usuário está na nossa página
Trocar titulo da página ao sair da página! LYrGpXn

Aqui ele trocou de aba e está vendo conteúdo de outra página:
Trocar titulo da página ao sair da página! Kg2zt2Q

http://wagneraugusto.com.br/

joelson0007

joelson0007
Moderadores
Moderadores

legal @wagner visualizei o efeito aqui, será que não confunde o usuário ao visualizar as abas, acho que não né, mode o favicon neh. 

até mais.

JScript

JScript
Administradores
Administradores

kkk, agora foi que eu entendi o efeito!!!

Ficou muito bom sim amigo, eu nem tinha me dado conta que a aba tinha que ser do navegador, eu estava clicando nos menus e tentando ver o efeito...

JS

http://autoitbrasil.com

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

@Joelson, realmente só ficara identificado através do Favicom, ou se o cara por o nome do site ali e depois a mensagem..

http://wagneraugusto.com.br/

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Pessoal, andei pesquisando e vejam o que encontrei: https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

HTML5 tem uma API justamente com esse objetivo..

Aqui tem um fiddle (que não é meu) com um preview de como funciona!!
http://jsfiddle.net/LhEEE/1/

http://wagneraugusto.com.br/

joelson0007

joelson0007
Moderadores
Moderadores

Muito legal @wagner não conhecia esses métodos, vou estudar para aplicar em algo.

JScript

JScript
Administradores
Administradores

Mas eu achei o seu muito mais simples e funcional!!!

JS

http://autoitbrasil.com

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

JScript, fiz uns testes aqui e no Safari eu não obtive resultados satisfatórios! Mas aqui está a solução:
Código:
window.addEventListener('pagehide', youfunction);

Ainda é possível usar os dois para caso de incompatibilidade com outros browsers..

http://wagneraugusto.com.br/

JScript

JScript
Administradores
Administradores

Um UP para novas opiniões sobre o assunto...

JS

http://autoitbrasil.com

DiogoR.

DiogoR.
Membro
Membro

Olá,

Na verdade já tinha testado mas nunca cheguei a postar a minha opinião.

Achei muito interessante pois a partir deste código conseguimos fazer muitas outras coisas.

Obrigado por compartilhar @waghcwb.

Até Mais...

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos