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?

html hyperlink anchor browser-tab ZenthyxProgramming
la source
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:

SharkofMirkwood
la source
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

Apprenant toujours
la source
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

Cyberquill
la source
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>
Evan Hahn
la source
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";
Kaleem Ullah
la source
1
n'oubliez pas d'ajouter rel = "noopener noreferrer"
Blundering Philosopher
6

target="_blank"l'attribut fera le travail. N'oubliez pas d'ajouter rel="noopener noreferrer"pour résoudre la vulnérabilité potentielle. Plus d'informations à ce sujet ici: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>
Vadym P
la source
Une autre explication de la vulnérabilité ici: mathiasbynens.github.io/rel-noopener
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

Thabang
la source
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/

darmis
la source