3

Cenário

Estou otimizando uma página onde é exibida cerca de 200 Imagens (muito pequenas não necessita paginar) de parceiros, estas imagens estão envoltas em uma tag <a> e todos os sites dos parceiros abrem em nova aba (target="_blank").

Obs: Vi materiais relacionados no site porem o Javascript usado para responder a pergunta (que também não eram tão semelhantes a esta) era demasiadamente grande o que tiraria toda a economia obtida e necessitariam adaptações ao problema.

Pergunta

Como posso suprimir o target="_blank" e ainda manter as página abrindo em uma nova aba

Código HTML

<div id="minor_partners" class="col-md-10 col-md-offset-1">
    <a href="" target="_blank"><img class="link_thumb" src="" title=""></a>
</div>
1
  • 1
    O contexto está confuso. Acho que poderia simplificar apenas perguntando como atribuir target="_blank" para objetos <a>, sem inserir manualmente no html. Commented 21/07/2015 às 15:11

3 Respostas 3

5

A maneira que encontrei foi usar uma função da biblioteca jQuery .click() para que quando a imagem fosse clicada fosse atribuido o valor _blank a propriedade target.

Código HTML para teste

<html>
    <head>
    <title>
        Abrindo em nova Aba
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
    <body>
        <div id="minor_partners" class="col-md-10 col-md-offset-1">
        <a href="http://pt.stackoverflow.com/"><img class="link_thumb" src="https://clubdopenguinnotice.files.wordpress.com/2010/08/edit-icon.jpg"></a>
        <a href="http://pt.stackoverflow.com/"><img class="link_thumb" src="https://clubdopenguinnotice.files.wordpress.com/2010/08/edit-icon.jpg"></a>
        <a href="http://pt.stackoverflow.com/"><img class="link_thumb" src="https://clubdopenguinnotice.files.wordpress.com/2010/08/edit-icon.jpg"></a>
        </div>
            <a href="http://pt.stackoverflow.com/"><img class="link_thumb" src="https://clubdopenguinnotice.files.wordpress.com/2010/08/edit-icon.jpg"></a>
    </body>
</html>

Código Javascript (usado em elementos que não são gerados depois do carregamento da página)

$('#minor_partners a').click(function() {
    $(this).attr('target', '_blank');
});

Código Javascript (usado em elementos que são gerados depois do carregamento da página)

$('#minor_partners').on('click', 'a',function() {
    $(this).attr('target', '_blank');
});
3
  • 1
    Acho que $('#minor_partners a').on('click',function() { deve ser $('#minor_partners').on('click', 'a' ,function() { certo? para ser delegado...
    – Sergio
    Commented 21/07/2015 às 15:09
  • Não porque o <a> envolve a imagem, não tive problemas da forma que esta
    – Ricardo
    Commented 21/07/2015 às 15:10
  • 1
    Mas se escreves "usado em elementos que são gerados depois do carregamento da página" então $('#minor_partners a') não os vai selecionar. Para delegares o click tens de ter $('#minor_partners').on('click', 'elementoDelegado', etc...
    – Sergio
    Commented 21/07/2015 às 15:11
-1

Da pra adicionar addEventListener sem jquery sem alterar nada nas tags 'img' e 'a'

const element = document.querySelectorAll('a')
element.forEach(function(el){
  el.addEventListener('click', function () {
        var url = event.target.href; // pega o href de qualquer "a" clicado
        var guia = window.open(url, '_blank'); // abre em nova guia
        console.log("Abre: " +url+ " em nova guia.");
  });
});
<div id="minor_partners" class="col-md-10 col-md-offset-1">
    <a href="http://google.com" target="_blank"><img class="link_thumb" src="" title="">url 1</a><br/>
    <a href="http://bing.com" target="_blank"><img class="link_thumb" src="" title="">url 2</a><br/>
    <a href="http://duckduckgo.com" target="_blank"><img class="link_thumb" src="" title="">url 3</a><br/>
</div>

-3
function link(x) {
var url = x.href;
var guia = window.open(url, '_blank');
guia.focus();
console.log(url) 
}

e no html:

<a href="http://google.com" onclick="link(this)">url 1 </a><br>
<a href="http://yahoo.com" onclick="link(this)">url 2 </a><br>
<a href="http://bing.com" onclick="link(this)">url 3 </a><br>
<a href="http://duckduckgo.com" onclick="link(this)">url 4 </a>
1
  • A pergunta está sendo feita justamente para evitar mudar o HTML de todas as âncoras, e sua resposta adiciona um onclick em cada uma delas... Se for para modificar o HTML, já adicione o target que é mais simples. Commented 26/10/2020 às 17:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .