当我们要在一个网页中嵌入另一个网页时，通常会使用<iframe>标签。但是，在嵌入的网页中如何控制其父窗口呢？这篇文章将介绍如何通过JavaScript实现从iframe中控制其父窗口的操作，并提供示例代码。
获取父窗口对象
为了控制父窗口，我们首先需要获取到它的window对象。可以通过以下代码从当前的iframe中获取它：
const parentWindow = window.parent;
在上面的代码中，window.parent表示当前iframe的父窗口对象。通过将其赋值给变量parentWindow，我们可以在后续的代码中方便地引用它。
向父窗口发送消息
一旦我们获取到了父窗口对象，就可以向它发送消息。可以使用postMessage()方法来实现这个功能。该方法接收两个参数：要发送的消息以及接收消息的窗口的源（来源）。
下面的示例演示了如何向父窗口发送一个简单的字符串消息：
parentWindow.postMessage('Hello from iframe!', '*');在上面的代码中，*表示接收消息的窗口可以是任何窗口。如果您想指定接收消息的窗口，可以将该参数替换为目标窗口的URL。
监听来自父窗口的消息
与向父窗口发送消息类似，我们还需要设置监听器以接收来自父窗口的消息。可以使用addEventListener()方法来实现这个功能。该方法接收两个参数：要监听的事件类型（此处为message）和事件处理程序函数。
下面的示例演示了如何在iframe中设置一个监听器以接收来自父窗口的消息：
window.addEventListener('message', event => {
console.log(`Received message: ${event.data}`);
});在上面的代码中，event.data表示接收到的消息内容。此处我们只是简单地将其打印到控制台中，但您可以根据具体需求对其进行任何操作。
示例代码
下面是一个完整的示例，展示了如何从iframe中向父窗口发送消息并接收来自父窗口的响应。
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-------
------
---------- ---------
------- -- --- ------ ------------
--------
----- ------------ - --------------
-- --------
------------------------------- ---- --------- -----
-- ----------
---------------------------------- ----- -- -
--------------------- -------- ----------------
-- --------
---------------------------- ---- --------- -----
---
---------
-------
-------在上面的示例中，当iframe加载时，它会向父窗口发送一个简单的消息。然后，它设置了一个监听器以接收来自父窗口的消息，并将回复消息发送回父窗口。
结论
通过使用postMessage()方法和addEventListener()方法，我们可以在iframe中控制其父窗口。这种技术非常有用，特别是在需要与嵌入的网页进行通信的情况下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8737