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>
Primeiramente vamos adicionar um HTML, que será um botão
Quando clicarmos nesse botão uma nova aba será aberta, com o link que determinarmos
Então agora vejamos o JavaScript necessário para atingir o objetivo:
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);
});Primeiramente colocamos em variáveis a URL que vamos enviar para a nova aba e depois na segunda variável selecionamos o botão que vai fazer o evento de nova aba
Temos também a função de abrir em nova aba, que simplesmente ativa a função open com o atributo _blank, isso faz com que uma nova aba seja aberta
E por último focus, para focar na recém aberta aba
No fim do cógio há o trecho de evento, onde o click do botão ativa a função openInNewTab, que abre em nova aba a URL antes adicionada a variável
E assim resolvemos nosso problema!
Conclusão
Neste artigo você aprendeu a como abrir link em nova aba com JavaScript
Utilizamos a função open com o atributo _blank, para ativar uma nova aba, e inserimos a URL desejada como parâmetro
Atrelamos o evento a um click, mas na verdade ele pode ter qualquer evento desejado, fiz desta maneira para simular uma possível situação real
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube