How to open in a new tab a src=" " in a script

Question

I have in my webpage a script that shows a table with the current exchange rate, but when someone click on the table it riderect to the exchange rate webpage and i want it to open in a new tab. I have added the target="_blank" to the href, but it still redirect the page to the exchange web.

<div align="center" style="margin-top: 30px;">
    <div align="center" style="margin: 0px; padding: 0px; border: 2px solid rgb(136, 136, 136); width: 195px; background-color: transparent;">
        <div align="center" style="width: 100%; border-bottom: 1px solid rgb(136, 136, 136); margin: 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); background-color: transparent;">
            <a href="https://fx-rate.net/ILS/" target="_blank" style="text-decoration: none; font-size: 14px; font-weight: bold; text-align: center; color: rgb(0, 0, 0);">
                <img src="https://fx-rate.net/images/countries/il.png" style="margin: 0px; padding: 0px; border: none;"> Tipo de cambio del nuevo shekel israel&iacute;
            </a>
        </div>
        <script type="text/javascript" src="https://fx-rate.net/fx-rates2.php?label_name=Tipo de cambio del nuevo shekel israelí&lab=1&width=195&currency=ILS&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=e9e9e9&hbg=0&flag_code=il&length=short&label_type=country_name&cp=000000,FFFFFF,e9e9e9&cid=USD,EUR,GBP&lang=es"></script>
    </div>
</div>

It should work. Try to see this topic https://stackoverflow.com/questions/17711146/how-to-open-link-in-new-tab-on-html — Donny, Apr 02 '19 at 14:34
How do you make the click event work on the table ? We need to see the code in order to help you. — Nelson Teixeira, Apr 02 '19 at 14:34
It works only when someone click the title of the table, but if you click in any other part of the table it doesnt open in a new tab it just redirect me to the new webpage — Meir De La Vega, Apr 02 '19 at 14:43

score 0 · Accepted Answer · answered Apr 02 '19 at 14:50

The problem isn't in your code. It's the script that substitutes the table's interior that doesn't have the target='_blank' attribute. So you don't have direct control over it. But js can come to your rescue. Try this:

<div align="center" style="margin-top: 30px;">
    <div align="center" style="margin: 0px; padding: 0px; border: 2px solid rgb(136, 136, 136); width: 195px; background-color: transparent;">
        <div align="center" style="width: 100%; border-bottom: 1px solid rgb(136, 136, 136); margin: 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); background-color: transparent;">
            <a href="https://fx-rate.net/ILS/" target="_blank" style="text-decoration: none; font-size: 14px; font-weight: bold; text-align: center; color: rgb(0, 0, 0);">
                 <img src="https://fx-rate.net/images/countries/il.png" style="margin: 0px; padding: 0px; border: none;"> Tipo de cambio del nuevo shekel israel&iacute;
            </a>            
        </div>
        <script type="text/javascript" src="https://fx-rate.net/fx-rates2.php?label_name=Tipo de cambio del nuevo shekel israelí&lab=1&width=195&currency=ILS&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=e9e9e9&hbg=0&flag_code=il&length=short&label_type=country_name&cp=000000,FFFFFF,e9e9e9&cid=USD,EUR,GBP&lang=es"></script>
    </div>
</div>
<script>document.querySelectorAll('a').forEach((e)=>e.setAttribute('target', '_blank'));</script>

You can't try this directly here because snippet will block target='_blank'. But you can see it working in JSFiddle: https://jsfiddle.net/7xLy3z8n/

How to open in a new tab a src=" " in a script

1 Answers1