Связь шаблонов подписчиков Publisher между приложениями Angular 6 через iframe

Question

Я работаю над решением, в котором приложение angular используется внутри iframe другого приложения angular. Дочернему приложению нужны некоторые параметры, чтобы отобразить правильную информацию в родительском приложении. Я прочитал множество решений по всему Интернету, и хорошее решение - применить издателя / подписчика шаблона проектирования.

Много примеров между компонентами внутри одного приложения, и мне интересно, если такое же решение с rx js объекты - правильный путь (как показано здесь ).

Я сомневаюсь: как я подписываю дочернее приложение на родителя (внешнего издателя)?

Я думал о REST API, предоставляемом родителем для регистрации и отмены регистрации подписчика, но я не уверен.

Есть ли опыт в этой ситуации? Заранее спасибо

Answer 1

вы можете использовать метод window.postmessage для публикации сообщений через iframe и родительское приложение. Вы также можете опубликовать данные вместе с событием. https://javascript.info/cross-window-communication

Вы можете перейти по ссылке выше, чтобы отправить сообщение в и из iframe.

Answer 2

Единственный способ, которым я видел это, - это CustomEvent объекты.

Страница, которая хочет отправить уведомление, делает это, используя:

<script>
    window.onload = function () {
        /* The parent window hosts the Angular application */
        const parent = window.parent;
        /* Send an event to the message handler */
        const event = new CustomEvent('example-unique-string', { field1: 'value', field2: 'value' });
        parent.dispatchEvent(event);
    };
</script>

Вы затем обработайте это сообщение, используя:

window.addEventListener('example-unique-string', () => { /* some function */ }, false);

И, конечно, вы можете сделать это в обоих направлениях.

Я бы, конечно, вообще не использовал iframe, если бы мог, но вы будете знать, что подходит для вашей ситуации.