父窗口与iframe之间的通信

Mr.Liu大约 2 分钟

父窗口与iframe之间的通信

效果如下：

在 JS 中要实现父窗口与 iframe 之间的通信，我们基本都会选择 message 事件与 postMessage 方法相结合的形式。只不过现在越来越少会使用 iframe 了吧😷，毕竟还有更优的方案可以选择-微前端。

咱们新建 index.html 与 iframe.html 两个页面，具体过程如下：

<!DOCTYPE html>
<html>
<head>
  <title>Window</title>
  <style>
    #box {
      height: 200px;
      border: 1px solid #cbd5e0;
      padding: 10px;
      box-sizing: border-box;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <button id="button">发现消息给iframe</button>
  <div id="box"></div>
  <br />
  <iframe id="iframe" src="./iframe.html" style="border: none; height: 300px; width: 100%"></iframe>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const box = document.getElementById('box');
      const iframe = document.getElementById('iframe');
      // 监听message事件
      window.addEventListener('message', e => {
        const data = e.data;
        const time = new Date(data.time).toLocaleTimeString();
        box.innerHTML = `收到消息： "${data.message}" ，时间为 "${time}"<br>` + box.innerHTML;
      });
      document.getElementById('button').addEventListener('click', () => {
        const message = {
          message: '我从window那边发过来的',
          time: Date.now(),
        };
        // 将信息发送给iframe
        iframe.contentWindow.postMessage(message, '*');
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>iframe</title>
  <style>
    #box {
      height: 200px;
      border: 1px solid #cbd5e0;
      padding: 10px;
      box-sizing: border-box;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <button id="button">发现消息给window</button>
  <div id="box"></div>
  (这里是一个iframe)
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const box = document.getElementById('box');
      window.addEventListener('message', e => {
        const data = e.data;
        const time = new Date(data.time).toLocaleTimeString();
        box.innerHTML = `收到消息： "${data.message}" ，时间为 "${time}"<br>` + box.innerHTML;
      });
      document.getElementById('button').addEventListener('click', () => {
        const message = {
          message: '我从iframe那边发过来的',
          time: Date.now(),
        };
        window.parent.postMessage(message, '*');
      });
    });
  </script>
</body>
</html>

很简单，但也有一些注意事项：

总是在发送和接收消息时验证消息来源，以确保安全。
如果父窗口和 iframe 在同一域下，可以省略 event.origin 的检查。
postMessage 方法的第二个参数（目标源）可以是具体的源（如一个域名），也可以是'*'，表示任何源都可以，但这会带来安全隐患。