Search code examples
angulartypescriptiframeangular10

Angular 10 iframe first shows 404 page then displays page content

Hello i am using bellow HTML code to use iframe and show an external page hosted on the same domain so no wories for cross domain

<iframe frameborder="0" [src]="url"></iframe>

and the following typescript code to sanitize and load the content

this.url = this.sanitizer.bypassSecurityTrustResourceUrl("/assets/static/page.html");

the problem is a bit strange after page load, the iframe first shows error 404 for a fraction of second in localhost and for a 2 to 3 seconds in production and then displays the actual page content. This is very irritating as angular has no proper support for iframe events e.g. page load, failure

Solution

  • I can imagine you're setting the URL after the iframe has been rendered. You could try adding an *ngIf="url" to the iframe to delay its rendering until the URL has been set. Alternatively, try setting the URL before you render the iframe. If that doesn't help, could you please post the code of your component?