Comment puis-je ajouter target=“_blank” d'un lien dans une div?

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 JavaScript serait ajouter target="_blank" pour tous les liens à l'intérieur de la div link_other.

Comment puis-je le faire à l'aide de JavaScript?

  • Pourquoi ne pas laisser le JavaScript détecter les liens externes?
InformationsquelleAutor kakkalo | 2009-04-29
  1. 129
    /* 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 avertir l'utilisateur que vous faites cela, pour les avertir, parce que, 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.');
    • je vous remercie beaucoup. cela fonctionne comme un charme
    • Il a demandé pour javascript, pas jQuery.
    InformationsquelleAutor artlung
  2. 49

    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');
}
    • Au lieu de getAttributesByTagName, ne devrait-elle pas être getElementsByTagName?
    • Bon d'appel fixe
    • +1 pour l'écriture de vanille JavaScript.
    • Ou tout simplement linkList[i].target = '_blank';
    • Sérieusement, jquery!=javascript... Merci pour votre post... +1
    InformationsquelleAutor Mike Robinson
  3. 6

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

    Éviter la ponte de plusieurs fenêtres de navigateur si possible, de prendre le bouton "Retour" loin de les utilisateurs peuvent mettre leur expérience si douloureuse qu'habituellement, elle l'emporte de loin sur tout avantage que vous essayez de fournir. Une théorie commune en faveur de la ponte de la deuxième fenêtre est qu'il garde les utilisateurs de quitter votre site, mais, ironiquement, il peut avoir l'effet inverse, en les empêchant de revenir quand ils veulent.

    Je crois que c'est la justification de l'attribut cible enlevé par le W3C de la XHTML 1.1 spec.

    Si vous êtes à la mort de cette approche, Pim Jager la solution est bonne.

    Plus agréable, plus convivial idée serait d'ajouter un graphique à l'ensemble de vos liens externes, indiquant à l'utilisateur qu'en suivant le lien va les prendre à 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)

});
    • Alors que j'ai plutôt d'accord avec ce que tu dis, je pense que la cible vide et la "" astuce n'ont leur place, en particulier lorsque vous créez un lien vers un fichier PDF.
    • est intéressant -- sitepoint.com/article/standards-compliant-world/3 - bien qu'il semble comme il doit être utilisé en conjonction avec le JavaScript pour le faire fonctionner. Cela vous permet d'éviter d'utiliser les interdits xhtml attribut "target" en-ligne dans votre code html bien. Merci pour la mention bien, Mike. est la peine de suivre. 🙂
    • Que faire en cas de non-external link href commence par http:// ?
    • Jimmy, quelle serait votre raisonnement être pour cela que lorsque vous pouvez utiliser un chemin relatif?
    • La lecture de J. Nielson nom ici me rappelle de bokardo.com/archives/comic-jakob-who 😉
    • Je sais que cela a été posté il y a si longtemps, mais je vois le même problème arrive trop souvent aujourd'hui. Quelqu'un préfaces de leur répondre avec un coup de gueule sur les effets négatifs de l'utilisation de l'information demandée, mais ne parvient pas à répondre à la question qui a été posée. jQuery n'est pas le même que le JavaScript.

    InformationsquelleAutor Bayard Randel
  4. 5

    À l'aide de jQuery:

     $('#link_other a').each(function(){
  $(this).attr('target', '_BLANK');
 });
    • Ne pouvez-vous pas juste de faire: $('#link_other un").attr('target', '_blank'); ?
    • plus courte est la suivante: $('#link_other un").attr('target', '_blank'); comme artlung posté
    InformationsquelleAutor Pim Jager
  5. 3

    - Je l'utiliser 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');
    }
  }
}
    • Cela a fonctionné parfaitement pour moi, même avec a liens qui ont une classe spécifiée. Merci!
    InformationsquelleAutor soft0nic
  6. 1

    En ligne:

    $('#link_other').find('a').attr('target','_blank');
    InformationsquelleAutor cfree
  7. 0

    Utiliser pour chaque lien externe

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