Question

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

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

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

Answer 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);

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

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

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

-Andrea

使用Angular 4/5

1 个答案: