Come faccio ad 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, JavaScript aggiungerebbe target = " _blank " a tutti i collegamenti 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. :-)

Potresti anche aggiungere un tag title per avvisare l'utente che lo stai facendo, per avvisarli, perché come è stato sottolineato, non è quello che gli utenti si aspettano:

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

Answer 2

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 3

Tieni presente che farlo è considerato una cattiva pratica in generale dagli sviluppatori web e dagli esperti di usabilità. Jakob Nielson ha detto questo sulla rimozione del controllo dell'esperienza di navigazione degli utenti:

  

Evita di generare più finestre del browser se possibile & # 8212; prendendo il "indietro" un pulsante lontano dagli utenti può rendere la loro esperienza così dolorosa che di solito supera di gran lunga qualsiasi vantaggio che stai cercando di offrire. Una teoria comune a favore della generazione della seconda finestra è che impedisce agli utenti di lasciare il tuo sito, ma ironicamente può avere l'effetto opposto impedendo loro di tornare quando vogliono.

Credo che questa sia la logica per cui l'attributo target viene rimosso dal W3C dalle specifiche XHTML 1.1.

Se sei pronto ad adottare questo approccio, la soluzione di Pim Jager è buona.

Un'idea migliore e più user friendly, sarebbe quella di aggiungere un elemento grafico a tutti i tuoi collegamenti esterni, indicando all'utente che seguendo il collegamento li porterai esternamente.

Puoi farlo con jquery:

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

});

Answer 4

Uso di jQuery:

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

Answer 5

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

Answer 6

In linea:

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

Answer 7

Usalo per ogni link esterno

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