onLoad happening multiple times with Iframe

Question

Having some issues with Angular 2, im making a component that has a iframe and sets the source from the input. However when it loads, it hits onLoad twice, one with src='' and another with the actual input url.

I cant seem to figure out how to hook the url up for the iframe when it gets put into the view.

export class ExternalComponent implements OnInit {
    @Input()
    url: string;

    private src: any;

    constructor(private sanitizer: DomSanitizer) {

    }

    ngOnInit()    
    {
        this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
    }

    onLoad() {

    }
}

Html:

<iframe [src]="src" frameBorder="0" (load)="onLoad()"></iframe>

Reproduction: http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview

Thanks

Solution 1

You could try an attribute binding, which isn't added at all if the value is null

<iframe [attr.src]="src ? src = null" frameBorder="0" (load)="onLoad()"></iframe>

update

As explained in https://stackoverflow.com/a/15880489/217408 when the event handler is added to the element before the <iframe> is added to the DOM. This seems to be what Angular is doing.

Add event handler imperatively after the element was added to the DOM

Plunker example

Ignore events while url is null

Plunker example

Solution 2

ngOnInit()    
    {
        this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
    } 
This is wrong code if use like this iframe will load more time .
ts file 
ngOnInit()    
    {
        this.src = this.url;
    } 
make html page like this (use pipe)
<iframe [src]="src| safe" ></iframe>

pipe file

      import { DomSanitizer} from '@angular/platform-browser';
    constructor(private sanitizer:DomSanitizer){
      return   this.sanitizer.bypassSecurityTrustResourceUrl(value);

Solution 3

Using debugger I found out that event.target.src could provide the solution. The first time it runs, it is an empty string "". The second time the value is the image url. So, in my case it works like that:

onLoad(event: any) {
  if (event.target.src) {
      //do some stuff here
  }
}

Comments

[Zaixu]

Still happening even with that, unfortunately.

[Günter Zöchbauer]

Can you reproduce in a Plunker?

[Zaixu]

This is my more advanced example that does it. plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview

[Zaixu]

Nice, I have a question though, as trying the other thin answer doesn't generate double events. Is this normal or are we just making a solution to a error that should not exist?

[Zaixu]

As in, is the error somewhere else in the code, that should be fixed so event only comes once

[Günter Zöchbauer]

To me it sounds like some weird Chrome behavior that should be fixed there.