txt - javascript descargar varios archivos

¿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 JavaScript agregaría target="_blank" a todos los enlaces dentro del div link_other .

¿Cómo puedo hacer eso usando JavaScript?

Answer 1

En línea:

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

Answer 2

Lo uso 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 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 hacer esto es considerado una mala práctica en general por los desarrolladores web y los expertos en usabilidad. Jakob Nielson dice lo siguiente sobre eliminar el control de la experiencia de navegación de los usuarios:

Si es posible, evite engendrar múltiples ventanas del navegador: quitar el botón "Atrás" de los usuarios puede hacer que su experiencia sea tan dolorosa que, por lo general, supera con creces cualquier beneficio que esté tratando de brindar. 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 esta es la razón por la que el W3C elimina el atributo objetivo de la especificación XHTML 1.1.

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

Una idea más agradable y más 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 5

Usando jQuery:

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

Answer 6

Use esto para cada enlace externo

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

Answer 7

/* 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 advertirles, 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.'');