Créer un lien qui s'ouvre dans un nouvel onglet
Publié leEn HTML, il est possible de créer des liens qui s’ouvriront dans une nouvelle fenêtre lorsqu’ils sont cliqués. Cette fonctionnalité est utile lorsque vous souhaitez ouvrir un lien externe à votre site Web sans quitter la page sur laquelle vous êtes actuellement. Découvrez comment créer un lien qui s’ouvre dans un nouvel onglet en 3 étapes simples, ainsi que des informations supplémentaires sur la façon de le faire à l’aide de JavaScript.
Créer un lien vers un nouvel onglet
Pour créer un lien HTML dans une nouvelle fenêtre, il suffit simplement d'ajouter l'attribut target et la valeur _blank.
Vous pouvez donc ajouter ce code HTML : <a href="#" target="_blank">
Remplacez simplement "#" par votre URL.
Voici un simple exemple vers la page d'accueil de devfront :
<a href="https://devfront.fr" target="_blank">Accéder à DevFront dans un nouvel onglet</a>
Rassurez-vous, c'est assez simple à comprendre.
Voyons ça un peu plus en détails :
Ajoutez la balise <a> en HTML
La balise <a> en HTML est l'une des balises les plus courantes et elle est utilisée pour créer des liens vers des pages et des sites Web externes.
Renseignez l'URL avec href
Vous devez ajouter la balise <a> en HTML et renseigner l'URL avec l'attribut href.
Ajoutez l'attribut target
Ensuite, vous devez ajouter l'attribut target et définir sa valeur sur "_blank", ce qui indique que le lien s'ouvrira dans une nouvelle fenêtre. Enfin, vous pouvez utiliser du code JavaScript pour ouvrir un lien dans une nouvelle fenêtre.
Une fois ces trois étapes réalisées, votre lien sera configuré de manière à s'ouvrir dans une nouvelle fenêtre lorsqu'il est cliqué.
Aller plus loin en Javascript
Créer un script en JS vous permettra de personnaliser l'ouverture d'un lien dans une nouvelle fenêtre.
Vous pouvez définir la taille de la fenêtre, ainsi que d'autres paramètres tels que la présence ou non d'une barre de menu et d'une barre d'adresse. Vous pouvez également ajouter du code qui permet de contrôler le comportement d'une fenêtre ouverte, comme le fait de la centrer ou de lui donner le focus.
Exemple d'un code JS
<script>
function openNewWindow(url) {
window.open(url,"_blank", "width=400, height=400, toolbar=yes, scrollbars=yes, resizable=yes");
}
openNewWindow("http://example.com");
</script>
Le code ci-dessus est un exemple de code JavaScript qui peut être utilisé pour ouvrir un lien dans une nouvelle fenêtre.
Il commence par définir une fonction appelée openNewWindow qui prend un paramètre URL. Cette fonction utilise la méthode window.open() pour ouvrir la fenêtre.
Le premier paramètre est l'URL du lien, le deuxième est le paramètre target qui doit être défini sur "_blank" pour ouvrir le lien dans une nouvelle fenêtre.
Les autres paramètres définissent la largeur et la hauteur de la fenêtre, ainsi que si une barre de menu, une barre d'adresse et des barres de défilement sont présents.
Enfin, la fonction openNewWindow est appelée avec l'URL à ouvrir dans une nouvelle fenêtre.
Vous pouvez également utiliser des attributs supplémentaires tels que rel="noreferrer" pour empêcher le navigateur de transmettre des informations sur le lien à l'URL cible.