Comment faire en sorte que HTML ouvre un hyperlien dans une autre fenêtre ou un autre onglet?


91

Ceci est une ligne pour un lien hypertexte en HTML:

<a href="http://www.starfall.com/">Starfall</a>

Ainsi, si je clique sur "Starfall", mon navigateur - j'utilise FireFox - m'amènera à cette nouvelle page et le contenu de ma fenêtre changera. Je me demande, comment puis-je faire cela en HTML pour que la nouvelle page soit ouverte dans une nouvelle fenêtre au lieu de changer la précédente? Existe-t-il un tel moyen en HTML?

Et si oui, existe-t-il un moyen d'ouvrir la page demandée dans un autre onglet (pas une autre fenêtre) de mon navigateur?

Réponses:


135
<a href="http://www.starfall.com/" target="_blank">Starfall</a>

Qu'il s'ouvre dans un onglet ou une autre fenêtre dépend de la façon dont un utilisateur a configuré son navigateur.


6
Tous les navigateurs ne prennent pas en charge les onglets et dans ceux qui le font, les pages s'ouvrant dans un nouvel onglet par rapport à une nouvelle fenêtre sont un paramètre configurable par l'utilisateur. Il n'existe actuellement aucun moyen de spécifier qu'un lien doit s'ouvrir dans un onglet par rapport à une fenêtre.
bta le

2
rappelez-vous que l'attribut cible doit être déclaré APRÈS l'attribut href
MC

107

Le moyen le plus simple est d'ajouter une balise cible.

<a href="http://www.starfall.com/" target="Starfall">Starfall</a>

Utilisez une valeur différente pour l'attribut cible pour chaque lien si vous souhaitez qu'ils s'ouvrent dans différents onglets, la même valeur pour l'attribut cible si vous souhaitez qu'ils remplacent les autres.


45
+1 pour avoir souligné que la cible ne doit pas être «_blank».
GSto

4
Il convient de noter qu'il s'agit d'un HTML5 valide.
AeroCross

Qu'entendez-vous par «nom»?
Vnge le

8

utilisation target="_blank"

<a target='_blank' href="http://www.starfall.com/">Starfall</a>


7

Vous devriez pouvoir ajouter

target="_blank"

comme

<a href="http://www.starfall.com/" target="_blank">Starfall</a>

6

L' targetattribut est votre meilleur moyen d'y parvenir.

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

l'ouvrira dans un nouvel onglet ou une nouvelle fenêtre. Quant à cela, cela dépend des paramètres des utilisateurs.

<a href="http://www.starfall.com" target="_self">

est la valeur par défaut. Cela rend la page ouverte dans le même onglet (ou iframe, si c'est ce à quoi vous avez affaire).
Les deux suivants ne sont bons que si vous avez affaire à une iframe.

<a href="http://www.starfall.com" target="_parent">

ouvrira le lien dans l'iframe dans lequel se trouvait l'iframe contenant le lien.

<a href="http://www.starfall.com" target="_top">

ouvrira le lien dans l'onglet, quel que soit le nombre d'iframes à parcourir.


comment utiliser ce texte coloré dans chacun des autres exemples?
hellol11

5

la cible = _blank est ouverte dans un nouvel onglet ou une nouvelle fenêtre en fonction des paramètres du navigateur.

Pour forcer une nouvelle fenêtre, utilisez javascript en cliquant sur les trois parties sont nécessaires. url, un nom, la largeur et la hauteur de la fenêtre ou il s'ouvrira simplement dans un nouvel onglet.

<a onclick="window.open('http://www.starfall.com/','name','width=600,height=400')">Starfall</a>

4

Vous pouvez également accomplir cela en ajoutant ce qui suit à l'en-tête de votre page:

<base target="_blank">

Cela ouvrira TOUS les liens de votre page dans un nouvel onglet


4

Puisque le Web évolue rapidement, certaines choses changent avec le temps. Pour des problèmes de sécurité, vous souhaiterez peut-être utiliser l' rel="noopener"attribut en conjonction avec votre target="_blank".

Comme indiqué dans la documentation Google Dev , l'autre page peut accéder à votre objet de fenêtre avec l'extension window.opener property. Votre lien externe devrait ressembler à ceci maintenant:

<a href="http://www.starfall.com/" target="_blank" rel="noopener">Starfall</a>

<a href="http://www.starfall.com/" target="_blank" rel="noopener noreferrer">Starfall</a>ces jours-ci, il semble être la meilleure pratique d'avoir les deux
ContextCue

1

exemple ci-dessous avec des target="_blank"travaux pour Safari et Mozilla

<a href="http://www.starfall.com" `target="_blank"`>

Utilisation de target="new"travaillé pour Chrome

<a href="http://www.starfall.com" `target="new"`>

2
qu'est-ce qui distingue votre réponse parmi des dizaines d'autres?
Farside
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.