在前端开发中，我们经常会使用 iframe 元素来嵌入其他网页或部件。当 iframe 中的内容需要与父页面进行通信时，一种常见的需求是在 iframe 中调用父窗口的 JavaScript 函数。本文将介绍如何实现这个功能。
方法一：使用 window.parent
如果 iframe 和父页面在同一个域名下，我们可以使用 window.parent 对象来访问父页面的 JavaScript 函数。下面是一个例子：
-- -------------------- ---- -------
---- --- ---
--------- -----
------
------
------------- ------------
--------
-------- ----------- -
------------------- - - ---- - -----
-
---------
-------
------
------- --------------------------
-------
--------- -------------------- ---- -------
---- --- ---
--------- -----
------
------
------------ ------------
--------
----------------------------
---------
-------
------
---
-------
-------在子页面中，我们可以使用 window.parent.greet 来调用 greet 函数。这个方法非常简单易懂，但要注意安全性问题。如果不同域名的页面之间使用此方法通信，就可能存在安全风险。
方法二：使用 postMessage
为了解决跨域通信的问题，我们可以使用 postMessage API。 postMessage 允许跨窗口通信，包括不同域名的页面间的通信。
在父页面中，我们可以监听 message 事件，并通过 event.source 获取消息来源（也就是子页面），然后根据消息内容来执行相应的操作：
-- -------------------- ---- -------
---- --- ---
--------- -----
------
------
------------- ------------
--------
---------------------------------- --------------- -
-- ------------- --- ------------------------ ------- -- ------
-- ---------------- --- -------- -
------------------- - - --------------- - -----
-
---
---------
-------
------
------- --------------------------
-------
-------在子页面中，我们可以使用 window.parent.postMessage 来发送消息到父页面：
-- -------------------- ---- -------
---- --- ---
--------- -----
------
------
------------ ------------
--------
---------------------------
----- --------
----- ------
-- ------------------------- -- ---------
---------
-------
------
---
-------
-------这个方法虽然比较复杂，但是更加安全可靠，并且可以支持跨域通信。
总结：根据实际需求选择合适的方式
在实际开发中，我们需要根据具体需求来选择适合的方法。如果页面在同一个域名下，可以使用 window.parent 方法来调用父页面的 JavaScript 函数；如果页面存在跨域通信需求，我们则需要使用 postMessage API 来实现。
示例代码：https://github.com/chatgpt/articles/blob/main/iframe-calling-parent-javascript
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31114