web-dev-qa-db-fra.com

Comment ajouter target = "_ blank" à un lien dans un div spécifié?

Disons que j'ai le code suivant:

<div id="link_other">
    <ul>
        <li><a href="http://www.google.com/">google</a></li>
        <li>
            <div class="some_class">
                dsalkfnm sladkfm
                <a href="http://www.yahoo.com/">yahoo</a>
            </div>
        </li>
    </ul>
</div>

Dans ce cas, le code JavaScript ajouterait target="_blank" à tous les liens de la division link_other.

Comment puis-je faire cela en utilisant JavaScript?

javascripthyperlinkexternal-links
58
kakkalo
/* here are two different ways to do this */
//using jquery:
$(document).ready(function(){
  $('#link_other a').attr('target', '_blank');
});

// not using jquery
window.onload = function(){
  var anchors = document.getElementById('link_other').getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    anchors[i].setAttribute('target', '_blank');
  }
}
// jquery is prettier. :-)

Vous pouvez également ajouter une balise de titre pour informer l'utilisateur que vous procédez ainsi, pour l'avertir, car, comme cela a été souligné, ce n'est pas ce que les utilisateurs attendent:

$('#link_other a').attr('target', '_blank').attr('title','This link will open in a new window.');
124
artlung

Non-jquery:

// Very old browsers
// var linkList = document.getElementById('link_other').getElementsByTagName('a');

// New browsers (IE8+)
var linkList = document.querySelectorAll('#link_other a');

for(var i in linkList){
 linkList[i].setAttribute('target', '_blank');
}
48
Mike Robinson

Gardez à l'esprit que cela est considéré comme une mauvaise pratique en général par les développeurs Web et les experts en convivialité. Jakob Nielson a déclaré ceci à propos de la suppression du contrôle de l'expérience de navigation des utilisateurs:

Dans la mesure du possible, évitez de créer plusieurs fenêtres de navigateur. Si vous retirez le bouton "Précédent" des utilisateurs, leur expérience peut être si pénible qu’elle dépasse généralement l’avantage que vous tentez de fournir. Une théorie commune en faveur de la génération de la deuxième fenêtre est qu’elle empêche les utilisateurs de quitter votre site, mais paradoxalement, elle peut avoir l’effet inverse en les empêchant de revenir quand ils le souhaitent.

Je pense que c'est la raison pour laquelle l'attribut target a été supprimé par le W3C de la spécification XHTML 1.1.

Si cette approche vous tient à coeur, la solution de Pim Jager est bonne.

Une idée plus agréable et plus conviviale serait d’ajouter un graphique à tous vos liens externes, indiquant à l’utilisateur que le suivi du lien les mènera à l’extérieur. 

Vous pouvez le faire avec jquery:

$('a[href^="http://"]').each(function() {
    $('<img width="10px" height="10px" src="/images/skin/external.png" alt="External Link" />').appendTo(this)

});
6
Bayard Randel

Utilisation de jQuery:

 $('#link_other a').each(function(){
  $(this).attr('target', '_BLANK');
 });
5
Pim Jager

J'utilise ceci pour chaque lien externe:

window.onload = function(){
  var anchors = document.getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    if (anchors[i].hostname != window.location.hostname) {
        anchors[i].setAttribute('target', '_blank');
    }
  }
}
3
soft0nic

En ligne:

$('#link_other').find('a').attr('target','_blank');
1
cfree

Utilisez ceci pour chaque lien externe

$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank');
0
gidzior