Como faço para adicionar target = “_ blank” a um link dentro de uma div especificado?

Question

Vamos dizer que eu tenho o seguinte 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>

Neste caso, o JavaScript acrescentaria target="_blank" a todas as ligações dentro do link_other div.

Como posso fazer isso 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. :-)

Você também pode adicionar um título de tag para notificar o usuário que você está fazendo isso, para avisá-los, porque, como já foi referido, não é o que os usuários esperam:

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

Answer 2

Não-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

Tenha em mente que fazer isso é considerado uma má prática em geral por desenvolvedores web e especialistas em usabilidade. Jakob Nielsen tem a dizer sobre a remoção de controle dos usuários navegando experiência:

Evitar desova várias janelas do navegador, se possível - tomando o botão "Voltar" longe de usuários podem fazer sua experiência tão dolorosa que, geralmente, supera em muito o que quer que beneficiam você está tentando fornecer. Uma teoria comum em favor de desova a segunda janela é que ele mantém os usuários saiam do seu site, mas, ironicamente, pode ter exatamente o efeito oposto, impedindo-os de retornar quando quiser.

Eu acredito que esta é a razão para o atributo alvo a ser removido pelo W3C da especificação XHTML 1.1.

Se você está determinado a tomar esta abordagem, a solução da Pim Jager é bom.

A mais agradável, mais uma idéia de fácil utilização, seria para anexar um gráfico para todos os seus links externos, indicando ao usuário que seguindo o link irá levá-los externamente.

Você poderia fazer isso com 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

Eu uso isso para cada link 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

Inline:

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

Answer 7

Use isso para cada ligação externa

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