Ionic 2: Dismiss loading animation when iframe is ready

Question

I have to include a external webpage in my app, so I use an iframe for this. Now I want to show an loading animation, while the iframe is loading. That works fine, but I don't know, how to dismiss the animation, when the iframe is ready. I can't edit the code of the page in the iframe.

That's my code on the TypeScript-File:

ngOnInit() {
    this.presentLoading();
}

presentLoading() {
    let loading = this.loadingCtrl.create({
        content: 'Please wait...'
    });

    loading.present();
}

and the HTML file

<ion-content>
    <iframe name="chatFrame" src="http://..."></iframe>
</ion-content>

I believe this question may have been answer here: [Checking Load State on an Iframe](http://stackoverflow.com/questions/17158932/how-to-detect-when-an-iframe-has-already-been-loaded/36155560#36155560) — Chad Fisher, Feb 16 '17 at 16:08

score 2 · Accepted Answer · answered Feb 16 '17 at 16:27

Attach onLoad iframe method to a function that will dismiss your loading animation.

<ion-content>
    <iframe name="chatFrame" src="http://..." (load)="dismissLoading()"></iframe>
</ion-content>

And in your component class :

loading;

ngOnInit() {
    this.presentLoading();
}

presentLoading() {
    this.loading = this.loadingCtrl.create({
       content: 'Please wait...'
    });

    loading.present();
}

dismissLoading(){
    this.loading.dismiss();
}

I tried this, but i get "this.loading.dismiss() is not a function" — Vinícius Mussato, Apr 10 '18 at 22:40

score 0 · Answer 2 · answered Dec 05 '20 at 03:17

0

The answer above is wrong, I modify it and it can run perfectly：

dismissLoading(){
   //this.loading.dismiss();
     this.loadingCtrl.dismiss();
}

answered Dec 05 '20 at 03:17

dongliang chen

11
2

Ionic 2: Dismiss loading animation when iframe is ready

2 Answers2