Como forçar a abertura de um link em outra aba

Neste artigo você vai aprender a como forçar a abertura de um link em outra aba, com JavaScript e também com HTML puro, de forma simples

Fala programador(a), beleza? Bora aprender mais sobre como abrir links em novas abas, em vez da que o usuário está

Primeiramente é interessante citar que a forma mais fácil de resolver este problema é com HTML puro

Temos um atributo que é o target, e com o valor _blank, faz exatamente o que precisamos, abre um link em uma nova aba

Veja um exemplo prático:

<a href="https://www.google.com" target="_blank">Acessar Google em nova aba</a>

Simples assim, você já tem tudo configurado e o usuário acessa a página que linkamos em uma nova aba

Abrindo link em nova aba com JavaScript

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Caso mesmo assim você precisa resolver com JavaScript, também há a solução

Você deve adicionar a instrução de window.open com o click em algum elemento

Veja um exemplo:

var el = document.querySelector("#elemento");

el.addEventListener("click", function() {
    window.open("https://www.google.com", "_blank");
});

Neste exemplo, selecionamos um elemento com querySelector

E depois disso aplicamos um evento para o click no mesmo, que vai abrir o link adicionado a open em uma nova aba

Simples né? 😀

Conclusão

Neste artigo vimos como forçar a abertura de um link em outra aba

Podemos resolver o problema facilmente com HTML adicionando o atributo de target com _blank

Ou com um evento de click no elemento alvo, utilizando a função open de window

Após estes eventos aplicados, o link será aberto em uma nova aba e assim concluímos nosso objetivo

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Por que o target="_blank" pede um rel junto:

O target resolve a abertura, beleza, mas ele deixa uma ponta solta

A página que abriu na aba nova consegue enxergar a janela de origem pelo window.opener, ou seja, um site externo ganha uma referência da aba que você deixou pra trás

O rel="noopener" corta essa referência

Já o rel="noreferrer" vai um passo além e evita enviar o endereço da sua página como referenciador

Na prática, fica assim:

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Acessar Google em nova aba</a>

Regra de bolso: link apontando pra fora do seu domínio e abrindo em nova aba, põe o rel

Se o link é interno e você só quer o isolamento da janela, o noopener sozinho já resolve 🙂

Quando o window.open não abre nada:

Se liga nisso, porque é o tropeço mais comum da versão em JavaScript

O window.open só é bem aceito quando ele nasce de uma ação direta do usuário, tipo o click do exemplo acima

Agora, se você chamar o window.open solto, dentro de um setTimeout, depois de esperar uma requisição terminar ou no carregamento da página, o navegador entende aquilo como popup e barra

Caso o link simplesmente não abra e o console não acuse erro nenhum, desconfie disso primeiro

A saída é direta: dispare o window.open dentro do próprio handler do click e deixe o processamento pesado pra depois da abertura

Já me ferrei uma vez fazendo o contrário, buscando o endereço numa API e só então chamando o open, aí nada abria e eu culpando o código xD

HTML ou JavaScript: qual usar?

Se der pra resolver com o atributo target, use o atributo

O motivo é simples: o <a> é um link de verdade, então o usuário consegue copiar o endereço, abrir do jeito que preferir pelo menu do navegador e a leitura por tecnologia assistiva funciona

Com window.open num elemento qualquer, tipo uma div, você perde tudo isso e ainda fica na mão do bloqueador de popup

O JavaScript entra quando o destino é dinâmico, quando você precisa fazer algo antes de abrir ou quando o elemento não é um link mesmo

E tem o outro lado, que é UX: nem todo link merece abrir em outra aba

Forçar aba nova em link interno tira do usuário o botão de voltar, e no celular isso incomoda mais ainda

Deixa a aba nova pra link externo, PDF, documentação, coisas que a pessoa consulta e volta pro seu conteúdo

Checklist rápido antes de subir o código:

Hoje muita gente gera esse trecho pedindo pra uma IA e cola direto no projeto, sem ler

Funcionar, funciona, mas vale passar o olho em três coisas antes do commit:

O rel está lá quando o link aponta pra fora do seu domínio?

Aquele link precisa MESMO de aba nova, ou é interno e ficaria melhor na mesma aba?

Se veio window.open, ele está dentro do click do usuário ou solto no meio do fluxo?

São trinta segundos de revisão que evitam aquele bug chato de popup bloqueado e o link externo saindo sem rel

Vibe coding é ótimo pra velocidade, mas o checklist continua sendo seu 😀