Search code examples
angulariframe

Setting the target to an iframe is ignored and opened in a new page

This is pure and simple HTML code, that works fine in a regular .html file. It does what it is supposed to do: That is, the image is loaded in the iframe referred by the target attribute.

However, when put inside my main Angular component, the target is ignored, and the image is loaded in a new browser tab. This problem is present with Chrome and Safari, but not with Firefox.

<iframe name="myframe1"></iframe>
<a href="https://some_image_url.jpg" target="myframe1">Load Image</a>

Anyone know why is that? And how can it be solved?

Note: I am currently using Angular 5.2.11, but I think it is the same in all versions.

Please note that the example does not have any useful purpose, it is the simplest expression of the problem, in order to illustrate the question without including additional complexities in my application.

Solution

  • I need to move on, so I am using this alternative, to accomplish the same thing:

    <iframe #myframe1></iframe>
<a (click)="myframe1.src = 'https://some_image_url.jpg'">Load Image</a>