使用 Angular 4/5 与 iframe（相同域）通信答案

【问题标题】：Communicate with iframe (same domain) using Angular 4/5使用 Angular 4/5 与 iframe（相同域）通信
【发布时间】：2018-04-30 03:48:06
【问题描述】：

我正在开发一个应用程序，我需要在 <iframe> 中显示一些组件，因此 <iframe> 具有相同的来源。

我需要从父组件向<iframe> 传递一些值（例如登录的用户信息），<iframe> 可以修改这些值。

我知道我们可以使用window.postMessage 与具有不同来源的<iframe> 通信，我可以指定当前来源以将交换限制为仅一个来源。除了window.postMessage，还有其他方法可以与同源的<iframe> 通信吗？

【问题讨论】：

标签： javascript angular iframe

【解决方案1】：

会话存储是在属于同一域的 iframe 之间进行通信的完美方式。 Official docs

您还可以绑定到存储更改事件。

在纯 JS 中你可以这样做 (JSFiddle here)

/* [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);

注意：为了真正触发一个事件，会话的内容必须改变。如果您设置相同的值，则事件不会触发。

如果您使用 RxJs，您可以使用 observables 在存储事件流上构建简单而强大的逻辑，即，

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

-安德烈亚

【讨论】：

是的，我知道这是一个选项，但我想知道是否有一种方法可以与父框架进行通信，而无需监听 message 事件（使用整个 window.postMessage设置）
SessionStorage 看起来是个不错的选择。与iframe 有没有或没有角度的沟通方式？
由于我的应用程序是一个大型的 Angular 应用程序，它分为多个模块，因此我可以将服务注入到我在 iframe 中显示的组件中（使用子路由进行显示）。我接受了这个答案，即使我没有使用它，因为它也提供了一种实现我想要的方式。