在 iframe 中使用 postMessage 实现无缝跨域通信

2023-10-18 07:21:03

概述
在现代网络应用中，iframe的使用非常普遍。它允许在网页中嵌入来自不同域名的内容。然而，由于浏览器的同源策略限制，这些不同域名的内容无法直接进行通信。为了解决这个问题，HTML5引入了一种名为postMessage()的方法，允许iframe与父窗口或其他iframe进行跨域通信。

postMessage()方法简介

postMessage()方法是HTML5引入的用于跨域通信的API。它允许一个窗口向另一个窗口发送数据，而无需考虑它们是否来自不同的域。postMessage()方法有三个参数：

message：要发送的数据。
targetOrigin：要发送数据的目标窗口的源。
transfer：可选参数，高级用法，这里不作讨论。

如何在Iframe中使用postMessage()

发送数据

为了在iframe中使用postMessage()发送数据，需要执行以下步骤：

确保iframe和父窗口都支持postMessage()方法。
在iframe中，使用postMessage()方法将数据发送给父窗口。
在父窗口中，使用addEventListener()方法监听iframe发送的数据。

接收数据

为了在iframe中接收数据，需要执行以下步骤：

确保iframe和父窗口都支持postMessage()方法。
在父窗口中，使用addEventListener()方法监听iframe发送的数据。
在iframe中，使用postMessage()方法将数据发送给父窗口。

示例

以下是一个使用postMessage()在iframe中实现跨域通信的示例：

HTML

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Parent Window</h1>
  <iframe src="child.html"></iframe>

  <script>
    const iframe = document.querySelector('iframe');

    iframe.addEventListener('message', (event) => {
      console.log('Received message from child:', event.data);
    });
  </script>
</body>
</html>

child.html

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Child Window</h1>

  <script>
    const parentOrigin = 'http://localhost:8080';

    window.addEventListener('message', (event) => {
      if (event.origin !== parentOrigin) {
        return;
      }

      console.log('Received message from parent:', event.data);
    });

    function sendMessageToParent() {
      const message = 'Hello from child!';

      parent.postMessage(message, parentOrigin);
    }
  </script>

  <button onclick="sendMessageToParent()">Send Message to Parent</button>
</body>
</html>