Comment ajouter target="_blank" à un lien dans une div spécifiée ?

Question

Supposons que j'ai le code suivant :

        google

                dsalkfnm sladkfm
                yahoo

Dans ce cas, le JavaScript ajouterait target="_blank" à tous les liens dans la div link_other.

Comment puis-je faire cela en utilisant JavaScript ?

Answer 1

/* voici deux façons différentes de le faire */
// en utilisant jquery :
$(document).ready(function(){
  $('#link_other a').attr('target', '_blank');
});

// sans utiliser jquery
window.onload = function(){
  var anchors = document.getElementById('link_other').getElementsByTagName('a');
  for (var i=0; i

`Vous pouvez également ajouter une balise title pour informer l'utilisateur que vous le faites, pour les avertir, car comme cela a été souligné, ce n'est pas ce à quoi les utilisateurs s'attendent :

$('#link_other a').attr('target', '_blank').attr('title','Ce lien s'ouvrira dans une nouvelle fenêtre.');`

Answer 2

Non-jquery:

// Navigateurs très anciens
// var linkList = document.getElementById('link_other').getElementsByTagName('a');

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

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

Answer 3

Gardez à l'esprit que faire cela est généralement considéré comme une mauvaise pratique par les développeurs web et les experts en ergonomie. Jakob Nielson a ceci à dire sur le fait de supprimer le contrôle de l'expérience de navigation des utilisateurs :

Évitez de créer plusieurs fenêtres de navigateur si possible - enlever le bouton "Retour" aux utilisateurs peut rendre leur expérience tellement pénible que cela dépasse généralement tout avantage que vous essayez de fournir. Une théorie courante en faveur de la création d'une deuxième fenêtre est qu'elle empêche les utilisateurs de quitter votre site, mais ironiquement cela peut avoir l'effet inverse en les empêchant de revenir quand ils le veulent.

Je crois 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 vraiment déterminé à adopter cette approche, la solution de Pim Jager est bonne.

Une idée plus agréable et conviviale serait d'ajouter une icône à tous vos liens externes, indiquant à l'utilisateur que le lien le dirigera vers un site externe.

Vous pouvez le faire avec jQuery :

$('a[href^="http://"]').each(function() {
    $('').appendTo(this)
});

Answer 4

En utilisant jQuery :

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

Answer 5

En ligne :

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