在 iframe 内关闭带有 iframe 的模态框答案

【问题标题】：Closing a modal box with an iframe inside the iframe在 iframe 内关闭带有 iframe 的模态框
【发布时间】：2012-06-09 16:56:11
【问题描述】：

我正在尝试使用称为的 JavaScript 代码以编程方式关闭 Facebox 模式在 iframe 内。这似乎不适用于 JavaScript DOM。

https://github.com/defunkt/facebox

更一般地说，我将如何关闭嵌入 iframe 的通用模式，并使用代码将其关闭在 iframe 内。（对不起舌头（或眼睛）扭曲）

这是我的例子：

我有一个类似这样的表情包：

jQuery.facebox("stuff goes here <iframe src="example.php"...."  more stuff"); //opens the modal(works great)

然后在 iframe 内部，我想调用jQuery(document).trigger('close.facebox');。如果我在父页面或模态页面上调用它，它似乎只起作用，但在实际的 iframe 中不起作用。有没有办法通过在 iframe example.php 中调用它来关闭它？

编辑：我在问如何使用 jQuery 从 iframe 内部访问父框架以过度简化问题。

【问题讨论】：

标签： javascript modal-dialog

【解决方案1】：

您不能在弹出页面中修改“属于”父页面的元素。据我所知，您将不得不向父母发出隐藏代码。你总是可以让你的代码在对话框中做这样的事情：

parent.$("#dialog").hide();

我想这就是你要问的......

【讨论】：

我在问如何使用 JQuery 从 iframe 内部访问父框架以过度简化问题
我的例子会这样做。然后你可以从那里操作你需要的任何东西。

【解决方案2】：

这对我有用：

我的页面在 DIV 中有一个 IFRAME，这个 DIV 是 facebox 应该淡入和淡出的内容。 IFRAME 的 SRC 是一个页面，上面有一个如下所示的链接：

<a href="#" onclick="parent.close_QM_facebox()">close this facebox modal</a>

在包含 DIV 和 IFRAME 的页面的 HEAD（不是调用到 IFRAME 中的页面）中，我有 JavaScript 函数“close_QM_facebox()”，如下所示：

function close_QM_facebox() { jQuery(document).trigger('close.facebox'); }

就是这样。尚未测试跨浏览器或生产。我花了几个小时在谷歌上搜索这个问题并尝试了从改变单引号到双引号、document-dot-this 和 parent-dot-that、window.frames['whatever'] 和这个单行函数的所有内容。如果您尝试从调用到 IFRAME 的页面触发函数，则必须确保使用 parent.close_QM_facebox()。希望这会有所帮助。

顺便说一句，请参阅 facebox.js 1.2 版的第 47 和 49 行 - 这个解决方案就在 .js 文件本身的注释掉的“使用”部分中。我将第 49 行复制并粘贴到我的函数中，除了取消注释之外没有改变任何东西:)

【讨论】：

【解决方案3】：

嵌入的 iframe 指向不同域上的 URL 对吗？在这种情况下不可以，出于安全原因，您不能从 iframe 中对父文档进行任何调用。

【讨论】：

不，它在同一个域上:)
嗯。那我真的不确定！对不起。

【解决方案4】：

我想，你可以使用FancyBox。允许关闭 iframe 中的模态对话框的公共方法，还有一个选项可以使花哨的框像模态窗口一样： - 在 iframe 中使用 - parent.$.fancybox.close();

如果你在同一个域上使用脚本没问题，如果你想使用跨域，只需提供每个页面（.php/html 等），使用 POST/GET 安全地调用彼此交换参数/查询。但是要关闭花式框模式，您必须使用相同的域页面运行此方法。

希望它对你有用，斯坦。

【讨论】：