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

Answer 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

Answer 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);

Answer 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
  }
}