target = "_ blank" vs. target = "_ new"

512

Quelle est la différence entre <a target="_new">et <a target="_blank">et laquelle dois-je utiliser si je veux simplement ouvrir un lien dans un nouvel onglet / fenêtre?

Alex Grin
la source
73
Résumé des réponses actuelles: _newn'a pas de signification particulière. Vous pourriez _white_little_lambaussi écrire .
Álvaro González
10
@ x3ro Comment cela peut-il être faux de dire que " _new" n'a pas de signification particulière?
Álvaro González
3
@ ÁlvaroG.Vicario Je faisais référence à "Tu pourrais écrire ... à la place". Mais en y réfléchissant, je dirais que "n'a pas de signification particulière" n'est pas la même chose que "est explicitement découragé", mais cela pourrait être moi qui taquine;)
fresskoma
5
Je voudrais rappeler à tout le monde que l'utilisation de target="_blank"sans rel="noopener"est une vulnérabilité de sécurité potentielle. Recherchez pour rel="noopener"en savoir plus.
Flimm

Réponses:

651

Utilisez "_blank"

Selon la spécification HTML5 :

Un nom de contexte de navigation valide est une chaîne avec au moins un caractère qui ne commence pas par un caractère U + 005F LOW LINE. (Les noms commençant par un trait de soulignement sont réservés à des mots clés spéciaux.)

Un nom ou mot clé de contexte de navigation valide est une chaîne qui est soit un nom de contexte de navigation valide, soit une correspondance insensible à la casse ASCII pour l'un des éléments suivants: _blank, _self, _parent ou _top. "- Source

Cela signifie qu'il n'y a pas de mot-clé comme _newen HTML5, et non pas en HTML4 (et par conséquent XHTML) non plus . Cela signifie qu'il n'y aura aucun comportement cohérent si vous l'utilisez comme valeur pour l'attribut cible.

Recommandation de sécurité

Comme Daniel et Michael l'ont souligné dans les commentaires, lorsque vous utilisez une cible _blankpointant vers un site Web non fiable, vous devez en outre définir rel="noopener". Cela empêche le site d'ouverture de jouer avec l'ouvreur via JavaScript. Voir cet article pour plus d'informations.

fresskoma
la source
7
Le fait de laisser de côté le texte en gras de la spécification rend cette citation confusément circulaire. Je l'ai lu comme "A valid browsing context nameou un mot clé est une chaîne qui est soit un valid browsing context nameou ...."
Alex Grin
6
@lyoshenka, @ x3ro: J'ai pris la liberté d'ajouter le paragraphe précédent à la citation. Cela devrait dissiper la confusion.
mercator
5
@aesede: lisez les spécifications. Ils ne sont pas valides, car "my_custom_name" ne peut pas être précédé d'un trait de soulignement. Ainsi, «nouveau» serait bien, mais «_nouveau» ne l'est pas!
fresskoma
7
Sécurité, c'est une lecture importante mathiasbynens.github.io/rel-noopener
Daniel F
6
Veuillez envisager d'ajouter que les gens devraient également ajouter en rel="noopener noreferrer"raison de la vulnérabilité d'attaque javascript detarget="_blank"
Michael
126

L'utilisation target="_blank"demandera au navigateur de créer un nouvel onglet ou une nouvelle fenêtre de navigateur lorsque l'utilisateur cliquera sur le lien.

L'utilisation target="_new"est techniquement invalide selon les spécifications, mais pour autant que je sache, chaque navigateur se comportera de la même manière:

  • il recherchera un onglet ou une fenêtre avec le nom de contexte "_new"
  • si un onglet / fenêtre "_nouveau" est trouvé, alors l'URL y est chargée
  • s'il n'est pas trouvé, un nouvel onglet / fenêtre est créé avec le nom de contexte "_new", et l'URL chargée dedans

Remarque target="_new"se comportera exactement de la même manière que target="new"le dernier est un code HTML valide tandis que le premier est un code HTML non valide.

Ajoutant une certaine confusion à cela, dans HTML4 l' targetattribut était obsolète. En HTML5, cette décision a été inversée, et c'est encore une fois une partie officielle de la spécification. Tous les navigateurs prennent en charge targetquelle que soit la version de HTML que vous utilisez, mais certains validateurs signaleront l'utilisation comme obsolète si votre doctype est HTML4.

Abhi Beckert
la source
4
Donc, fondamentalement, si j'ai deux (ou plusieurs) liens avec target="_new", ils s'ouvriront tous les deux dans le même onglet, l'un écrasant l'autre?
art-solopov
4
@ art-solopov pour autant que je sache, oui, c'est ce qui se passera dans tous les navigateurs. Cependant "_new" est une valeur illégale pour une cible, alors ne le faites pas.
Abhi Beckert
25

TL; DR
USE _blank

L'attribut cible spécifie où ouvrir le document lié.

