在前端开发中，有时候需要在一个页面中使用 iframe 元素来嵌入另外一个页面。但是，在 iframe 中如何调用包含它的父级页面中的 JavaScript 函数呢？这篇文章将为您提供详细的解决方法和示例代码。
1. 使用 window.parent 对象
在 iframe 内部可以使用 window.parent 对象来访问包含它的父级窗口。通过该对象，可以调用父级窗口中的任何 JavaScript 函数。
-- -------------------- ---- -------
---- ---- ---
--------- -----
------
------
-------------------
-------
------
-------------
------- --------------------------
--------
-------- ---------------- -
-----------------------
-
---------
-------
-------
---- ---- ---------- ---
--------- -----
------
------
-------------------
-------
------
-------------
------- --------------------------------------------------------
-------
-------在上面的示例中，我们在父级页面中定义了一个名为 parentFunction 的函数，并且在 iframe 中的子级页面中添加了一个按钮。当用户点击按钮时，会调用 window.parent.parentFunction() 方法，从而在父级页面中执行 parentFunction 函数。
2. 使用 postMessage API
另一种在 iframe 中调用父级 JavaScript 函数的方法是使用 postMessage API。该方法是 HTML5 中引入的一种跨窗口通信机制，它允许在不同窗口之间安全传递消息。
下面是一个示例：
-- -------------------- ---- -------
---- ---- ---
--------- -----
------
------
-------------------
-------
------
-------------
------- --------------------------
--------
-------- ---------------- -
-----------------------
-
---------------------------------- --------------- -------
-------- --------------------- -
-- ------------- --- ------------------------ -------
-- ----------- --- --------------------- -
-----------------
-
-
---------
-------
-------
---- ---- ---------- ---
--------- -----
------
------
-------------------
-------
------
-------------
------- -------------------------------------------------------- -----------------------------------------
-------
-------在这个示例中，我们在父级页面中添加了一个事件监听器来接收从子级页面发送过来的消息。当接收到消息时，如果消息来源是指定的 URL，并且消息内容为 callParentFunction，就会调用 parentFunction 函数。
在子级页面中，我们添加了一个按钮，并在点击按钮时使用 postMessage API 发送消息到父级页面。注意，第二个参数是目标窗口的 origin，用于指定发往哪个窗口。
结论
在 iframe 中调用包含它的父级页面中的 JavaScript 函数有两种方式：使用 window.parent 对象或使用 postMessage API。前者更为简单直接，适用于同域的页面；后者则更加安全、灵活，适用于跨域的情况。根据实际需求选择合适的方式进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29360