Prevent iframe from reloading when changing the src attribute?

Question

I'm using Angular (not important for this problem but explains the syntax) and have something like this:

HTML:

<button (click)="setIframeSrc('http://mypage.com/page1')">Page 1</button>
<button (click)="setIframeSrc('http://mypage.com/page2')">Page 2</button>

<iframe [src]="iframeSource"></iframe>

Typescript:

setIframeSrc(url) {
    this.iframeSource = url;
}

The site "mypage.com" is my own website that is a SPA application, meaning there is no page reloads happening when going from Page 1 to Page 2.

Current behaviour

1. I click the "Page 1" button
2. The iframe loads in mypage.com/page1
3. I click the "Page 2" button
4. The iframe reloads and loads in mypage.com/page2

Wanted behaviour:

1. I click the "Page 1" button
2. The iframe loads in mypage.com/page1
3. I click the "Page 2" button
4. A navigation to mypage.com/page2 occurs in the iframe without reloading the whole iframe

When I click the two buttons I want "mypage.com" to only load on the first click and every subsequent click should not reload the iframe but just navigate inside the iframe.

Answer 1

If your parent site is on the same domain as child sites (mypage.com) you can try this: https://stackoverflow.com/a/45828201/10672983

If you have a cross-domain problems, you can try to simple messaging system parent-> child:

How to communicate between iframe and the parent site?

Parent:

 myIframe.contentWindow.postMessage('/page2', '*');

Child:

window.onmessage = function(e){
   router.navigateByUrl(e.data)
};