Come aggiungere target = "_ blank" a un collegamento all'interno di un div specificato?

Question

Diciamo che ho il seguente codice:

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

In questo caso, il codice JavaScript aggiungerebbe target="_blank" a tutti i link all'interno del div link_other.

Come posso farlo utilizzando 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. :-) 

Si potrebbe anche aggiungere un tag di titolo per notificare all'utente che si sta facendo questo, di metterli in guardia, perché, come è stato sottolineato, è non ciò che gli utenti si aspettano:

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

Answer 2

utilizzando jQuery:

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

Answer 3

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

Answer 4

Tenete a mente che facendo questo è considerato cattiva pratica, in generale, per gli sviluppatori web e esperti di usabilità. Jakob Nielsen ha questo da dire sulla rimozione controllo degli utenti esperienza di navigazione:

Evitare la deposizione delle uova più finestre del browser, se possibile - di prendere il pulsante "Indietro" lontano dagli utenti possono rendere la loro esperienza così doloroso che di solito lontano supera ogni beneficio che stai cercando di fornire. Una teoria comune a favore della generazione della seconda finestra è che impedisce agli utenti di lasciare il tuo sito, ma per ironia della sorte potrebbe avere l'effetto opposto impedendo loro di tornare quando lo desiderano.

Credo che questo sia il fondamento logico per l'attributo target rimosso dal W3C dalla specifica XHTML 1.1.

Se siete decisi a seguire questo approccio, la soluzione di Pim Jager è buona.

Un'idea più piacevole e più intuitiva sarebbe quella di aggiungere un elemento grafico a tutti i collegamenti esterni, indicando all'utente che seguendo il collegamento li porterà esternamente.

Si potrebbe fare questo con jQuery:

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

}); 

Answer 5

Inline:

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

Answer 6

Utilizzare questo per ogni link esterno

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

Answer 7

Io lo uso per ogni link esterno:

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