25.02.2025

Definindo Dimensões em window.open JS: Largura e Altura

Resposta Rápida

Para criar uma nova janela com dimensões específicas, use o método window.open() em um manipulador de evento onclick:

<button onclick="window.open('http://exemplo.com', '_blank', 'width=200,height=100')">
  Abrir Janela
</button>

Defina os parâmetros width e height em pixels de acordo com suas preferências.

O comando window.open() no contexto do evento onclick permite que você defina as dimensões da janela pop-up ajustando os valores de width e height. Você também pode personalizar ainda mais a funcionalidade da janela com outros parâmetros, incluindo barras de rolagem, barras de menu e a capacidade de redimensionar a janela.

Janela Funcional Personalizável

Aprimore a funcionalidade da janela pop-up adicionando parâmetros adicionais:

<button onclick="window.open('http://exemplo.com', '_blank', 'width=350,height=250,scrollbars=yes,menubar=no,resizable=yes')">
  Abrir Janela Personalizável
</button>

Com essas configurações, sua janela se tornará mais interativa: ela ganhará barras de rolagem, não exibirá uma barra de menu e permitirá redimensionamento. Lembre-se de separar todos os parâmetros com vírgulas e envolvê-los em aspas simples.

Apelo Visual: Estilo CSS

Um design atraente melhora a impressão de interação com a interface. Deixe os estilos CSS incentivarem ações:

button {
  cursor: pointer;
  /* Estilos de design para cativar a atenção sem distrair do propósito principal. */
}

Alterar o cursor para pointer indica que o botão é clicável. Um design adequado sugere elementos que estimulam a atividade.

Lidando com Bloqueadores de Pop-ups

Bloqueadores de pop-ups podem ser um problema. Aborde-os com tato:

• Informe os visitantes do site sobre a necessidade de permitir pop-ups para acessar seu recurso.
• Detecte a presença de um bloqueador de pop-up:

var novaJanela = window.open('http://exemplo.com', '_blank', 'width=200,height=100');
if (!novaJanela) {
  alert('Por favor, desative seu bloqueador de pop-ups para ter uma experiência completa em nosso site.');
}

Garanta que os usuários estejam cientes dos bloqueadores e não percam sua mensagem.

Visualização

Criar uma janela pop-up de tamanho específico pode ser feito usando o método window.open():

// Deixe o URL te levar às estrelas 🌕 (Só de brincadeira!)
button.onclick = function() {
    window.open('https://exemplo.com', 'ExemploJanela', 'width=400,height=300');
};

Exemplo de representação visual:

[👆] (Você está aqui) Clique no botão
     ↓
[🖼️] (Janela Pop-up | 400x300) Bem-vindo ao Exemplo.com!

Clicar no botão traz à tona um "quadro" exibindo conteúdo do tamanho especificado (400x300 pixels).

Compatibilidade com Diferentes Navegadores

O comportamento pode variar entre diferentes navegadores. Assegure-se de que a chamada window.open() processe corretamente seus comandos em vários dispositivos:

• Utilize detecção de capacidade do navegador para considerar suas características específicas.
• Teste seu código em diferentes navegadores.
• Encontre soluções alternativas para cada plataforma.

A tabela abaixo mostra a compatibilidade das configurações window.open() para navegadores populares:

Capacidade	Chrome	Firefox	Safari	Edge	IE
Modo de Tela Cheia	✔️	✔️	❌	✔️	❌
Redimensionamento	✔️	✔️	✔️	✔️	✔️
Barras de Rolagem	✔️	✔️	✔️	✔️	✔️

Recursos Úteis

1. Método Window.open() - Web API | MDN — Guia detalhado e sintaxe do método window.open() em JavaScript.
2. Método Window.open() — Exemplos específicos e tutoriais para usar window.open().
3. Novas Perguntas Marcadas como 'window.open' - Stack Overflow — Análise aprofundada de perguntas e discussões comuns relacionadas ao window.open() na comunidade de desenvolvedores.
4. JavaScript - Pop-ups — Visão geral de como fazer e as diferenças entre navegadores com pop-ups em JavaScript.

Video

Navigation