iframe: Subsequent clicks loads the new url in a new tab

问题

!! SOS !!

Problem Background: I have a file which contains some page titles and corresponding URLs. I am reading this file dynamically and generating a table with each row showing the (clickable) title. There is one iframe on the page. I want that when a user clicks on one of the rows, the corresponding page should get loaded in the iframe. These urls may belong to different domains.

Main Issue: The first click opens the corresponding url perfectly in the iframe. However, any subsequent clicks (on the same or different row), opens the url in a new window, instead of replacing the earlier url in the iframe.

Tried googling it for long, but it appears that this problem is still unresolved (lots of empty posts without replies :-()

Please reply to this post. I will be happy to provide you with much more information/code if required.

Regards P

PS: By the way, the same thing is happening with this simpler html code. Just two links and one iframe. Copy-paste this html file and try. One link will load the content in iframe and the other will redirect to a new tab :x :x

<html>
<table>
<tr><td><a style="text-decoration:none; line-height: 150%; color:darkslategray;" href="http://www.usatoday.com/story/money/markets/2013/01/04/stocks-higher-bull-market-high/1810075/" target="main_frame">GM, Peugeot to Decide on Brazil Factory This Month, Veja Says <br>Bloomberg News &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2012-05-19</a></td></tr>
<tr><td><a style="text-decoration:none; line-height: 150%; color:darkslategray;" href="http://www.reuters.com/article/2013/01/04/us-markets-stocks-idUSBRE8BG0D620130104" target="main_frame">GM, Peugeot no Decide on Brazil Factory This Month, Veja Says <br>Bloomberg News &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2012-05-20</a></td></tr>
</table>

<iframe name="main_frame" frameborder="0" marginheight="0" marginwidth="0" scrolling="yes" height="100%" width="100%" src=""></iframe>

</html>

Tested on both chrome and firefox.

回答1:

Solved it !!!

Used these two links: https://developer.mozilla.org/en-US/docs/HTML/Element/iframe and Firefox opens links targeted for iFrame in browser's new tab instead

and the following piece of code:

<html>
<head>
<script type="text/javascript">
function navigate(url)
{
    var iframe = document.getElementsByTagName( "iframe" )[0];
    iframe.src = url;
}
</script>
</head>

<body>
<table>
<tr><td><a href="javascript:navigate('http://www.usatoday.com/story/money/markets/2013/01/04/stocks-higher-bull-market-high/1810075/')">Some title</a></td></tr>
<tr><td><a href="javascript:navigate('http://www.reuters.com/article/2013/01/04/us-markets-stocks-idUSBRE8BG0D620130104')">Some Other title</a></td></tr>
</table>

<iframe name="main_frame" frameborder="0" marginheight="0" marginwidth="0" scrolling="yes" height="100%" width="100%" src=""></iframe>

</body>
</html>

回答2:

One of those web pages changes the window.name of its window, and targeting happens via window name, not frame name...

来源：https://stackoverflow.com/questions/14170807/iframe-subsequent-clicks-loads-the-new-url-in-a-new-tab

标签

html

html5

google-chrome

firefox

iframe