在前端开发中，我们常常需要使用 iframe 嵌入其他页面或应用程序。但是，当嵌套了多个 iframe 后，如何在内部 iframe 中关闭最外层的 iframe 却是一个棘手的问题。
下面，我们将介绍一种简单的方法来解决这个问题。
1. 获取父级 iframe
首先，我们需要获取当前 iframe 的父级 iframe。在 JavaScript 中，可以使用 window.parent 来获取。代码示例如下：
----- ------------ - --------------
2. 获取顶层 iframe
获取到父级 iframe 后，我们还需要逐层向上获取，直到获取到最顶层的 iframe。在 JavaScript 中，可以使用 window.top 来获取。代码示例如下：
--- --------- - ------- ----- ---------- --- ----------------- - --------- - ----------------- -
3. 关闭最外层的 iframe
有了父级 iframe 和顶层 iframe，我们就可以通过向顶层 iframe 发送消息并在父级 iframe 中接收消息的方式来关闭最外层的 iframe。
在子级 iframe 中发送消息：
----- ------- - - ----- -------- -- --------------------------------- -----
在父级 iframe 中接收消息并关闭自身：
---------------------------------- ----- -- -
-- ---------------- --- -------- -
------------------------------------- -----
------------- --- ------ -- ---------------
-
---总结
通过使用 window.parent 和 window.top 来获取对应的 iframe，我们可以轻松地在子级 iframe 中关闭最外层的 iframe。这种方法既简单又实用，可以为我们在实际开发中提供很好的帮助。
完整代码：
--------- -----
----- ----------
------
----- ----------------
--------------------
-------
------
--------- ---------
------- ----------------------------- ------ ---------------
--------
-------- ------------- -
----- ------- - -
----- --------
--
---------------------------------- -----
-
---------------------------------- ----- -- -
-- ---------------- --- -------- -
--- --------- - -------
----- ---------- --- ----------------- -
--------- - -----------------
-
---------------------------------------- -----
------------- --- ------ -- ---------------
-
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27661