Como abrir nova aba com JavaScript

Neste artigo você vai aprender a como abrir nova aba com JavaScript, com apenas uma única linha de código!

Fala programador(a), beleza? Bora aprender sobre a linguagem JavaScript!

Em JS temos acesso a uma função que pode abrir links, que é a window.open

Nela passamos como argumento a URL que precisamos redirecionar o usuário

Porém somente com isso não temos o efeito desejado

Mas para tê-lo é simples também, vamos passar um segundo argumento que é o “_blank”

Isso faz com que o link seja aberto em nova aba!

Veja um exemplo completo do código necessário:

window.open(
  'https://www.google.com', '_blank'
);

No caso acima estamos abrindo o Google em nova aba, simples não é?

Este atributo _blank também é utilizado no HTML para as tags <a> abrirem uma nova aba

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Conclusão

Neste artigo você viu como abrir nova aba com JavaScript

Utilizamos a função window.open, que aceita dois argumentos

Um é a URL que queremos redirecionar o usuário e o segundo o atributo que faz abrir em nova página

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!

H2: Abrindo nova aba a partir de um clique:

Na prática tu quase nunca chama o window.open solto no meio do script

O normal é ele rodar quando o usuário faz alguma coisa, tipo clicar num botão

Se liga:

<button id="abrir">Abrir o Google</button>

document.getElementById(‘abrir’).addEventListener(‘click’, function () { window.open(‘https://www.google.com’, ‘_blank’) })

Aqui o clique é o gatilho, então a aba só abre quando a pessoa manda abrir

Tome cuidado! Quando o window.open dispara sozinho, sem nenhuma ação do usuário na frente, o bloqueador de pop-up do navegador pode segurar a abertura e não acontece nada na tela

Antes de sair caçando erro no código, dá uma olhada no bloqueador 🙂

H2: Como abrir nova aba em HTML, sem JavaScript:

Nem sempre tu precisa de JS pra isso

Se o que tu tem é um link comum, o próprio HTML resolve com o atributo target

<a href="https://www.google.com" target="_blank" rel="noopener">Abrir o Google</a>

O target="_blank" é o mesmo _blank que a gente passou no window.open, a ideia é idêntica: abre em nova aba

E o rel="noopener"? É uma boa prática de segurança, ele evita que a página aberta consiga mexer na janela que abriu ela

Regra de bolso: link é link, usa <a> com target

O window.open fica pra quando a abertura depende de alguma lógica antes, tipo validar um formulário e só então mandar o usuário pra outra página

H2: E se eu quiser abrir na mesma aba?

Mesma função, muda o segundo argumento

window.open(‘https://www.google.com’, ‘_self’)

O _self manda o navegador carregar a URL na aba atual, em vez de abrir outra

Vale guardar os dois na cabeça: _blank abre fora, _self abre onde tu já está

H2: window.open abre aba ou janela nova?

Passando só a URL e o _blank, o esperado é nova aba

Aí quando tu manda um terceiro argumento com configurações de janela (largura, altura, posição), a tendência é o navegador abrir uma janela pop-up separada, e não uma aba

window.open(‘https://www.google.com’, ‘_blank’, ‘width=600,height=400’)

Ou seja: quanto menos argumento, mais chance de vir aba mesmo

Quer aba? Deixa o terceiro argumento de fora

H2: Perguntas frequentes sobre abrir nova aba:

H3: Como abrir uma nova aba com JavaScript?

Chamando window.open com a URL e o segundo argumento ‘_blank’, assim: window.open(‘https://www.google.com’, ‘_blank’)

H3: Como abrir link em nova aba sem JavaScript?

Usando o atributo target="_blank" na tag <a> do HTML, o resultado é o mesmo do _blank do window.open

H3: Por que a nova aba não abriu?

O caso mais comum é o bloqueador de pop-up do navegador segurando uma abertura que não veio de uma ação do usuário, tipo um window.open rodando direto no carregamento da página

O caminho é disparar a abertura dentro de um clique

H3: Como abrir o link na mesma aba?

Trocando o segundo argumento por ‘_self’: window.open(‘https://www.google.com’, ‘_self’)