Iframe reloads after show keyboard

Ionic Framework ionic-v3
1

I’m using iframe with dynamic link.

[Updated to make more clear]
I created a page with an iframe. The url that the iframe will render has some input fields. When I click on this input field to type something, it shows the keyboard. When the keyboard appears it reloads the iframe’s content. So I can do nothing, because whenever I show the keyboard the iframe is reloaded.

my view:

<ion-content no-padding>
  <iframe [src]="urlTransform()"></iframe>
</ion-content>

my method in controller:

urlTransform() {
   return this.sanitizer.bypassSecurityTrustResourceUrl(this.url_base + this.url_params);
}
3

I created a page with an iframe. The url that the iframe will render has some input fields. When I click on this input field to type something, it shows the keyboard. When the keyboard appears it reloads the iframe’s content. So I can do nothing, because whenever I show the keyboard the iframe is reloaded.

4

I had a similar issue and my solution was to set [src] of iframe to a variable instead of function call. I set the variable in the constructor of the page. My guess is that it calls the function multiple times (maybe at ui updates) and each time it gets a new ResourceUrl and reloads the iframe.

In my case i added (load) event and it started constantly reloading the iframe.

1 Like
5

If you’re doing this:

<iframe [src]="urlTransform()"></iframe>

You’re iFrame-url is going to be continuously sanitized I suppose. Please safe the sanitized URL to a variable as @ales_rozman suggested. w

1 Like
6

Found any solution for the issue? I have similar issue.

7

Any solution for this issue? I am facing similar problem as yours. My code is like below:

<iframe width="100%" height="100%" [src]="url| safeHtml:'resourceUrl'"></iframe>

Can anyone see my question here?

8

I figured out the solution. For my case, the problem was with the safeHtml:‘resourceUrl’ pipe. For your case, it is the urlTransform() function. It was sanitizing every time iframe comes in focus and prepared a new ResourceURL. As a result, iframe gets reloaded each time.

So, i sanitized the url beforehand in the ts and set it to the variable. As a result, iframe is not reloading anymore. I have used DomSanitizer to sanitize the resource url.

url: any;

constructor(private domSanitizer: DomSanitizer) {
    this.url= this.getSantizedURL();
}

getSantizedURL() {
   this.domSanitizer.bypassSecurityTrustResourceUrl(mySampleURL);
}