从 iframe 中关闭 jQuery UI 对话框

Question

我已经实现了以下代码，用于在jQuery对话框（使用iframe）中上传照片。

这是iframe的代码：

<div style="display: none">
    <iframe id="upload-form" frameborder="0" marginheight="0" marginwidth="0" src="Upload.aspx"></iframe>
</div>

以下是位于父页面的 jQuery 代码，用于打开对话框。

$("#upload-image").click(function (e) {
    e.preventDefault();
    $('#upload-form').dialog({
        modal: true,
        width: 300,
        title: "Upload Image",
        autoOpen: true,
        close: function(event, ui) { $(this).dialog('close') }
    });
});

上传成功后，我在iframe页面中注入了一段脚本，以将结果传回父页面，但同时我希望关闭对话框。

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    $(parent.document).find('#upload-form').dialog('close');
});

#imagePathValue 被成功传递，但我似乎无法关闭对话框。

有任何想法吗？

- Marko

Answer 1

为使其正常工作，您必须从父级调用 jQuery，而不是在 iframe 内部调用。要做到这一点，请使用以下代码...

window.parent.jQuery('#upload-form').dialog('close');

应该就这样了！

- mikesir87

Answer 2

试试这个：

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
});

- Jeremy B.

---

两个答案是相同的，所以是的。 - Jeremy B.

Answer 3

除此之外，您还应该这样做：

window.parent.$('#upload-form').remove();

因此，Iframe实例在对话框关闭后被移除。

因此，最终代码应该是：

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
    window.parent.$('#upload-form').remove();
});

感谢Kaushal。

- Kaushal Subba

---

谢谢。没有remove()函数，打开、关闭对话框再重新打开是可行的，但第二次关闭会失败。 - Shan Plourde

应该使用dialog('destroy')代替；对话框创建的资源不仅限于对话框本身的子DOM元素所引用的资源。 - bvoyelr

Answer 4

一定要记住，调用这些类型的函数时，必须引用父文档中的函数。当您使用jquery构造函数的第二个参数时，您只指定了方法的目标，而不是执行它的位置。

这就是为什么$('element'，window.parent.document).method();不起作用，而window.parent.jQuery('element').method();会起作用的原因。

- Kristian