Abrindo uma Nova Janela do Navegador a Partir de um Link Sem JavaScript
Resposta Rápida
Para abrir um link em uma nova janela em vez de uma nova aba, aplique o atributo target
com o valor _blank
ao elemento <a>
. Em seguida, defina os parâmetros da janela usando o evento onclick
. Veja como fica em JavaScript:
<a href="javascript:void(0);" onclick="window.open('https://www.example.com', 'novaJanela', 'width=500, height=300');">Abrir em uma nova janela</a>
Esse código abrirá a URL https://www.example.com
em uma nova janela com tamanho de 500x300 pixels. Lembre-se de que o comportamento do link pode ser afetado por bloqueadores de pop-up e configurações do usuário no navegador.
Lidando com Bloqueadores de Pop-up
Os bloqueadores de pop-up incorporados na maioria dos navegadores podem interferir com o método window.open()
. Aproveite para informar os usuários que ativar pop-ups ou fornecer outra opção de navegação pode ser necessário para que seu site funcione normalmente.
Entendendo o Comportamento do Navegador
Como um navegador interpreta o atributo target="_blank"
depende principalmente de como ele escolhe lidar com esse atributo. Geralmente, uma nova aba é aberta em vez de uma nova janela. Navegadores como Chrome e Firefox preferem usar abas para aprimorar a conveniência da interface do usuário. Você não pode alterar esse comportamento do navegador apenas com HTML puro. No entanto, com JavaScript, é possível especificar os parâmetros da janela sendo aberta.
Consistência entre Diferentes Navegadores
Existem diversos navegadores e plataformas nos quais o método window.open()
deve funcionar corretamente. É também importante levar em conta as particularidades de como esse método opera em dispositivos móveis, onde o suporte a janelas pode ser limitado. Investigue o comportamento do método em diferentes sistemas para garantir uma experiência do usuário estável.
Visualização
<!-- Vamos contornar o sistema: em vez de uma nova aba, abra uma nova janela! -->
<a href="https://example.com" target="_blank" onclick="window.open(this.href, 'novaJanela', 'width=300,height=250'); return false;">Por favor, abra em uma nova janela!</a>
<!-- Vamos ser educados: pedindo ao usuário “Por favor” -->
<!-- P.S. Não se esqueça de retornar 'false' para cancelar a ação padrão do link. O nosso pequeno segredo ;) -->
Neste exemplo, um truque inteligente é utilizado com apenas cinco linhas de código. Com o elemento <a>
e o evento onclick
em JavaScript, o navegador abrirá uma nova janela em vez de uma aba.
Avaliando Questões de Segurança
Ao usar window.open()
, é aconselhável ter cautela. Os navegadores podem bloquear essa função devido à sua associação com spam e outras práticas não éticas. Ativar essa função normalmente requer uma ação do usuário, como um clique, o que ajuda a minimizar consequências indesejadas.
Uso Inteligente de Frameworks JavaScript
Embora window.open()
possa ser utilizado com frameworks como jQuery, sua funcionalidade principal permanece inalterada — essas ferramentas apenas simplificam a sintaxe sem proporcionar controle adicional ou oportunidades para alterar o comportamento padrão do navegador.
Contexto Histórico e Padrões Modernos
Lembre-se dos padrões HTML5: anteriormente, usava-se target="new"
para abrir uma nova janela, mas agora é recomendado usar _blank
para novos contextos de navegação. Isso torna seu uso mais seguro e em conformidade com os requisitos modernos.
Recursos Úteis
- Elemento <a> - HTML: Linguagem de Marcação de Hipertexto | MDN
- Atributo target do HTML
- javascript - Abrir URL em uma nova aba (não em uma nova janela) - Stack Overflow
- Quando Usar target="_blank" | CSS-Tricks
- Padrão Vivo de HTML
- .attr() | Documentação da API jQuery
- WebAIM: Links e Hipertexto - Texto e Aparência do Link