onLoad happening multiple times with Iframe
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
Ignore events while url
is null
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
}
}
Zaixu
Updated on July 23, 2022Comments
-
Zaixu over 1 year
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
-
Zaixu about 7 yearsStill happening even with that, unfortunately.
-
Günter Zöchbauer about 7 yearsCan you reproduce in a Plunker?
-
Zaixu about 7 yearsThis is my more advanced example that does it. plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview
-
Zaixu about 7 yearsNice, 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 about 7 yearsAs in, is the error somewhere else in the code, that should be fixed so event only comes once
-
Günter Zöchbauer about 7 yearsTo me it sounds like some weird Chrome behavior that should be fixed there.