Question

在我的应用程序（角度6）中，要求与同一来源的iframe通信，除了使用全局{{1}之外，还有没有更好的方法与相同来源的iframe通信}对象。如果是某种包装器或通过RxJS进行。

P.S。：我还检查了存储示例，我想知道您的意见是否可以更好的方式实现相同效果而不污染窗口对象。

谢谢

Answer 1

您可以使用postMessage在两个<iframe>之间进行通信。

每次收到消息都会触发 message 事件。因此，如果您愿意的话，可以用fromEvent构造一个可观察对象。

这是一个简单的例子：

我有ping.html，其中包括pong.html作为iframe。 （两者均托管在http://localhost:8000上）

ping.html向pong.html发出第一条消息
pong.html收到消息时，显示“''并发送回响应
ping.html收到消息时，显示“''并发送回响应
依此类推...

这里是ping.html：

<html>
  <head>
    <meta charset="utf8">
  </head>
  <body>
    <div id="msg_from_pong"></div>
    <iframe id="pong" src="pong.html" style="width:100%;border-style:none"></iframe>

    <script>

      // Wait until the pong iframe is loaded
      document.querySelector('#pong').addEventListener('load', ({target}) => {
        target.contentWindow.postMessage('initial ping', 'http://localhost:8000');
      });

      // Listen to message from the pong iframe
      window.addEventListener('message', ({data, source, origin}) => {
        if (data !== 'pong') {
          return;
        }

        document.querySelector('#msg_from_pong')
          .appendChild(document.createTextNode(''));

        setTimeout(() => {
          source.postMessage('ping', origin);
        }, 300);
      });

    </script>
  </body>
</html>

这是pong.html：

<html>
  <body>
    <div id="msg_from_ping"></div>
    <script>
      window.addEventListener('message', ({data, source, origin}) => {

        document.querySelector('#msg_from_ping')
          .appendChild(document.createTextNode(''));

        setTimeout(() => {
          source.postMessage('pong', origin);
        }, 300);
      });
    </script>
  </body>
</html>

这就是全部内容：

与相同来源的iframe通信

1 个答案: