一文搞懂window.postMessage和window.parent.postMessage

前言

在现代网页开发中,跨域通信是一个至关重要的方面,它允许来自不同域的不同网页或框架安全地相互交互。实现这一目标的一种流行机制是使用JavaScript中的postMessage API。在本文中,我们将深入探讨 window.postMessagewindow.parent.postMessage 的概念,探索它们如何在网页应用程序中的不同上下文之间实现通信。

window.postMessage:窗口.postMessage

window.postMessage 方法是一种安全的方式,可以实现不同源(域)的两个窗口(或标签页)之间的通信。它允许一个窗口的脚本安全地向另一个窗口传递消息,即使它们来自不同的域。这对于在您的Web应用程序中嵌入第三方小部件、iframe或跨源通信特别有用。

js 复制代码
otherWindow.postMessage(message, targetOrigin, [transfer]);

参数

  • 要发送到另一个窗口的数据。它可以是一个字符串、一个对象,或者任何其他可JSON序列化的数据。
  • targetOrigin :指定目标窗口的来源。为了增强安全性,应将此参数设置为目标窗口的特定来源(例如,"example.com")。您也可以使用"*"来允许与任何来源的通信,但这样做安全性较低。
  • (可选):一个Transferable对象数组(例如ArrayBuffer、MessagePort),在发送到另一个窗口时应该转移而不是克隆。当处理大数据时,该参数对提高性能很有用。
js 复制代码
<!--origin1.html-->

<!DOCTYPE html>
<html>
<head>
  <title>Origin 1</title>
</head>
<body>
  <button onclick="sendMessage()">Send Message</button>

  <script>
    function sendMessage() {
      const otherWindow = window.open('https://origin2.com/origin2.html');
      const message = 'Hello from Origin 1!';
      const targetOrigin = 'https://origin2.com';
      otherWindow.postMessage(message, targetOrigin);
    }
  </script>
</body>
</html>
js 复制代码
<!--origin2.html-->

<!DOCTYPE html>
<html>
<head>
  <title>Origin 2</title>
</head>
<body>
  <script>
    window.addEventListener('message', receiveMessage, false);

    function receiveMessage(event) {
      if (event.origin === 'https://origin1.com') {
        alert('Received message: ' + event.data);
      }
    }
  </script>
</body>
</html>

在这个例子中,当在origin1.html中点击"发送消息"按钮时,它会打开一个新窗口,显示origin2.html并发送消息"来自Origin 1的问候!"。origin2.html窗口接收消息并显示一个警报,其中包含接收到的数据,但仅在安全目的下,原始来源匹配"origin1.com"时。

window.parent.postMessage:窗口.父级.发送消息

如果你正在寻找一个关于如何在网页应用程序中从一个iframe发送数据到其父窗口的答案,那么你来对地方了!

window.parent.postMessage 方法类似于 window.postMessage 方法,但它专门用于在嵌入的 iframe 中与其父窗口进行通信。

ini 复制代码
parent.postMessage(message, targetOrigin, [transfer]);

参数

  • 要发送到父窗口的数据。
  • targetOrigin :指定父窗口的来源。
  • transfer (可选):与 window.postMessage 一样,此参数允许在发送时传输数据而不是克隆。

考虑这样一个情景,一个 parent.html 文件嵌入了来自不同源的 iframe(child.html):

js 复制代码
<!--parent.html-->

<!DOCTYPE html>
<html>
<head>
  <title>Parent Window</title>
</head>
<body>
  <iframe src="https://origin2.com/child.html"></iframe>
</body>
</html>
js 复制代码
<!--child.html-->

<!DOCTYPE html>
<html>
<head>
  <title>Child Window</title>
</head>
<body>
  <button onclick="sendMessage()">Send Message to Parent</button>

  <script>
    function sendMessage() {
      const message = 'Hello from Child Window!';
      parent.postMessage(message, 'https://origin1.com');
    }
  </script>
</body>
</html>

在这个例子中,当在child.html中点击"发送消息给父窗口"按钮时,它会向其父窗口(origin1.html)发送消息"来自子窗口的问候!"。parent.html窗口接收到消息后可以相应地处理它。

我可以使用 window.parent.postMessage 发送复杂数据,比如对象或数组吗?

是的,您可以使用 window.parent.postMessage 发送复杂数据,比如对象或数组。该方法支持 JSON 可序列化的数据,因此您可以将 JavaScript 对象和数组作为消息内容传递。只需确保数据可以在 iframe 和父窗口之间安全地序列化和反序列化。

相关推荐
uhakadotcom14 分钟前
快速开始使用 n8n
后端·面试·github
uhakadotcom15 分钟前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom19 分钟前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom21 分钟前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom30 分钟前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom40 分钟前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI2 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua2 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI2 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室2 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript