Iframe reloads again if focused out in Ionic 3

Ionic Framework ionic-v3
1

I am working on an Ionic 3 application. Inside a div, i am loading an external url in an iframe and it is loading perfectly. But it creates problem when focuses out. The iframe reloads every time when it focuses out.

Scenario-01: In the page where i have loaded the iframe, there are other controls outside of the iframe such as a text box to enter some data. So, when i click on the textbox, the keyboard appears but at the same time iframe reloads again.

Scenario-02: I have one menu sliding drawer from left in the application. When i open the sliding drawer to select another page, i could see the iframe of the existing page reloads again.

Scenario-03: The external url that i have loaded in the iframe has some input controls. So, i want to enter something in those input boxes, the keyboard appears but at the same time iframe gets reloaded and i could not provide any data in those input boxes.

From my assumption, iframe is causing problems when it focuses out. So, i tried to capture the blur event of that iframe and try to stop the propagation of the event.

<iframe width="100%" height="100%" [src]="url| safeHtml:'resourceUrl'" (ionBlur)="checkBlur($event)" (ionFocus)="checkFocus($event)"></iframe>

But, both ionFocus and ionBlur events were not triggering.

For now, when i tried with Android application, all the scenarios trigger iframe reload. As keyboard does not appears in browser, when i tried with Browser, only Scenario-02 triggers iframe reload.

Iframe should load at the first time only. Then user can do whatever operations inside the iframe or outside the iframe but the iframe should not load again.

How to stop reloading the iframe if it focuses out by keyboard or sliding drawer or anything?

2

I figured out the solution. The problem was with the safeHtml:‘resourceUrl’ pipe. 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);
}