¿Cómo agrego target = "_ blank" a un enlace dentro de un div especificado?

Question

Digamos que tengo el siguiente código:

<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> 

En este caso, el código JavaScript añadiría target="_blank" a todos los enlaces dentro del div link_other.

¿Cómo puedo hacer eso usando 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. :-) 

También puede añadir una etiqueta de título para notificar al usuario que está haciendo esto, para advertir a ellos, ya que como se ha señalado, es no lo que los usuarios esperan:

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

Answer 2

Usando jQuery:

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

Answer 3

no 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 4

Tenga en cuenta que si esto se considera mala práctica en general por los desarrolladores web y expertos en usabilidad. Jakob Nielsen tiene esto que decir acerca de cómo quitar el control de los usuarios navegar por la experiencia:

Evitar el desove de varias ventanas del navegador si es posible - teniendo el botón "Volver" de distancia de los usuarios puede hacer que su experiencia tan doloroso que suele ser mucho supera cualquier beneficio que estés tratando de proporcionar. Una teoría común a favor de generar la segunda ventana es que evita que los usuarios abandonen su sitio, pero, irónicamente, puede tener el efecto contrario al impedir que regresen cuando lo desean.

Creo que este es el motivo por el que el W3C elimina el atributo de destino de la especificación XHTML 1.1.

Si está decidido a seguir este enfoque, la solución de Pim Jager es buena.

Una idea más agradable, más amigable para el usuario, sería agregar un gráfico a todos sus enlaces externos, indicando al usuario que seguir el enlace los llevará externamente.

Se puede hacer esto con jQuery:

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

}); 

Answer 5

en línea:

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

Answer 6

usar esto para cada enlace externo

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

Answer 7

utilizo esto para cada enlace externo:

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