Search code examples
angulariframeangular2-changedetection

iframe content reloads when there is a DOM manipulation Angular

I have an iframe that is loaded dynamically when a specific condition is met.

      <div *ngIf="iframeData">
        <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(iframeData.iFrameUrl)" name="paymetricIFrame"></iframe>
      </div>

The issue I have is that whenever anything in the page - outside of the frame - changes (Input text, select values, etc), the iFrame content reloads, and I can see all the scripts contained being reloaded in the network tab, and therefore what the user has filled in the iframe disappears.

I am suspecting the ChangeDetectionStrategy since the stack trace of the initiator of the call that loads the files for the iframe goes back to viewRef._detectChanges as you can see from the screenshot:

enter image description here

I tried to add ChangeDetectionStrategy.OnPush but that created other issues on the page.

Solution

  • I solved the issue by creating a new component that contains only the iframe. I would still want to know why that solved the issue...