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