Como Abrir uma Janela Centralizada no Navegador com JavaScript

Em diversos projetos web, pode ser necessário abrir uma nova janela ou pop-up com um conteúdo específico, e muitas vezes é interessante que essa janela seja centralizada na tela para proporcionar uma melhor experiência para o usuário. Neste post, vamos aprender como fazer isso usando uma função simples em JavaScript.

O Desafio

Imagine que você tenha um link ou um botão em seu site e, ao clicar nele, você queira abrir uma janela com um conteúdo específico, como um formulário ou uma imagem, e que essa janela seja centralizada no navegador.

Como Resolver

Para abrir uma janela no navegador de maneira centralizada, utilizaremos a função window.open() em conjunto com alguns cálculos para posicionar a janela no centro da tela do usuário. A seguir, explicamos o passo a passo de como fazer isso.

Exemplo de Código JavaScript

Aqui está a função que usamos para abrir a janela centralizada:

<script>
    function abrirJanelaCentroReduzida(url, nome, largura, altura) {
        // Calcula as posições para centralizar a janela
        const left = (screen.width - largura) / 2;
        const top = (screen.height - altura) / 2;

        // Abre a janela com as configurações especificadas
        const janela = window.open(url, nome, `width=${largura}, height=${altura}, left=${left}, top=${top}`);

        // Verifica se a janela foi aberta corretamente e foca nela
        if (window.focus) {
            janela.focus();
        }
    }
</script>

Explicando o Código

1. Parâmetros da Função:
   • url: O endereço da página ou recurso que você quer abrir na nova janela.
   • nome: O nome da janela, que pode ser usado para referenciá-la posteriormente.
   • largura: A largura da nova janela.
   • altura: A altura da nova janela.
2. Cálculos para Centralizar a Janela:
   • A função calcula as posições left (esquerda) e top (cima) para que a janela seja aberta no centro da tela, levando em consideração o tamanho da tela do usuário (screen.width e screen.height).
3. Abrindo a Janela:
   • window.open(url, nome, options) abre a janela com as dimensões e posições calculadas. O parâmetro options define o tamanho da janela e sua posição.
4. Foco na Janela:
   • A função verifica se o método focus() está disponível e, se sim, chama janela.focus(), garantindo que a nova janela seja trazida à frente da janela atual.

Como Usar em HTML

Agora que já temos a função JavaScript pronta, podemos usá-la em elementos HTML, como links (<a>) e botões (<button>). Veja os exemplos abaixo:

Exemplo 1: Usando com um Link

Se você deseja abrir a janela ao clicar em um link, você pode fazer da seguinte forma:

<a href="javascript:void(0);" onclick="abrirJanelaCentroReduzida('https://example.com', 'janelaExemplo', 800, 600)">Abrir Janela</a>

• href="javascript:void(0);": Isso impede que o link cause um redirecionamento para outra página. Em vez disso, a função JavaScript será chamada.
• onclick="abrirJanelaCentroReduzida(...)": Quando o link for clicado, a função será executada e abrirá a nova janela com a URL e as dimensões especificadas.

Exemplo 2: Usando com um Botão

Da mesma forma, você pode usar um botão para acionar a função:

<button onclick="abrirJanelaCentroReduzida('https://example.com', 'janelaExemplo', 800, 600)">Abrir Janela</button>

• onclick="abrirJanelaCentroReduzida(...)": Aqui, o botão chama a função para abrir a janela ao ser clicado.

Personalizando a Função

Você pode personalizar a função abrirJanelaCentroReduzida para atender a diferentes necessidades, como alterar o tamanho da janela ou a URL. Por exemplo:

• Para abrir uma janela com dimensões maiores ou menores.
• Para abrir uma janela com ou sem a barra de rolagem (scrollbars=yes ou scrollbars=no).
• Para incluir ou excluir a barra de ferramentas do navegador (toolbar=no).

Considerações Finais

• Responsividade: Ao definir a largura e altura da janela, sempre considere a responsividade e os diferentes tamanhos de tela dos usuários. Uma janela muito pequena ou grande pode prejudicar a experiência.
• Bloqueadores de Pop-ups: Alguns navegadores possuem bloqueadores de pop-ups que podem impedir que a janela seja aberta. Certifique-se de que a função seja usada de forma responsável.
• Fuso Horário: Se você estiver lidando com dados de hora e data ao abrir a janela, tome cuidado com os fusos horários, como discutido anteriormente.

Conclusão

Abrir uma janela centralizada no navegador pode ser uma maneira útil de apresentar conteúdo adicional sem perder o foco do usuário na página principal. Usando a função window.open() e alguns cálculos simples, podemos controlar a posição da janela e criar uma experiência mais agradável para o usuário.