Bem, a maneira mais simples de fazer isso é usar HTML target atributo.
Quando um usuário clica em um link em nossa página da web, podemos abrir esse link em uma guia separada do navegador com o target Atributo HTML. O código abaixo abrirá o link em uma nova guia do navegador:
<a href="www.google.com" target="_blank">Open link in new tab</a>o _blank O valor indica que queremos que nosso link seja aberto em uma nova guia em branco. Também podemos realizar o mesmo com JavaScript. Abaixo está o snippet de código JavaScript para fazer isso.
function openInNewTab(url) { var win = window.open(url, '_blank'); win.focus();}// html snpippet// <div onclick="openInNewTab('www.test.com');">Some Link</div>No código acima, estamos usando o objeto global da janela para abrir um URL em uma nova guia em branco. Também estamos focando na janela depois que ela é aberta.
Se você estiver usando uma estrutura JavaScript (como Angular, React ou Vue) ou se já tiver muito código JavaScript em seu projeto, sinta-se à vontade para usar o JavaScript para abrir links em uma nova janela.
Mas existem alguns projetos nos quais você pode querer usar o mínimo de JavaScript possível.
Por exemplo, digamos que você esteja criando um site móvel otimizado para redes lentas. Nesse caso, você deseja limitar seu código JavaScript.
Outro exemplo são os modelos de email em HTML. Ao desenvolver modelos HTML para serem enviados por mecanismos de email (como Mailchimp ou Mailgun), você não pode incluir o JavaScript por causa de questões de segurança (você pode aprender mais sobre este tópico aqui)
Tudo bem, vamos voltar ao nosso HTML target atributo. Além de _blank podemos passar vários outros valores nesse atributo. Abaixo está uma lista de todos os valores para o target atributo:
| Valor | Descrição |
|---|---|
| _em branco | Abre o documento vinculado em uma nova janela ou guia |
| _auto | Abre o documento vinculado no mesmo quadro em que foi clicado (isso é o padrão) |
| _parent | Abre o documento vinculado no quadro pai |
| _topo | Abre o documento vinculado no corpo inteiro da janela |
Já vimos como blank trabalho. o self value é o comportamento padrão que abre o link na mesma guia. _parent e _top são os dois interessantes.
Digamos que temos um iframe elemento incorporado em nosso site e, dentro desse iframe, existe outro iframe. Aqui está o código:
<div id="main"> <iframe name="first_frame"> <iframe name="nested"></iframe> </iframe></div>Agora, digamos que temos um link no iframe aninhado. Se definirmos o atributo target como top ele abrirá o link no navegador principal div . Em outras palavras, ele pula todos os iframes e abre o link na janela principal do navegador.
Por outro lado, se usarmos parent abriria o link em seu iframe pai. Nesse caso, ele será aberto no first_frame.
Como abrir um link em uma janela separada
Também podemos abrir o link em uma janela separada, em vez de em uma nova guia. Nós podemos usar o onclick Atributo HTML e vincule-o com um JavaScript window.open comando para conseguir isso.
Observe que também podemos especificar uma largura e uma altura para a nossa nova janela onde o link será aberto.
O recurso de destino é atualmente suportado nos seguintes navegadores:
Embora o elemento de destino seja suportado pela maioria dos navegadores modernos, existem alguns navegadores herdados nos quais o recurso de destino não está disponível. Para sua referência, aqui está uma lista deles.
- Opera Mini (versão 7.6 e abaixo)
- Navegador Android (versão 3 e abaixo)
- Navegador padrão do BlackBery (anterior a 2015)
Espero que tenha gostado deste artigo. Isso é tudo por hoje 😄.
