从 iframe 关闭 jQuery UI 对话框

Posted 2023-03-06

【中文标题】从 iframe 关闭 jQuery UI 对话框

【英文标题】：Close jQuery UI Dialog from Iframe

【发布时间】：2011-05-22 11:39:12

【问题描述】：

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

这是 iframe

<div style="display: none">
    <iframe id="upload-form" frameborder="0" margin margin 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 传递成功，但我似乎无法关闭对话框。

有什么想法吗？

【参考方案1】：

为了使其工作，您必须从父级调用 jQuery，而不是从 iframe 内调用。为此，请使用以下...

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

应该这样做！

【参考方案2】：

试试这个：

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

【讨论】：

两个答案都是一样的，所以是的。

【参考方案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();
);

谢谢 考沙尔

【讨论】：

谢谢。没有 remove()，打开，关闭，然后重新打开对话框有效，但第二次关闭尝试失败

dialog('destroy') 应该被使用；对话框创建的资源不是对话框本身的子 DOM 元素中引用的资源。

【参考方案4】：

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

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