Bootstrap 是一种流行的前端框架，提供了许多插件和组件，包括模态框（Modal）。在某些情况下，我们可能需要在 iframe 中使用 Bootstrap 模态框，但是默认情况下无法从 iframe 中关闭 Bootstrap 模态框。本文将介绍如何解决这个问题，并提供详细的示例代码。
问题描述
当我们在 iframe 中加载包含 Bootstrap 模态框的网页时，如果从 iframe 中尝试关闭模态框，会发现模态框并不会关闭。这是因为 Bootstrap 模态框的 JavaScript 代码是在父级文档中运行的，而不是在 iframe 文档中运行的。因此，从 iframe 中尝试调用模态框的 JavaScript 函数将无效。
解决方案
有两种方法可以在 iframe 中关闭 Bootstrap 模态框：使用 postMessage 或者改变 Bootstrap 模态框的实现方式。
使用 postMessage
postMessage 是 HTML5 中引入的跨文档通信机制，可以允许来自不同域的窗口之间进行安全通信。我们可以将一条消息从 iframe 发送到父级文档中，父级文档接收到消息后再执行相应的操作，例如关闭 Bootstrap 模态框。
下面是如何在 iframe 中发送消息：
// 在 iframe 中发送消息
parent.postMessage('closeModal', '*');在父级文档中，我们需要添加一个事件监听器，以便接收来自 iframe 的消息，并执行相应的操作：
-- -------------------- ---- -------
-- ----------
---------------------------------- --------------- -
-- ------------- --- --------------------- -
-------
-
-- ----------- --- ------------- -
----------------------------
-
---在这个示例代码中，我们定义了一个名为 closeModal 的消息类型，当父级文档接收到来自 iframe 的 closeModal 消息时，它会隐藏 id 为 myModal 的 Bootstrap 模态框。
改变 Bootstrap 模态框的实现方式
如果您不想使用 postMessage，还有一种更简单的方法：改变 Bootstrap 模态框的实现方式。默认情况下，Bootstrap 模态框是使用 JavaScript 实现的，但是 Bootstrap 也提供了一种纯 CSS 的实现方式，可以通过设置 data-backdrop 属性来启用。这种方式下，模态框将不再阻止用户与其他元素交互，从而可以更容易地从 iframe 中关闭模态框。
下面是如何使用纯 CSS 模态框：
-- -------------------- ---- -------
---- --- --- --- ---
---- ------------- ------------- ------------- -----------------------
---- -------------------- ----------------
---- ----------------------
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
-------- ---- ---- ---- ---------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------
------
------
------在这个示例代码中，我们通过设置 data-backdrop 属性为 static，来启用纯 CSS 模态框。此时，模态框将不再阻止用户与其他元素交互，从而可以更容易地从 iframe 中关闭模态框。
总结
本文介绍了如何在 iframe 中关闭 Bootstrap 模态框。我们可以使用 postMessage 在 iframe 和父级文档之间进行
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30510