Como abrir o link em uma nova guia no html?

390

Estou trabalhando em um projeto HTML e não consigo descobrir como abrir um link em uma nova guia sem javascript.

Eu já sei que <a href="http://www.WEBSITE_NAME.com"></a>abre o link na mesma aba. Alguma idéia de como abri-lo em um novo?

html hyperlink anchor browser-tab ZenthyxProgramming
fonte
40
use<a href="url" target="_blank">...</a>
Rohit Agrawal
11
Como Rohit diz, adicione o param target = "_ blank", no entanto, no FireFox, pelo menos, se você fizer dois sublinhados target = "__ blank", ele será aberto em uma nova guia, mas clicar em outros links usando o mesmo sublinhado duplo abrirá o novo páginas na nova guia anterior, o que significa que você tem apenas uma guia adicional aberta.
Justin Levene

Respostas:

599

Defina o atributo 'target' do link para _blank:

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

Editar: para outros exemplos, consulte aqui: http://www.w3schools.com/tags/att_a_target.asp

(Observação: eu sugeri anteriormente, em blankvez de _blank, porque, se usado, ele abrirá uma nova guia e, em seguida, usará a mesma guia se o link for clicado novamente. No entanto, isso ocorre apenas porque, como apontou o GolezTrol, refere-se ao nome a de um quadro / janela, que seria definido e usado quando o link for pressionado novamente para abri-lo na mesma guia).

Consideração de segurança!

O rel="noopener noreferrer"objetivo é impedir que a guia recém-aberta possa modificar a guia original de maneira maliciosa. Para mais informações sobre esta vulnerabilidade, consulte estes recursos:

Tubarão-do-bosque
fonte
16
Todos os destinos especiais começam com um sublinhado. blankseria o nome de um quadro ou janela. Pode parecer que funcione porque provavelmente uma nova janela ou guia será aberta quando não existir nenhuma com o nome 'em branco', mas um segundo clique no link deverá abrir a página na mesma guia novamente, em vez de abrir outra.
GolezTrol
2
Bem, acho que não é inválido, é apenas diferente. Em vez de blankvocê poder usar foo, penso, enquanto _blankna verdade tem um significado especial. Não consigo encontrar nenhuma informação para provar o contrário. Você pode?
GolezTrol
2
@ Stefan Não, _blankvai ficar bem; os links serão abertos em uma guia diferente. Se você especificar um nome sem o sublinhado, (por exemplo blank), os links serão abertos na mesma guia.
SharkofMirkwood
6
Uma dica: esteja ciente da vulnerabilidade devido a _blank. Mais informações medium.com/@jitbit/…
Aistis
11
Outra página com a vulnerabilidade mathiasbynens.github.io/rel-noopener, que é um exemplo por si só.
Call
99

Use um destes conforme seus requisitos.

Abra o documento vinculado em uma nova janela ou guia:

 <a href="xyz.html" target="_blank"> Link </a>

Abra o documento vinculado no mesmo quadro em que foi clicado (isso é o padrão):

 <a href="xyz.html" target="_self"> Link </a>

Abra o documento vinculado no quadro pai:

 <a href="xyz.html" target="_parent"> Link </a>

Abra o documento vinculado no corpo inteiro da janela:

 <a href="xyz.html" target="_top"> Link </a>

Abra o documento vinculado em um quadro nomeado:

 <a href="xyz.html" target="framename"> Link </a>

Veja MDN

O aluno sempre
fonte
Obrigado pela informação. Como abrir o link em uma nova guia quando clicado?
Shajeel Afzal 18/09/19
Use o código em html, como compartilhado acima. A maioria dos novos navegadores abre os links em uma nova guia por padrão quando você usa target = "_ blank"
Aluno sempre
11
Tenha em mente que target="_blank"tem uma vulnerabilidade, você pode ler sobre ele em mathiasbynens.github.io/rel-noopener
PhoneixS
36

Se você deseja fazer o comando uma vez para todo o site, em vez de precisar fazê-lo após cada link. Experimente este lugar no cabeçalho do seu site e bingo.

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

espero que isto ajude

Cyberquill
fonte
3
não se esqueça de adicionar rel = "noopener noreferrer"
Blundering Philosopher
13

Use target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
Evan Hahn
fonte
3
não se esqueça de adicionar rel = "noopener noreferrer"
Blundering Philosopher
6

Quando usar target='_blank':

A versão HTML (alguns dispositivos não são compatíveis):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

A versão JavaScript para todos os dispositivos:

O uso de rel = "external" é perfeitamente válido

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>

e para o Jquery pode tentar com o abaixo:

$("#content a[href^='http://']").attr("target","_blank");

Se a configuração do navegador não permitir que você abra em novas janelas:

href = "google.com";
onclick="window.open (this.href, ''); return false";
Kaleem Ullah
fonte
11
não se esqueça de adicionar rel = "noopener noreferrer"
Blundering Philosopher
2

Você pode usar:

<a href="http://www.WEBSITE_NAME.com"  target="_blank"> Website</a>

No entanto, as opções acima tornam seu site vulnerável a ataques de phishing. Você pode impedir que isso aconteça em alguns navegadores adicionando rel = "noopener noreferrer" ao seu link. Com isso adicionado, o exemplo acima se torna:

<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a>

confira para obter mais informações: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

Thabang
fonte
0

Você poderia fazer assim:

<a href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">Open Duck</a>

Observe também o seguinte URL no MDN para obter mais informações sobre segurança e privacidade:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Security_and_privacy

que por sua vez tem um link para um bom artigo chamado Target = "_ blank" - a vulnerabilidade mais subestimada de todos os tempos :

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

darmis
fonte