480 votes

Comment ouvrir un lien dans un nouvel onglet en HTML ?

Je travaille sur un projet HTML et je n'arrive pas à trouver 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. Comment faire pour qu'il s'ouvre dans un nouvel onglet ?

48 votes

Utiliser <a href="url" target="_blank">...</a>

1 votes

Comme le dit Rohit, ajoutez le paramètre target="_blank", cependant, sur FireFox au moins, si vous faites deux underscores target="__blank", cela s'ouvrira dans un nouvel onglet, mais en cliquant sur d'autres liens utilisant le même double underscore, les nouvelles pages s'ouvrent dans le nouvel onglet précédent, ce qui signifie que vous n'avez qu'un seul onglet supplémentaire ouvert.

760voto

SharkofMirkwood Points 2132

Régler le target du lien vers _blank :

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

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


Note

J'ai déjà suggéré blank au lieu de _blank car, s'il est utilisé, il ouvrira un nouvel onglet et utilisera le même onglet si le lien est cliqué à nouveau. Toutefois, comme l'a fait remarquer GolezTrol, ce n'est que parce qu'il fait référence au nom d'un cadre ou d'une fenêtre, qui serait défini et utilisé lorsque le lien est cliqué à nouveau pour l'ouvrir dans le même onglet.


Considération de la sécurité !

En rel="noopener noreferrer" est d'empêcher que l'onglet nouvellement ouvert puisse modifier l'onglet d'origine de manière malveillante. Pour plus d'informations sur cette vulnérabilité, consultez les articles suivants :

21 votes

Les cibles spéciales commencent toutes par un trait de soulignement. blank serait le nom d'un cadre ou d'une fenêtre. Cela peut sembler fonctionner, car une nouvelle fenêtre ou un nouvel onglet sera probablement ouvert alors qu'il n'en existe aucun avec le nom "vide", mais un second clic sur le lien devrait ouvrir la page dans ce même onglet au lieu d'en ouvrir un autre.

2 votes

Je suppose que ce n'est pas invalide, c'est juste différent. Au lieu de blank vous pouvez tout aussi bien utiliser foo Je pense que, tout en _blank a en fait une signification particulière. Je n'ai trouvé aucune information prouvant le contraire. Et vous ?

0 votes

Ainsi, si vous souhaitez que deux liens ou plus sur une page s'ouvrent chacun dans un nouvel onglet séparé, vous ne devez pas utiliser l'option _blank pour ces liens, car ils s'ouvriront alors tous dans le même nouvel onglet.

113voto

Learner Always Points 128

Utilisez l'un d'entre eux en fonction de vos besoins.

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

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

Ouvrir le document lié dans le même cadre que celui dans lequel il a été 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>

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

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

Ouvrir le document lié dans un cadre nommé :

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

Voir MDN

0 votes

Merci pour l'information. Comment ouvrir le lien dans un nouvel onglet lorsqu'on clique dessus ?

0 votes

Utilisez le code en html, comme indiqué ci-dessus. La plupart des nouveaux navigateurs ouvrent les liens dans un nouvel onglet par défaut lorsque vous utilisez target="_blank"

2 votes

Gardez à l'esprit que target="_blank" présente une vulnérabilité, vous pouvez en prendre connaissance dans la rubrique mathiasbynens.github.io/rel-noopener

15voto

Evan Hahn Points 2317

Utilice target="_blank" :

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

3 votes

N'oubliez pas d'ajouter rel="noopener noreferrer"

11voto

PHPglue Points 3163

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

11voto

Chris Raplee Points 197

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

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X