¿Cómo agrego target = & # 8220; _blank & # 8221; 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 JavaScript agregarí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 agregar una etiqueta de título para notificar al usuario que está haciendo esto, para advertirle, porque como se ha señalado, no es lo que esperan los usuarios:

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

Answer 2

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 3

Tenga en cuenta que hacer esto es considerado una mala práctica en general por los desarrolladores web y expertos en usabilidad. Jakob Nielson tiene esto que decir sobre la eliminación del control de la experiencia de navegación de los usuarios:

  

Evite engendrar múltiples ventanas del navegador si es posible, tomando el " Atrás " alejarlos de los usuarios puede hacer que su experiencia sea tan dolorosa que generalmente supera con creces cualquier beneficio que intente 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 evitar que regresen cuando lo deseen.

Creo que esta es la razón para que el W3C elimine el atributo de destino de la especificación XHTML 1.1.

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

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

Podrías 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 4

Usando jQuery:

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

Answer 5

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

Answer 6

En línea:

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

Answer 7

Use esto para cada enlace externo

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