Связь с iframe (тот же домен), используя Angular 4/5

Question

Я работаю над приложением, в котором мне нужно отобразить некоторые компоненты внутри <iframe>, поэтому <iframe> имеет то же происхождение.

Мне нужно передать некоторые значения этому <iframe> (например, вошедшим в систему информации о пользователе) из родительского компонента, и <iframe> может изменить эти значения.

Я знаю, что мы можем использовать window.postMessage для связи с <iframe> с другим источником, и я могу указать текущий источник, чтобы ограничить обмен только одним источником. Есть ли способ, кроме window.postMessage, общаться с <iframe> того же происхождения?

Answer 1

Session Storage - это идеальный способ связи между фреймами, принадлежащими одному домену. Официальные документы

Вы также можете привязать к событиям изменения хранилища.

В чистом JS вы можете просто сделать это ( JSFiddle здесь )

/* [Parent window] */
const writeToSessionEverySecond = function() {
    var value = 10;
    setInterval(function(){ 
      value++;
      sessionStorage.setItem('my_key', value);
    }, 1000);
}

writeToSessionEverySecond();


/* [Child window] Listen storage change events */
window.addEventListener('storage', function() {
    const valueFromSession = sessionStorage.getItem('my_key');
    console.log('VALUE ' + valueFromSession)
}, false);

ПРИМЕЧАНИЕ: Чтобы действительно запустить событие, содержимое сеанса должно измениться. Если вы установите то же значение, событие не сработает.

Если вы используете RxJ, вы можете использовать наблюдаемые для создания простой, но мощной логики в потоках событий хранения, т.е.

Rx.Observable.fromEvent(window, 'storage').
              .<rx operators to do your magic>()
              .subscribe(..);

-Andrea