Comment puis-je ajouter target = “_ blank” à un lien dans un div spécifié?

Question

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?

Answer 1

/* 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 le faites, pour le prévenir, car, comme cela a été souligné, ce n'est pas ce à quoi s'attendent les utilisateurs:

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

Answer 2

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');
}

Answer 3

N'oubliez pas 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 ceci à dire sur la suppression du contrôle de l'expérience de navigation des utilisateurs:

  

Évitez autant que possible de générer plusieurs fenêtres de navigateur. & # 8212; prendre le " Retour " loin des utilisateurs peut rendre leur expérience si pénible qu'elle l'emporte généralement sur les avantages que vous essayez de fournir. Une théorie courante en faveur de la création de la deuxième fenêtre est qu’elle empêche les utilisateurs de quitter votre site. Ironiquement, 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 cible a été supprimé par le W3C de la spécification XHTML 1.1.

Si vous êtes décidé à adopter cette approche, 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)

});

Answer 4

Utilisation de jQuery:

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

Answer 5

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');
    }
  }
}

Answer 6

En ligne:

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

Answer 7

Utilisez ceci pour chaque lien externe

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