Comment ouvrir le lien dans un nouvel onglet en html?


391

Je travaille sur un projet HTML et je n'arrive pas à découvrir comment ouvrir un lien dans un nouvel onglet sans javascript.

Je sais déjà que <a href="http://www.WEBSITE_NAME.com"></a>le lien s'ouvre dans le même onglet. Des idées sur la façon de l'ouvrir dans un nouveau?


40
utilisation<a href="url" target="_blank">...</a>
Rohit Agrawal

1
Comme le dit Rohit, ajoutez le paramètre target = "_ blank", cependant, sur FireFox au moins si vous faites deux soulignements target = "__ blank", il s'ouvrira dans un nouvel onglet, mais en cliquant sur d'autres liens en utilisant le même double soulignement, ouvrira le nouveau dans le nouvel onglet précédent, ce qui signifie que vous n'avez qu'un seul onglet supplémentaire ouvert.
Justin Levene

Réponses:


600

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'ai déjà suggéré blankau lieu de _blankparce 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 l'a souligné GolezTrol, il fait référence au nom un cadre / fenêtre, qui serait défini et utilisé lorsque le lien est enfoncé à nouveau pour l'ouvrir dans le même onglet).

Considération de sécurité!

Le but rel="noopener noreferrer"est d'empêcher l'onglet nouvellement ouvert de pouvoir modifier de manière malveillante l'onglet d'origine. Pour plus d'informations sur cette vulnérabilité, consultez ces ressources:


16
Les cibles spéciales commencent toutes par un trait de soulignement. blankserait 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 quand il n'y en aura pas avec le nom `` vide '', mais un deuxième clic sur le lien devrait ouvrir à nouveau la page dans ce même onglet au lieu d'en ouvrir encore un autre.
GolezTrol

2
Eh bien, je suppose que ce n'est pas invalide, c'est juste différent. Au lieu de blankvous, vous pourriez tout aussi bien utiliser foo, je pense, tout _blanken ayant une signification particulière. Je ne trouve aucune information prouvant le contraire. Peut tu?
GolezTrol

2
@Stefan Non, ça _blankira; les liens s'ouvriront chacun dans un onglet différent. Si vous spécifiez un nom sans le soulignement, (par exemple blank) les liens s'ouvriront dans le même onglet.
SharkofMirkwood

6
Un conseil: soyez conscient de la vulnérabilité due à _blank. Plus d'infos medium.com/@jitbit/…
Aistis

1
Une autre page avec la vulnérabilité mathiasbynens.github.io/rel-noopener dont elle est un exemple en soi.
PhoneixS

99

Utilisez l'un d'eux 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é (c'est la valeur 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 complet 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


Merci pour l'information. Comment ouvrir le lien dans un nouvel onglet lorsque vous cliquez dessus?
Shajeel Afzal

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

1
Gardez à l'esprit qu'une target="_blank"vulnérabilité existe, vous pouvez la lire dans mathiasbynens.github.io/rel-noopener
PhoneixS

36

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

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

J'espère que cela t'aides


3
n'oubliez pas d'ajouter rel = "noopener noreferrer"
Blundering Philosopher

13

Utilisation target="_blank":

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

3
n'oubliez pas d'ajouter rel = "noopener noreferrer"
Blundering Philosopher

6

Quand utiliser target='_blank':

La version HTML (certains appareils ne la prennent pas en charge):

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

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

1
n'oubliez pas d'ajouter rel = "noopener noreferrer"
Blundering Philosopher


2

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 l'empêcher de se produire dans certains navigateurs en ajoutant rel = "noopener noreferrer" à votre lien. Avec cela 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


0

Vous pouvez le faire comme ceci:

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

Regardez également l'url suivante sur MDN pour plus d'informations sur la sécurité et la confidentialité:

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

qui à son tour a un lien vers un bon article nommé Target = "_ blank" - la vulnérabilité la plus sous-estimée jamais :

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.