在前端开发中，经常需要在 iframe 和父窗口间进行通信。其中一种场景是从父窗口向子窗口（即 iframe）传递值。本文将介绍如何在 JavaScript 中实现这样的通信，并提供示例代码。
通过 postMessage() 方法实现跨域通信
要实现从父窗口向子窗口传递值的功能，需要使用 window.postMessage() 方法。postMessage() 方法允许你向其他窗口发送消息，而无论这些窗口是否与当前窗口属于同一域。
以下是要传递到 iframe 的数据：
const data = {
name: "John",
age: 28,
};现在我们来看看如何使用 postMessage() 方法将数据传递给 iframe。
在父窗口的 JavaScript 代码中，可以使用以下代码来访问 iframe 元素：
const myIframe = document.getElementById("my-iframe");然后，可以使用以下代码将数据传递给 iframe：
myIframe.contentWindow.postMessage(data, "*");
第一个参数是要传递的数据，第二个参数是接收消息的窗口的 URL。使用 "*" 表示任何 URL 都可以接收消息。
在 iframe 的 JavaScript 代码中，可以使用以下代码来接收消息：
window.addEventListener("message", (event) => {
// 检查消息是否来自父窗口
if (event.source !== parent) return;
// 处理来自父窗口的数据
const data = event.data;
});addEventListener() 方法允许你在 window 对象接收到消息时执行回调函数。在回调函数中，可以检查消息是否来自父窗口，并从 data 属性中获取传递的数据。
示例代码
以下是完整的示例代码，演示了如何将数据传递到 iframe 中：
-- -------------------- ---- -------
--------- -----
------
------
----------- ----- -- ------ ---- - --------------
-------
------
------- -------------- --------------------------
--------
----- ---- - -
----- -------
---- ---
--
----- -------- - -------------------------------------
---------------------------------------- -----
---------
-------
-------在 child.html 文件中，添加以下 JavaScript 代码以接收数据：
window.addEventListener("message", (event) => {
if (event.source !== parent) return;
const data = event.data;
console.log(data);
});在控制台中运行上述示例代码后，应该能够看到来自父窗口的数据被打印出来。
结论
通过使用 postMessage() 方法，我们可以在前端开发中实现跨窗口通信。这对于需要在 iframe 和父窗口间进行通信的场景非常有用。在实现这一功能时，需要注意安全性和跨域通信的限制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26775