Executar JavaScript quando a janela do navegador for redimensionada. Dica 28

Bem vindo a dica 28 de JS da Em Busca do Código, e nesta dica nós veremos como executar um JS quando a janela do navegador for redimensionada.

O vídeo complementa o texto e o texto completa o vídeo, assista.

Para isso nós utilizaremos o evento onresize. Para realizar esta dica eu estou utilizando o editor de texto open-source chamado Brackets, desenvolvido pela Adobe e comunidade. Além de um editor de texto ou IDE, você também precisa de dois arquivos, um .html e outro .js.

Evento onresize

Como o título já diz, o evento onresize quando a janela foi redimensionada, e repare bem na palavra foi, mas vamos começar a dica.

Em nosso documento HTML inicial temos um padrão, assim como está sendo utilizado nessas dicas de JS. Lembrando que você está na dica número 28 de um curso aberto de JavaScript.

A seguir o Código fonte HTML inicial.

<!DOCTYPE html>
<html>
    <head>
        <title>Evento onresize em JavaScript. Dica 28</title>
        <script src="js28.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Evento onresize em JavaScript. Dica 28</h1>
        <h2 id="quantas"></h2>
    </body>
</html>

Utilizaremos o evento na tag body, lembrando que, esta é uma dica baseada na documentação da W3C. Se alguma vez eu esquecer de colocar as fontes das dicas e artigos na parte escrita (site), por favor, me lembre. Isso é importante para o SEO do site.

Já informando uma função que iremos criar no JS. Tudo o que precisamos fazer no HTML já foi feito, agora vamos ao JavaScript (.js).

Nosso documento JS inicial está em branco, e a primeira informação que iremos inserir é a função que acabamos de criar no JS.

function redimensinada() {
}

Neste exemplo nós iremos contar quantas vezes a janela do navegador foi redimensionada. E para isso precisamos criar duas variáveis.

var x = 0;
var vezes = "";

Este tipo de exemplo já foi utilizado em dicas anteriores, claro que, de outra forma, junto com o link da W3C nas fontes que estão no final desta dica, deixei mais duas dicas onde contamos o número de vezes que os eventos são acionados, para caso queira conferi-las.

A variável com nome de x está com valor inicial 0 (zero). O próximo passo é dentro da função, onde iremos dar um valor a variável chamada vezes.

vezes = x += 1;

Com essa linha de código, toda vez que o evento for acionado, será somado mais um no valor da variável com nome vezes.

Agora utilizaremos document.getElementById para vermos o resultado em nossa tag h2, que por algum acaso, no documento HTMl inicial, já estava com um id.

document.getElementById("quantas").innerHTML = "Redimensionada quantas vezes: "+vezes;

Agora vem os testes, e o evento funciona, mas existe algo muito interessante. Se o usuário estiver em outra aba quando redimensionar a janela do navegador o evento não será acionado. Se ele voltar para a aba onde está esse evento e, a janela do navegador estiver com uma dimensão diferente, com relação da que estava antes de sair da aba, o evento será acionado, somente, quando ele voltar para a aba e, se ela não estiver mais com as mesmas dimensões. Se quando ele voltar para a aba as dimensões da janela do navegador estiverem idênticas a de quando ele saiu desta aba, o evento não será acionado. Não importando quantas vezes a janela do navegador foi redimensionada.

Reparou em algo diferente na minha forma de explicar está dica, melhorou?

Espero que está dica tenha sido útil, se foi útil e se possível deixe seu like lá no YouTube, e até mais.

Código fonte JavaScript (completo):

var x = 0;
var vezes = "";

function redimensinada () {
vezes = x += 1;
document.getElementById("quantas").innerHTML = "Redimensionada quantas vezes: "+vezes;
}

Fontes:

W3C: onresize
Diferença entre onkeydown e onkeypress em JavaScript. Dica 21
Evento onkeyup e métodos toLowerCase e toUpperCase em JavaScript. Dica 23

Confira outras dicas de JS do site. Já temos muito mais que o básico.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.