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

Question

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

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

如何在iframe内部关闭对话框？

- JD Isaacks

---

我会说里面的代码没有权限，特别是如果它是外部网站。 - Piskvor left the building

@Piskor，这是同一个站点。我可以在父级窗口上调用函数，例如window.parent.function()，但不确定如何将其定位到此对话框以关闭它。 - JD Isaacks

类似的问题在这里：https://dev59.com/7HRC5IYBdhLWcg3wP-dh 可能会有所帮助或指引你正确的方向。 - Randall Kwiatkowski

值得注意的是，您可能需要在包含的 iFrame 上设置 document.domain 属性。这样可以让您在同一顶级域名下的不同子域之间共享框架上下文。 - Patrick M

我刚遇到了这个问题，摇了摇头，因为两天前我的关闭按钮还能正常关闭父对话框。我想：“怎么回事？它在同一个网站上啊！”但是，不是的：如果我从“mydomain.com”打开我的应用程序，它会调用iframe src="www.mydomain.com"。注意“www”。这不是同一个域！ - TARKUS

Answer 1

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

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

在主父窗口上，我有一个像这样的函数：

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

从iframe内部调用：

window.parent.closeIframe();

- JD Isaacks

---

是的，但问题会在打开“http://mywebsite.com/myapp/”且iframe源使用“www”（或反之亦然，交换“www”）时发生。我强烈怀疑OP正在做类似的事情。 - TARKUS

我是楼主，这是3年前的事情 :) - JD Isaacks

前几天我在谷歌上搜索了一个问题。我找到了一个StackOverflow页面，有人说：“我使用了Gregory Lewis的代码，它起作用了。”我本来想留下一个关于另一个名叫Gregory Lewis的家伙的有趣评论，直到我滚动页面时看到他在谈论我给出的答案。我遇到了这个问题两次，甚至都不记得去年我解决了昨天我正在寻找答案的问题。 - TARKUS

为什么这个答案不在最上面？顺便说一句，这正是我所需要的。 - John

Answer 2

只需要调用以下代码即可：

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

- Kraftwurm

---

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

Answer 3

你试过这个吗？：

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

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

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

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

当然，前提是您加载到iframe中的站点与父文档在同一个域上。如果不是，则位于iframe中的文档将完全无法访问父DOM。

- James Sumners

---

我尝试了 $(window.parent).dialog('close');，但它没有起作用。不过我采纳了你提供的保持引用的方法，并在我的答案中使用了它。谢谢。 - JD Isaacks

$(window.parent).dialog('close') 不起作用，因为 window.parent 指的是父级 JavaScript Window 对象，而不是 jQuery UI 对话框元素。 - cdmckay