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