Open link in new tab without using target="_Blank" embedded in HTML

Asked

Viewed 81,788 times

3

Setting

I am optimizing a page where is displayed about 200 Images (very small does not need paging) partners, these images are wrapped in a tag <a> and all partner websites open in new tab (target="_blank").

Obs: I saw related materials on the site but the Javascript used to answer the question (which also were not so similar to this one) was too big what would take all the savings obtained and would need adaptations to the problem.

Question

How can I suppress the target="_blank" and still keep the pages opening in a new tab

HTML code

<div id="minor_partners" class="col-md-10 col-md-offset-1">
    <a href="" target="_blank"><img class="link_thumb" src="" title=""></a>
</div>
javascript html
  • 1

    The context is confused. I think I could simplify just by asking how to assign target="_Blank" to <a> objects, without manually inserting into html.

3 answers

5


The way I found it was to use a library function jQuery .click() so that when the image was clicked the value was set _blank the property target.

HTML code for testing

<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="/"><img class="link_thumb" src="https://clubdopenguinnotice.files.wordpress.com/2010/08/edit-icon.jpg"></a>
        <a href="/"><img class="link_thumb" src="https://clubdopenguinnotice.files.wordpress.com/2010/08/edit-icon.jpg"></a>
        <a href="/"><img class="link_thumb" src="https://clubdopenguinnotice.files.wordpress.com/2010/08/edit-icon.jpg"></a>
        </div>
            <a href="/"><img class="link_thumb" src="https://clubdopenguinnotice.files.wordpress.com/2010/08/edit-icon.jpg"></a>
    </body>
</html>

Javascript code (used in elements that are not generated after page loading)

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

Javascript code (used in elements that are generated after page loading)

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

    I think that $('#minor_partners a').on('click',function() { must be $('#minor_partners').on('click', 'a' ,function() { right? to be delegate...

  • Not because the <a> involves the image, I had no problems the way this

  • 1

    But if you write "usado em elementos que são gerados depois do carregamento da página" then $('#minor_partners a') will not select them. To delegate the click you must have $('#minor_partners').on('click', 'elementoDelegado', etc...

-1

You can add addeventlistener without jquery without changing anything in the 'img' and 'a' tags'

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

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

  • The question is being asked precisely to avoid changing the HTML of all anchors, and your answer adds a onclick in each of them... If it is to modify the HTML, already add the target which is simpler.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.