Como abrir o URL em nova guia usando JavaScript?

Isso é muito comum para navegar pelos usuários de uma página para outra quando você está desenvolvendo um aplicativo da web. Normalmente, quando você está usando HTML, a tag de ancoragem é usada para adicionar links para navegar para outras páginas. Por padrão, o navegador não permite que você mude para a nova guia ao clicar em um link. Portanto, precisamos definir o atributo no link que direcionará a instrução para o navegador de que ele precisa abrir esse link para uma nova guia.

Enquanto trabalhamos no HTML, podemos colocar o valor "_blank" no atributo de destino e o link URL será aberto em uma nova guia. Mas como conseguir esse trabalho quando você está usando o JavaScript. Falaremos sobre como abrir um URL em uma nova guia usando JavaScript neste artigo.

Abrindo URL em uma nova guia usando HTML

Um hiperlink para outra página é criado com o elemento âncora em HTML. Usamos a propriedade HREF para fornecer o URL da página que queremos que o usuário solicite e o valor "_blank" para o atributo de destino da tag para abrir o link em uma nova guia.

Um método tradicional para realizar esse trabalho é o seguinte:

Site Linuxhint

Agora, se você clicar no link "Site Linuxhint", o "Linuxhint.com ”será aberto na nova guia.

Esta era uma maneira tradicional de abrir um link em uma nova guia.

Agora vamos dar uma olhada em como podemos conseguir isso usando JavaScript

Abrindo URL em uma nova guia usando JavaScript

Para abrir um URL em uma nova guia usando JavaScript, o janela.abrir() o método pode ser utilizado.

A técnica é bem simples. Nós apenas temos que passar dois argumentos para o janela.abrir() método. Um é o URL da página da web. O segundo argumento é o mesmo que o atributo de destino na tag âncora em que especificamos onde queremos abrir o url e.g. ““_em branco”.

janela.aberto ("url", "_blank");

Vamos pensar em um exemplo, no qual queremos abrir o “Linuxhint.com ”site em uma nova guia com o clique do botão.

Site Linuxhint

Depois de criar um botão no HTML, chamamos uma função chamada "Nova aba()".

Vamos defini -lo em nosso código JavaScript, onde usaremos o janela.abrir() método e fornecer o URL do “Linuxhint.com ” site e "_em branco" valor para abrir o site em uma nova guia.

JS

const newtab = () =>
janela.aberto ("https: // linuxhint.com "," _blank ");

Vamos executar o código e ver os resultados.

Quando clicamos no botão "Clique", ele abre o “Linuxhint.com ” em uma nova guia de navegador.

Métodos adicionais

Aqui estão algumas propriedades adicionais que você pode anexar ao abrir um URL:

• _em branco: O URL está aberto em uma nova guia.
• _parent: O quadro pai é carregado com o URL.
• _auto: A página atual é substituída quando esta propriedade é chamada
• _principal: Qualquer quadros carregados são substituídos pelo nome do URL - o nome da viúva.

Conclusão

Para abrir o URL na nova guia, você deve colocar o _em branco valor para o alvo atributo da tag de ancoragem no html. Você também pode selecionar a tag âncora usando um seletor de JavaScript e adicionar o alvo atributo com _em branco valor. Neste post, vimos como podemos usar o janela.abrir() propriedade no ONCLICK evento do botão para abrir o URL na nova guia programaticamente através do JavaScript.