USAGE: target="xyz"  [don't forget double quotes]

_blank  Opens the linked document in a new window or tab
_self   Opens the linked document in the same frame as it was clicked (this is default)
_parent     Opens the linked document in the parent frame
_top    Opens the linked document in the full body of the window 
framename   Opens the linked document in a named frame

PUISQUE "_new" n'est aucun de ceux-ci IL VIENDRA SOUS "framename" donc si un utilisateur re-clique sur cet hyperlien il n'ouvrira pas un nouvel onglet au lieu de mettre à jour l'onglet existant. Alors que dans _blank si l'utilisateur clique deux fois, 2 nouveaux onglets s'ouvrent.

abe312
la source
21

Je sais que c'est une vieille question et la bonne réponse, l'utilisation _blank, a été mentionnée plusieurs fois, mais l'utilisation <a target="somesite.com" target="_blank">Link</a> est un risque pour la sécurité .

Il est recommandé ( avantages de performance ) d'utiliser:

<a href="somesite.com" target="_blank" rel="noopener noreferrer">Link</a>
Michal Frystacky
la source
1
Juste quelques lectures supplémentaires sur l'aspect des risques de sécurité: jitbit.com/alexblog/…
8bithero
14

Cela peut avoir été demandé auparavant mais:

"chaque lien qui spécifie target =" _ new "recherche et trouve cette fenêtre par son nom, et l'ouvre.

Si vous utilisez target = "_ blank", une nouvelle fenêtre sera créée à chaque fois, en haut de la fenêtre actuelle. "

à partir d'ici: http://thedesignspace.net/MT2archives/000316.html

corrodé
la source
12

target="_blank" ouvre un nouvel onglet dans la plupart des navigateurs.

Abudayah
la source
12

c'est ma compréhension qui target = whateverva chercher un cadre / fenêtre avec ce nom. S'il n'est pas trouvé, il ouvrira une nouvelle fenêtre avec ce nom. Si whatever == "_new", il apparaîtra comme si vous l' _blankutilisiez sauf .....

L'utilisation d'un des noms de cible réservés contournera la phase de "recherche". Ainsi, target = "_blank"sur une douzaine de liens ouvrira une douzaine de fenêtres vierges, mais target = whateversur une douzaine de liens n'ouvrira qu'une seule fenêtre. target = "_new"sur une dizaine de liens peut donner un comportement inconstant. Je ne l'ai pas essayé sur plusieurs navigateurs, mais je ne devrais ouvrir qu'une seule fenêtre.

C'est du moins ainsi que j'interprète les règles.

le Hampster
la source
9

Attention - n'oubliez pas de toujours inclure les "guillemets" - au moins sur Chrome, target=_blank(pas de guillemets) n'est pas le même que target="_blank"(avec guillemets).

Ce dernier ouvre chaque lien dans un nouvel onglet / fenêtre. Le premier (guillemets manquants) ouvre le premier lien sur lequel vous cliquez dans un nouvel onglet / fenêtre, puis écrase ce même onglet / fenêtre avec chaque lien suivant sur lequel vous cliquez (qui est également nommé avec les guillemets manquants).

cnd
la source
Très bon point. J'ai rencontré ce problème lorsque je n'ai pas mis le _blank entre guillemets. Le lien sur lequel j'ai cliqué dans mon nouvel onglet "vierge" était sur l'écriture de contenu dans cet onglet au lieu d'ouvrir un nouvel onglet. Mettre le _blank entre guillemets force Chrome à ouvrir un nouvel onglet à chaque fois.
Steve Scherer
Assurez-vous également d'utiliser "_blank" et non "_BLANK". Chrome est en fait pointilleux sur la casse et n'ouvrira pas un nouvel onglet en utilisant "_BLANK" plusieurs fois.
Steve Scherer
5
  • _blank comme valeur cible fera apparaître une nouvelle fenêtre à chaque fois,
  • _new ne fera apparaître qu'une nouvelle fenêtre.

De plus, chaque lien cliqué avec une valeur cible de _new remplacera la page chargée dans la fenêtre précédemment générée.

Vous pouvez cliquer ici Quand utiliser _blank ou _new pour l'essayer par vous-même.

James Drinkard
la source
Pouvez-vous lister les navigateurs qui honorent _newcomme décrit?
Dima Tisnek
@qarma Ce comportement est tel que décrit dans tous les navigateurs que je connais, _newn'est pas un mot clé magique, c'est juste un nom, si une fenêtre avec ce nom existe, elle le réutilisera, sinon elle l'ouvrira. Cliquer sur plusieurs liens pour cette fenêtre ouvrira simplement différentes pages dans la fenêtre nommée, plutôt que d'ouvrir plusieurs nouvelles pages.
scragar
La spécification suggère en fait aux navigateurs qu'ils ignoreciblent en commençant par le soulignement mais ne sont pas des mots clés. Il n'y a aucune suggestion sur ce qu'un navigateur doit faire lorsqu'il "ignore" un nom de cible non valide. Les possibilités incluent: (1) le traiter comme "_blank" (2) le traiter comme un nom de fenêtre (comme s'il n'y avait pas de soulignement illégal) (3) le traiter comme un nom de fenêtre explicitement vide (4) le traiter comme là n'avait pas d'attribut cible. - Tout navigateur peut choisir l'une des interprétations.
Jesse Chisholm
0

L'attribut cible d'un lien oblige le navigateur à ouvrir la page de destination dans une nouvelle fenêtre de navigateur. L'utilisation _blankcomme valeur cible fera apparaître une nouvelle fenêtre à chaque fois tandis que l'utilisation _newne fera apparaître qu'une seule nouvelle fenêtre et chaque lien cliqué avec une valeur cible de _newremplacera la page chargée dans la fenêtre précédemment générée.

Carlos Guzman
la source
0

Afin d'ouvrir un lien dans un nouvel onglet / fenêtre que vous utiliserez <a target="_blank">.

valeur _blank= contexte de navigation ciblé: un nouveau: onglet ou fenêtre en fonction de vos paramètres de navigation

valeur _new= non valide; aucune valeur en HTML5 pour l'attribut cible sur un élément

attribut cible avec toutes ses valeurs sur un élément: démonstration vidéo

Daniel
la source
-1

L'utilisation de _New est utile lorsque vous travaillez sur des pages qui sont Iframed. Puisque target = "_ blank" ne fait pas l'affaire et ouvre la page sur le même iframe ... target new est la meilleure solution pour les pages Iframe. Juste mes cinq cents.

Ozzy Gonzalez
la source