Запретить перезагрузку iframe при изменении атрибута sr c?

Question

Я использую Angular (не важно для этой проблемы, но объясняет синтаксис) и получаю примерно следующее:

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;
}

Сайт mypage.com - это мой собственный веб-сайт, который является приложением SPA, что означает, что при переходе со страницы 1 на страницу не происходит перезагрузки страницы. 2.

Текущее поведение

1. Я нажимаю кнопку «Страница 1»
2. iframe загружается в mypage.com/page1
3. Я нажимаю кнопку « Кнопка страницы 2
4. iframe перезагружается и загружается в mypage.com/page2

Требуемое поведение:

1. Я нажимаю кнопку «Страница 1»
2. iframe загружается в mypage.com/page1
3. Я нажимаю кнопку «Страница 2»
4. Переход к mypage.com/page2 происходит в iframe без перезагрузки всего iframe

Когда я нажимаю две кнопки, я хочу, чтобы «mypage.com» загружался только при первом щелчке, и каждый последующий щелчок не должен перезагружать iframe, а просто перемещаться по insi в iframe.

Answer 1

Если ваш родительский сайт находится в том же домене, что и дочерние сайты (mypage.com), вы можете попробовать следующее: { ссылка }

Если у вас есть проблемы с несколькими доменами, вы можно попробовать простую систему обмена сообщениями parent-> child:

Как общаться между iframe и родительским сайтом?

Parent:

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

Детский:

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