JavaScript

Como fazer para abrir link em nova aba com JavaScript

8 de abril de 2021

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

abrir link em nova aba com JavaScript capa

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x