【JS】postMessage实现iframe跨域通信

田本初

于 2024-09-18 16:17:32 发布

阅读量1.3k

点赞数 29

分类专栏：面试题 JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/owo_ovo/article/details/141230360

版权

JavaScript 同时被 2 个专栏收录

142 篇文章 4 订阅

订阅专栏

面试题

104 篇文章 1 订阅

订阅专栏

前言

postMessage是HTML5引入的API，允许来自不同源的脚本采用异步方式进行通信，实现跨文本文档、多窗口、跨域消息传递。

使用

postMessage(message, targetOrigin)：

message: 发送的数据，可以是字符串、对象等。
targetOrigin: 目标窗口的域名。为安全起见，尽量避免使用 ‘*’，而应该明确指定目标的域名。

当 iframe 作为子页面时，它可以使用 window.parent.postMessage() 向其父页面发送消息，无论父页面与 iframe 是否属于同一域。

当父页面想与其嵌入的 iframe 通信时，可以通过获取 iframe 元素的 contentWindow 来调用 postMessage()，将消息发送给子页面。

父

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parent</title>
</head>

<body>
  <h1>Parent</h1>
  <button id="sendMessage">给iframe发消息</button>
  <iframe id="childFrame" src="son.html" width="600" height="400"></iframe>

  <script>
    const iframe = document.getElementById('childFrame');
    const sendMessageButton = document.getElementById('sendMessage');

    // 发送消息到 iframe
    sendMessageButton.addEventListener('click', () => {
      const message = { text: 'Hello World!' };
      iframe.contentWindow.postMessage(message, '*'); // 使用 '*' 作为目标域
    });

    // 监听来自 iframe 的消息
    window.addEventListener('message', (event) => {
      // 安全起见，检查 event.origin 消息来源
      console.log('接收iframe页的消息:', event.data);
    });
  </script>
</body>

</html>

iframe

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Child</title>
</head>

<body>
  <h1>iframe</h1>
  <button id="sendMessage">给父元素发消息</button>

  <script>
    // 监听来自父页面的消息
    window.addEventListener('message', (event) => {
      console.log('parent页的消息:', event.data);
    });

    // 发送消息到父页面
    const sendMessageButton = document.getElementById('sendMessage');
    sendMessageButton.addEventListener('click', () => {
      const message = { text: 'iframe message!' };
      window.parent.postMessage(message, '*'); // 使用 '*' 作为目标域
    });
  </script>
</body>

</html>