jQuery如何从对话框中的iframe关闭对话框？答案

【问题标题】：jQuery how to close dialog from iframe within dialog?jQuery如何从对话框中的iframe关闭对话框？
【发布时间】：2011-04-04 07:22:58
【问题描述】：

如果我像这样打开一个对话框：

$('<iframe id="externalSite" class="externalSite" src="http://www.example.com" />').dialog({
        autoOpen: true,
        width: 800,
        height: 500,
        modal: true,
        resizable: true
    })

如何通过 iframe 关闭对话框？

【问题讨论】：

我想说里面的代码没有权限，尤其是。如果是外部网站。
@Piskor，同一个站点。我可以在父窗口上调用一个函数，例如window.parent.function()，但不知道如何定位这个对话框来关闭它。
这里有类似的问题：http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe 它可能会帮助或为您指明正确的方向。
值得注意的是，您可能需要在包含的 iFrame 上设置 document.domain 属性。这使您可以在同一顶级域的不同子域之间共享框架上下文。
我刚遇到这个问题，摇了摇头，因为两天前我的 CLOSE 按钮可以很好地关闭父对话框。 “这是怎么回事？”我想。 “在同一个网站上！”啊，但不是：如果我从“mydomain.com”打开我的应用程序，它会调用 iframe src="www.mydomain.com"。注意“www”。这不是同一个域！

标签： javascript jquery jquery-ui iframe dialog

【解决方案1】：

你试过了吗？：

$(window.parent).dialog('close');

我从未使用过 jQuery UI 对话框，所以我不确定它是否真的有效。在我看来，您需要维护对您创建的对话框的引用，以便您可以使用它来关闭对话框。

注意，您还可以通过以下方式在父级 DOM 中查找元素：

$('#someParentDOMElement' , window.parent);

当然，所有这些都是假设您在iframe 中加载的站点与父文档位于同一域中。如果没有，那么iframe 中的文档将根本无法访问父 DOM。

【讨论】：

我试过$(window.parent).dialog('close'); 它没有用，但我采纳了你的参考想法并在我的回答中使用了它。谢谢。
$(window.parent).dialog('close') 不起作用，因为window.parent 指的是父 JavaScript Window 对象，而不是 jQuery UI 对话框元素。

【解决方案2】：

好的，所以我将 iframe 放在页面上，并将显示设置为无。我是这样打开的：

$('#externalSite').dialog({ ... });

在主父窗口我有这样的功能：

function closeIframe()
{
    $('#externalSite').dialog('close');
    return false;
}

从我调用的 iframe 中：

window.parent.closeIframe();

【讨论】：

是的，但是当您打开“mywebsite.com/myapp”并且 iframe 源使用“www”（反之亦然，交换“www”）时，就会出现问题。我强烈怀疑 OP 正在做类似的事情。
我是 OP，这是 3 年前的 :)
前几天我用谷歌搜索了一个问题。我来到一个 StackOverflow 页面，有人说，“我使用了 Gregory Lewis 的代码，它有效。”我打算对另一个名叫格雷戈里·刘易斯的人发表有趣的评论，直到我向下滚动页面，看到他在谈论我给出的答案。我遇到了两次问题，甚至不记得我去年解决了我昨天正在寻找答案的问题。
为什么这个答案不在顶部？顺便说一句，这正是我所需要的。

【解决方案3】：

只需调用以下代码对我有用：

window.parent.$('#externalSite').dialog('close');

【讨论】：

实际上，在我的情况下，我使用的是 Wijmo Dialog（基于 jQuery UI），所以我有一个加载外部内容 (HTML) 的对话框/弹出窗口，并且需要一种方法来通过按关闭对话框/弹出窗口该外部 HTML 中的“取消”按钮.. 所以以下内容对我来说效果很好： window.parent.$('#eventdialog').wijdialog('close');所以#eventdialog 当然是我的选择器。在 wijmo 对话框的关闭事件中，您也可以添加任何清理代码。希望这会有所帮助