web-dev-qa-db-fra.com

Comment ouvrir le lien dans un nouvel onglet sur HTML?

Je travaille sur un projet HTML et je ne sais pas comment ouvrir un lien dans un nouvel onglet sans JavaScript.

Je sais déjà que <a href="http://www.WEBSITE_NAME.com"></a> ouvre le lien dans le même onglet. Des idées comment le rendre ouvert dans un nouveau?

htmlhyperlinkanchorbrowser-tab
338
ZenthyxProgramming

Définissez l'attribut 'cible' du lien sur _blank:

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

Edit: pour d'autres exemples, voir ici: http://www.w3schools.com/tags/att_a_target.asp

(Remarque: j'avais précédemment suggéré blank au lieu de _blank parce que, s'il est utilisé, il ouvrira un nouvel onglet, puis utilisera le même onglet si le lien est cliqué à nouveau. Cependant, c'est uniquement parce que, comme GolezTrol l'a fait remarquer, il s'agit du nom d'un cadre/fenêtre, qui serait défini et utilisé lorsque le lien est à nouveau activé pour l'ouvrir dans le même onglet).

Considération de sécurité!

Le rel="noopener noreferrer" empêche le nouvel onglet ouvert de pouvoir modifier l’onglet original de manière malveillante. Pour plus d'informations sur cette vulnérabilité, consultez ces ressources:

524
SharkofMirkwood

Utilisez l'un de ceux-ci selon vos besoins.

Ouvrez le document lié dans une nouvelle fenêtre ou un nouvel onglet:

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

Ouvrez le document lié dans le même cadre que celui sur lequel vous avez cliqué (par défaut):

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

Ouvrez le document lié dans le cadre parent:

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

Ouvrez le document lié dans le corps de la fenêtre:

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

Ouvrez le document lié dans un cadre nommé:

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

Voir MDN

89
Learner Always

Si vous souhaitez exécuter la commande une fois pour l'ensemble de votre site, au lieu de devoir le faire après chaque lien. Essayez cet endroit dans la tête de votre site Web et bingo.

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

j'espère que cela t'aides

29
Cyberquill

Utilisez target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
13
Evan Hahn

target='_blank' si vous n'utilisez pas XHTML.

11
StackSlave

Utilisez l'attribut "target" de la balise a et affectez-le à _blank. C'est:

<a href="http://www.google.com" target="_blank" >Google in a New Tab or Window depending on the browser's capabilities</a>
11
Chris Raplee

target="_blank" attribut fera le travail. N'oubliez pas d'ajouter rel="noopener noreferrer" pour résoudre le problème. Plus de détails ici: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>
6
Vadym P

Quand utiliser target='_blank':

La version HTML (Certains appareils ne le supportent pas):

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

La version JavaScript pour tous les appareils:

L'utilisation de rel = "external" est parfaitement valide

<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>

et pour Jquery peut essayer avec celui ci-dessous:

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

Si les paramètres du navigateur ne vous permettent pas d'ouvrir dans de nouvelles fenêtres:

href = "google.com";
onclick="window.open (this.href, ''); return false";
6
Kaleem Ullah

La valeur par défaut s'ouvre dans le même onglet:

<a href="https://www.google.com/">Google.com </a>

Ouvre dans un nouvel onglet:

<a href="https://www.google.com/" target="_blank">Google.com </a>
4
Colleen Purcell

Vous pouvez utiliser<a href='url' target="_blank">name</a>

Exemple<a href='https://www.facebook.com/hackbalteamz' target="_blank">Facebook</a>

4
Hackbal Teamz

target = "_ blank" ouvre toujours un nouvel onglet pour chaque clic et target = "tabName" ouvre un nouvel onglet, mais identique pour chaque clic.

3
flap13

Vous pouvez utiliser <a href="#" target="_blank">Your Text</a> J'espère que cela vous a aidé. Merci.

3
herrobaba

Vous pouvez utiliser:

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

Cependant, ce qui précède rend votre site vulnérable aux attaques de phishing. Vous pouvez éviter que cela ne se produise dans certains navigateurs en ajoutant rel = "noopener noreferrer" à votre lien. Avec ceci ajouté, l'exemple ci-dessus devient:

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

consultez pour plus d'informations: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

1
Thabang