Como fazer para abrir link em nova aba com JavaScript

Neste artigo você vai aprender a abrir link em nova aba com JavaScript, ou seja, a partir de um evento uma nova aba será aberta no navegador

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também o comportamento do navegador para abrir novas abas!

Você já deve saber que para abrir uma aba em HTML puro precisamos do atributo _blank, inserido na tag de link

Bom, para JavaScript também vamos utilizar ele e também a função open do objeto global window

Vamos ver um exemplo prático da solução:

<button id="btn">Clique em mim</button>

var url = "https://www.google.com";
var btn = document.querySelector("#btn");


function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

btn.addEventListener('click', function() {
	
  openInNewTab(url);

});

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

Adicionar um bloco curto mostrando a versão em HTML puro completa, já que muita gente cai aqui buscando abrir link em nova aba sem JS

Subtítulo sugerido: "Abrir link em nova aba só com HTML:"

Texto: Se o teu caso é só um link normal, nem precisa de JavaScript

Basta jogar o target="_blank" na tag de âncora e pronto, o navegador já abre em nova aba

Um exemplo bem direto:

[bloco de código com <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Abrir Google</a>]

Repara no rel="noopener noreferrer" ali do lado

Ele é importante por segurança e performance, sem ele a nova aba consegue mexer na página que abriu ela

Se liga nisso pra não deixar brecha

Adicionar uma seção que antecipa o erro mais comum de quem usa window.open, o bloqueador de pop-up

Subtítulo sugerido: "E se a nova aba não abrir?"

Texto: Aqui tem uma pegadinha que já ferrou muita gente

O window.open costuma funcionar quando é o próprio usuário que dispara a ação, tipo um clique

Se tu tentar abrir a aba sozinho, dentro de um setTimeout ou logo que a página carrega, o navegador entende como pop-up indesejado e bloqueia

Então a regra de ouro é: chame o window.open dentro de um evento de clique real, igual fizemos no exemplo do botão

Assim o navegador confia que foi o usuário que pediu e deixa a aba abrir numa boa

Adicionar um mini FAQ com 2 perguntas rápidas, formato que responde busca direta

Pergunta: "Qual a diferença entre target=_blank e window.open?" Resposta: O target="_blank" é a forma nativa do HTML, ideal quando é um link simples

Já o window.open é do JavaScript e serve quando tu precisa abrir a aba a partir de uma lógica, tipo depois de validar algo ou dentro de uma função

Pergunta: "Dá pra abrir mais de uma aba de uma vez?" Resposta: Dá sim, é só chamar o window.open mais de uma vez

Mas cuidado, o navegador pode barrar as aberturas seguidas achando que é pop-up, então use com parcimônia